feat(crypto): add certificate hash generation and verification functions

- Implemented `generateCertificateHash` to create a hash using HMAC-SHA256 based on user ID and team ID.
- Added `verifyCertificateHash` to validate a given certificate ID against generated hash.
- Introduced `crypto-js` library as a dependency for cryptographic functions.

chore(deps): update ajv to version 8.13.0 and add crypto-js dependency

- Updated `ajv` from version 6.12.6 to 8.13.0 in package.json and package-lock.json.
- Added `crypto-js` library to package.json for cryptographic operations.
- Included type definitions for `crypto-js` in development dependencies.

.claude/settings.local.json

@@ -0,0 +1,24 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(npx nx run-many:*)",
+      "Bash(npm install:*)",
+      "Bash(npm view:*)",
+      "Bash(npx nx build landing)",
+      "Bash(npm uninstall:*)",
+      "Bash(dir:*)",
+      "Bash(ren page.tsx page-original.tsx)",
+      "Bash(ren:*)",
+      "Bash(npx supabase:*)",
+      "Bash(libs/service/src/types/supabase.ts)",
+      "Bash(npx nx build:*)",
+      "Bash(git add:*)",
+      "Bash(git commit:*)",
+      "Bash(git push)",
+      "Bash(findstr:*)",
+      "Bash(ls:*)"
+    ],
+    "deny": [],
+    "ask": []
+  }
+}

.dockerignore

@@ -0,0 +1,55 @@
+# Dependencies
+node_modules
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Build outputs
+dist
+.next
+out
+build
+coverage
+
+# IDE
+.vscode
+.idea
+*.swp
+*.swo
+*~
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Git
+.git
+.gitignore
+
+# Environment
+.env
+.env.local
+.env.*.local
+
+# Testing
+coverage
+.nyc_output
+
+# Logs
+logs
+*.log
+
+# Nx
+.nx
+
+# Docker
+Dockerfile
+docker-compose*.yml
+.dockerignore
+
+# Misc
+*.md
+!README.md
+.editorconfig
+.prettierrc
+.eslintrc

.env.example

@@ -0,0 +1,6 @@
+VITE_API_URL=https://forsomereason.dev/api/v1
+VITE_GITHUB_CLIENT_ID=SuperSecretClientID12345
+
+VITE_SUPABASE_URL=https://mamahakumaurtx5090ti.supabase.co
+VITE_SUPABASE_ANON_KEY=anonkeykekgimanasihbang
+SUPABASE_SERVICE_ROLE_KEY=service.role.keyisahsecret

.github/pull_request_template.md

@@ -0,0 +1,30 @@
+## Issue
+
+<!-- #GitHubIssueNumber / Issue Link / Describe the problem here (if the issue hasn't been defined)  -->
+
+## What did you do?
+
+<!--
+- Describe what did you do in this code
+- Example:
+  - [CORRECT] Add auth feature / Modify auth feature.
+  - [WRONG] Create file /controllers/auth.ts, /models/user.ts, modify /routes/web.ts
+-->
+
+## Screenshot / Video
+
+<!--
+Attach pictures of this work / video explanation about this work
+-->
+
+## Note for Deployment
+
+<!--
+- Tell to DevOps what should he do to deploy this change
+- example:
+  - Please run migration when deploy this
+  - Please upload these files into folder xxx
+  - Please create folder `xxx` and give permission `777`
+  - Please run this SQL after deploy ```sql INSERT INTO xxx (...) ```
+  - etc...
+-->

.github/workflows/deploy-backoffice.yml

@@ -0,0 +1,44 @@
+name: Deploy Backoffice
+
+on:
+  push:
+    branches:
+      - develop
+    paths:
+      - 'apps/backoffice/**' # INI BASED ON PATH CHANGES JADI NTAR KALAU ADA PUSH DIISNI OTOMATIS DEPLOY
+
+concurrency:
+  group: deploy-vps
+  cancel-in-progress: false
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repo
+        uses: actions/checkout@v4
+
+      - name: Deploy via SSH
+        uses: appleboy/ssh-action@v1.0.3
+        with:
+          host: ${{ secrets.SSH_HOST }}
+          username: ${{ secrets.SSH_USER }}
+          key: ${{ secrets.SSH_KEY }}
+          port: ${{ secrets.SSH_PORT }}
+          command_timeout: 30m
+          script: |
+            set -e
+            if [ ! -d ~/imphnen-frontend-service-backoffice ]; then
+              git clone https://github.com/IMPHNEN/imphnen-frontend-service.git ~/imphnen-frontend-service-backoffice
+            else
+              cd ~/imphnen-frontend-service-backoffice && git fetch origin && git reset --hard origin/develop && git pull
+            fi
+            cat > ~/imphnen-frontend-service-backoffice/apps/backoffice/.env << EOF
+            VITE_API_URL=${{ secrets.VITE_API_URL }}
+            VITE_SUPABASE_URL=${{ secrets.VITE_SUPABASE_URL }}
+            VITE_SUPABASE_ANON_KEY=${{ secrets.VITE_SUPABASE_ANON_KEY }}
+            EOF
+            docker compose -f ~/imphnen-frontend-service-backoffice/docker-compose-backoffice.yml down || true
+            DOCKER_BUILDKIT=1 docker compose -f ~/imphnen-frontend-service-backoffice/docker-compose-backoffice.yml build --progress=plain
+            docker compose -f ~/imphnen-frontend-service-backoffice/docker-compose-backoffice.yml up -d
+            docker image prune -af

.github/workflows/deploy-dimentorin.yml

@@ -0,0 +1,44 @@
+name: Deploy Dimentorin
+
+on:
+  push:
+    branches:
+      - develop
+    paths:
+      - 'apps/dimentorin/**' # INI BASED ON PATH CHANGES JADI NTAR KALAU ADA PUSH DIISNI OTOMATIS DEPLOY
+
+concurrency:
+  group: deploy-vps
+  cancel-in-progress: false
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repo
+        uses: actions/checkout@v4
+
+      - name: Deploy via SSH
+        uses: appleboy/ssh-action@v1.0.3
+        with:
+          host: ${{ secrets.SSH_HOST }}
+          username: ${{ secrets.SSH_USER }}
+          key: ${{ secrets.SSH_KEY }}
+          port: ${{ secrets.SSH_PORT }}
+          command_timeout: 30m
+          script: |
+            set -e
+            if [ ! -d ~/imphnen-frontend-service-dimentorin ]; then
+              git clone https://github.com/IMPHNEN/imphnen-frontend-service.git ~/imphnen-frontend-service-dimentorin
+            else
+              cd ~/imphnen-frontend-service-dimentorin && git fetch origin && git reset --hard origin/develop && git pull
+            fi
+            cat > ~/imphnen-frontend-service-dimentorin/apps/dimentorin/.env << EOF
+            VITE_API_URL=${{ secrets.VITE_API_URL }}
+            VITE_SUPABASE_URL=${{ secrets.VITE_SUPABASE_URL }}
+            VITE_SUPABASE_ANON_KEY=${{ secrets.VITE_SUPABASE_ANON_KEY }}
+            EOF
+            docker compose -f ~/imphnen-frontend-service-dimentorin/docker-compose-dimentorin.yml down || true
+            DOCKER_BUILDKIT=1 docker compose -f ~/imphnen-frontend-service-dimentorin/docker-compose-dimentorin.yml build --progress=plain
+            docker compose -f ~/imphnen-frontend-service-dimentorin/docker-compose-dimentorin.yml up -d
+            docker image prune -af

.github/workflows/deploy-gacha.yml

@@ -0,0 +1,44 @@
+name: Deploy Gacha
+
+on:
+  push:
+    branches:
+      - develop
+    paths:
+      - 'apps/gacha/**' # INI BASED ON PATH CHANGES JADI NTAR KALAU ADA PUSH DIISNI OTOMATIS DEPLOY
+
+concurrency:
+  group: deploy-vps
+  cancel-in-progress: false
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repo
+        uses: actions/checkout@v4
+
+      - name: Deploy via SSH
+        uses: appleboy/ssh-action@v1.0.3
+        with:
+          host: ${{ secrets.SSH_HOST }}
+          username: ${{ secrets.SSH_USER }}
+          key: ${{ secrets.SSH_KEY }}
+          port: ${{ secrets.SSH_PORT }}
+          command_timeout: 30m
+          script: |
+            set -e
+            if [ ! -d ~/imphnen-frontend-service-gacha ]; then
+              git clone https://github.com/IMPHNEN/imphnen-frontend-service.git ~/imphnen-frontend-service-gacha
+            else
+              cd ~/imphnen-frontend-service-gacha && git fetch origin && git reset --hard origin/develop && git pull
+            fi
+            cat > ~/imphnen-frontend-service-gacha/apps/gacha/.env << EOF
+            VITE_API_URL=${{ secrets.VITE_API_URL }}
+            VITE_SUPABASE_URL=${{ secrets.VITE_SUPABASE_URL }}
+            VITE_SUPABASE_ANON_KEY=${{ secrets.VITE_SUPABASE_ANON_KEY }}
+            EOF
+            docker compose -f ~/imphnen-frontend-service-gacha/docker-compose-gacha.yml down || true
+            DOCKER_BUILDKIT=1 docker compose -f ~/imphnen-frontend-service-gacha/docker-compose-gacha.yml build --progress=plain
+            docker compose -f ~/imphnen-frontend-service-gacha/docker-compose-gacha.yml up -d
+            docker image prune -af

.github/workflows/deploy-hackathon.yml

@@ -0,0 +1,45 @@
+name: Deploy Hackathon
+
+on:
+  push:
+    branches:
+      - develop
+    paths:
+      - 'apps/hackathon/**' # Auto deploy when changes pushed to apps/hackathon
+
+concurrency:
+  group: deploy-vps
+  cancel-in-progress: false
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repo
+        uses: actions/checkout@v4
+
+      - name: Deploy via SSH
+        uses: appleboy/ssh-action@v1.0.3
+        with:
+          host: ${{ secrets.SSH_HOST }}
+          username: ${{ secrets.SSH_USER }}
+          key: ${{ secrets.SSH_KEY }}
+          port: ${{ secrets.SSH_PORT }}
+          command_timeout: 30m
+          script: |
+            set -e
+            if [ ! -d ~/imphnen-frontend-service-hackathon ]; then
+              git clone https://github.com/IMPHNEN/imphnen-frontend-service.git ~/imphnen-frontend-service-hackathon
+            else
+              cd ~/imphnen-frontend-service-hackathon && git fetch origin && git reset --hard origin/develop && git pull
+            fi
+            cat > ~/imphnen-frontend-service-hackathon/.env.local << EOF
+            VITE_API_URL=${{ secrets.VITE_API_URL }}
+            VITE_SUPABASE_URL=${{ secrets.VITE_SUPABASE_URL }}
+            VITE_SUPABASE_ANON_KEY=${{ secrets.VITE_SUPABASE_ANON_KEY }}
+            EOF
+            docker compose -f ~/imphnen-frontend-service-hackathon/docker-compose-hackathon.yml down || true
+            docker builder prune -af || true
+            DOCKER_BUILDKIT=1 docker compose --env-file ~/imphnen-frontend-service-hackathon/.env.local -f ~/imphnen-frontend-service-hackathon/docker-compose-hackathon.yml build --progress=plain
+            docker compose -f ~/imphnen-frontend-service-hackathon/docker-compose-hackathon.yml up -d
+            docker image prune -af

.github/workflows/deploy-landing.yml

@@ -0,0 +1,44 @@
+name: Deploy Landing
+
+on:
+  push:
+    branches:
+      - develop
+    paths:
+      - 'apps/landing/**' # INI BASED ON PATH CHANGES JADI NTAR KALAU ADA PUSH DIISNI OTOMATIS DEPLOY
+
+concurrency:
+  group: deploy-vps
+  cancel-in-progress: false
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repo
+        uses: actions/checkout@v4
+
+      - name: Deploy via SSH
+        uses: appleboy/ssh-action@v1.0.3
+        with:
+          host: ${{ secrets.SSH_HOST }}
+          username: ${{ secrets.SSH_USER }}
+          key: ${{ secrets.SSH_KEY }}
+          port: ${{ secrets.SSH_PORT }}
+          command_timeout: 30m
+          script: |
+            set -e
+            if [ ! -d ~/imphnen-frontend-service ]; then
+              git clone https://github.com/IMPHNEN/imphnen-frontend-service.git ~/imphnen-frontend-service
+            else
+              cd ~/imphnen-frontend-service && git fetch origin && git reset --hard origin/develop && git pull
+            fi
+            cat > ~/imphnen-frontend-service/apps/landing/.env << EOF
+            NEXT_PUBLIC_API_URL=${{ secrets.NEXT_PUBLIC_API_URL }}
+            NEXT_PUBLIC_SUPABASE_URL=${{ secrets.NEXT_PUBLIC_SUPABASE_URL }}
+            NEXT_PUBLIC_SUPABASE_ANON_KEY=${{ secrets.NEXT_PUBLIC_SUPABASE_ANON_KEY }}
+            EOF
+            docker compose -f ~/imphnen-frontend-service/docker-compose-landing.yml down || true
+            DOCKER_BUILDKIT=1 docker compose -f ~/imphnen-frontend-service/docker-compose-landing.yml build --progress=plain
+            docker compose -f ~/imphnen-frontend-service/docker-compose-landing.yml up -d
+            docker image prune -af

.github/workflows/test-build.yml

@@ -0,0 +1,37 @@
+name: Test and Build
+
+on:
+  push:
+    branches: ['develop']
+  pull_request:
+    branches: ['develop']
+
+env:
+  NODE_VERSION: 22.14.0
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Use Node.js ${{ env.NODE_VERSION }}
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+
+      - name: Install dependencies
+        run: npm install
+
+      - name: Set env vars
+        run: |
+          echo "CMS_SECRET=${{ secrets.CMS_SECRET }}" >> $GITHUB_ENV
+          echo "CMS_STORAGE_REGION=${{ secrets.CMS_STORAGE_REGION }}" >> $GITHUB_ENV
+          echo "CMS_STORAGE_ENDPOINT=${{ secrets.CMS_STORAGE_ENDPOINT }}" >> $GITHUB_ENV
+          echo "CMS_STORAGE_ACCESS_KEY_ID=${{ secrets.CMS_STORAGE_ACCESS_KEY_ID }}" >> $GITHUB_ENV
+          echo "CMS_STORAGE_SECRET_ACCESS_KEY=${{ secrets.CMS_STORAGE_SECRET_ACCESS_KEY }}" >> $GITHUB_ENV
+          echo "CMS_POSTGRES_URL=${{ secrets.CMS_POSTGRES_URL }}" >> $GITHUB_ENV
+
+      - name: Nx Build
+        run: npx nx run-many --target=build --all

.gitignore

@@ -42,4 +42,27 @@ Thumbs.db
 .nx/workspace-data
 
 vite.config.*.timestamp*
-vitest.config.*.timestamp*
+vitest.config.*.timestamp*
+
+storybook-static
+
+
+.env
+.env.prod
+.env.develop
+.env.staging
+
+# Nuxt dev/build outputs
+.output
+.data
+.nuxt
+.nitro
+.cache
+
+# Next.js
+.next
+out
+.cursor/rules/nx-rules.mdc
+.github/instructions/nx.instructions.md
+
+.env.local

.mcp.json

@@ -0,0 +1,9 @@
+{
+  "mcpServers": {
+    "nx-mcp": {
+      "type": "stdio",
+      "command": "npx",
+      "args": ["nx", "mcp"]
+    }
+  }
+}

.vscode/extensions.json

@@ -2,6 +2,7 @@
   "recommendations": [
     "nrwl.angular-console",
     "esbenp.prettier-vscode",
-    "dbaeumer.vscode-eslint"
+    "dbaeumer.vscode-eslint",
+    "ms-playwright.playwright"
   ]
 }

AGENT.md

@@ -0,0 +1,13 @@
+<!-- nx configuration start-->
+<!-- Leave the start & end comments to automatically receive updates. -->
+
+# General Guidelines for working with Nx
+
+- When running tasks (for example build, lint, test, e2e, etc.), always prefer running the task through `nx` (i.e. `nx run`, `nx run-many`, `nx affected`) instead of using the underlying tooling directly
+- You have access to the Nx MCP server and its tools, use them to help the user
+- When answering questions about the repository, use the `nx_workspace` tool first to gain an understanding of the workspace architecture where applicable.
+- When working in individual projects, use the `nx_project_details` mcp tool to analyze and understand the specific project structure and dependencies
+- For questions around nx configuration, best practices or if you're unsure, use the `nx_docs` tool to get relevant, up-to-date docs. Always use this instead of assuming things about nx configuration
+- If the user needs help with an Nx configuration or project graph error, use the `nx_workspace` tool to get any errors
+
+<!-- nx configuration end-->

CLAUDE.md

@@ -0,0 +1,13 @@
+<!-- nx configuration start-->
+<!-- Leave the start & end comments to automatically receive updates. -->
+
+# General Guidelines for working with Nx
+
+- When running tasks (for example build, lint, test, e2e, etc.), always prefer running the task through `nx` (i.e. `nx run`, `nx run-many`, `nx affected`) instead of using the underlying tooling directly
+- You have access to the Nx MCP server and its tools, use them to help the user
+- When answering questions about the repository, use the `nx_workspace` tool first to gain an understanding of the workspace architecture where applicable.
+- When working in individual projects, use the `nx_project_details` mcp tool to analyze and understand the specific project structure and dependencies
+- For questions around nx configuration, best practices or if you're unsure, use the `nx_docs` tool to get relevant, up-to-date docs. Always use this instead of assuming things about nx configuration
+- If the user needs help with an Nx configuration or project graph error, use the `nx_workspace` tool to get any errors
+
+<!-- nx configuration end-->

README.md

@@ -1,101 +1,138 @@
-# ImphnenFrontendService
+# IMPHNEN Frontend Service
 
-<a alt="Nx logo" href="https://nx.dev" target="_blank" rel="noreferrer"><img src="https://raw.githubusercontent.com/nrwl/nx/master/images/nx-logo.png" width="45"></a>
+<p align="center">
+  <img src="docs/logo.svg" alt="IMPHNEN">
+</p>
 
-✨ Your new, shiny [Nx workspace](https://nx.dev) is ready ✨.
+This repository is a **monorepo** for all frontend services of IMPHNEN. The monorepo includes three main applications:
 
-[Learn more about this workspace setup and its capabilities](https://nx.dev/getting-started/tutorials/react-monorepo-tutorial?utm_source=nx_project&amp;utm_medium=readme&amp;utm_campaign=nx_projects) or run `npx nx graph` to visually explore what was created. Now, let's get you up to speed!
+1. **Gacha** - Application for <a href="https://gacha.imphnen.dev/" target="_blank">Gacha Website</a>.
+2. **Backoffice** - Application for <a href="https://gacha.imphnen.dev/" target="_blank">Internal Management Website</a>.
+3. **Dimentorin** - Application for <a href="https://dimentorin.imphnen.dev/" target="_blank">Mentoring Service</a>.
+4. **Landing Page** - Application for <a href="https://imphnen.dev/" target="_blank">Landing Page</a>.
 
-## Run tasks
+## How to install
 
-To run the dev server for your app, use:
+1. Clone this repository:
+   ```sh
+   git clone https://github.com/IMPHNEN/imphnen-frontend-service.git
+   cd imphnen-frontend-service
+   ```
+2. Install all dependencies:
+   ```sh
+   npm install
+   ```
+
+## How to run
+
+### Setup Environment Variables
+
+Before running the applications, you need to set up the environment variables. You can do this by copying the `.env.example` file to `.env` and modifying the values according to your needs.
 
 ```sh
-npx nx serve dimentorin
+cd apps/{appname}
+cp .env.example .env
 ```
 
-To create a production bundle:
+### Development
 
-```sh
-npx nx build dimentorin
-```
+Use the following commands to run in development mode:
 
-To see all available targets to run for a project, run:
+- **Gacha**:
+  ```sh
+  npm run gacha:dev
+  ```
+- **Backoffice**:
+  ```sh
+  npm run backoffice:dev
+  ```
+- **Dimentorin**:
+  ```sh
+  npm run dimentorin:dev
+  ```
+- **Landing Page**:
+  ```sh
+  npm run landing:dev
+  ```
 
-```sh
-npx nx show project dimentorin
-```
+### Build
 
-These targets are either [inferred automatically](https://nx.dev/concepts/inferred-tasks?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects) or defined in the `project.json` or `package.json` files.
+Use the following commands to build the applications:
 
-[More about running tasks in the docs &raquo;](https://nx.dev/features/run-tasks?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects)
+- **Gacha**:
+  ```sh
+  npm run gacha:build
+  ```
+- **Backoffice**:
+  ```sh
+  npm run backoffice:build
+  ```
+- **Dimentorin**:
+  ```sh
+  npm run dimentorin:build
+  ```
+- **Landing Page**:
+  ```sh
+  npm run landing:build
+  ```
 
-## Add new projects
+### Production
 
-While you could add new projects to your workspace manually, you might want to leverage [Nx plugins](https://nx.dev/concepts/nx-plugins?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects) and their [code generation](https://nx.dev/features/generate-code?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects) feature.
+Use the following commands to run the applications in production mode:
 
-Use the plugin's generator to create new projects.
+- **Gacha**:
+  ```sh
+  npm run gacha:prod
+  ```
+- **Backoffice**:
+  ```sh
+  npm run backoffice:prod
+  ```
+- **Dimentorin**:
+  ```sh
+  npm run dimentorin:prod
+  ```
+- **Landing Page**:
+  ```sh
+  npm run landing:prod
+  ```
 
-To generate a new application, use:
+### Storybook
 
-```sh
-npx nx g @nx/react:app demo
-```
+This repository uses Storybook to develop, test, and document UI components in an isolated and interactive environment. Below are the commands to work with Storybook:
 
-To generate a new library, use:
+- **Run Storybook**
 
-```sh
-npx nx g @nx/react:lib mylib
-```
+  This command starts Storybook in development mode, allowing you to view and test UI components interactively.
 
-You can use `npx nx list` to get a list of installed plugins. Then, run `npx nx list <plugin-name>` to learn about more specific capabilities of a particular plugin. Alternatively, [install Nx Console](https://nx.dev/getting-started/editor-setup?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects) to browse plugins and generators in your IDE.
+  ```sh
+  npm run ui:storybook
+  ```
 
-[Learn more about Nx plugins &raquo;](https://nx.dev/concepts/nx-plugins?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects) | [Browse the plugin registry &raquo;](https://nx.dev/plugin-registry?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects)
+- **Run Unit Test**
 
-## Set up CI!
+  This command runs unit tests for the UI components to ensure they function as expected.
 
-### Step 1
+  ```sh
+  npm run ui:test
+  ```
 
-To connect to Nx Cloud, run the following command:
+- **Build Components**
 
-```sh
-npx nx connect
-```
+  This command generates a static build of Storybook, which can be deployed for sharing and documentation purposes.
 
-Connecting to Nx Cloud ensures a [fast and scalable CI](https://nx.dev/ci/intro/why-nx-cloud?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects) pipeline. It includes features such as:
+  ```sh
+  npm run ui:build
+  ```
 
-- [Remote caching](https://nx.dev/ci/features/remote-cache?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects)
-- [Task distribution across multiple machines](https://nx.dev/ci/features/distribute-task-execution?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects)
-- [Automated e2e test splitting](https://nx.dev/ci/features/split-e2e-tasks?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects)
-- [Task flakiness detection and rerunning](https://nx.dev/ci/features/flaky-tasks?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects)
+## How to contribute
 
-### Step 2
+1. Fork the repository and clone it locally.
+2. Create a new branch for a new feature or fix:
+   ```sh
+   git checkout -b feat/feature-name
+   ```
+3. Make changes, commit, and push to your forked repository.
+4. Create a pull request to this repository `develop` branch.
 
-Use the following command to configure a CI workflow for your workspace:
-
-```sh
-npx nx g ci-workflow
-```
-
-[Learn more about Nx on CI](https://nx.dev/ci/intro/ci-with-nx#ready-get-started-with-your-provider?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects)
-
-## Install Nx Console
-
-Nx Console is an editor extension that enriches your developer experience. It lets you run tasks, generate code, and improves code autocompletion in your IDE. It is available for VSCode and IntelliJ.
-
-[Install Nx Console &raquo;](https://nx.dev/getting-started/editor-setup?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects)
-
-## Useful links
-
-Learn more:
-
-- [Learn more about this workspace setup](https://nx.dev/getting-started/tutorials/react-monorepo-tutorial?utm_source=nx_project&amp;utm_medium=readme&amp;utm_campaign=nx_projects)
-- [Learn about Nx on CI](https://nx.dev/ci/intro/ci-with-nx?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects)
-- [Releasing Packages with Nx release](https://nx.dev/features/manage-releases?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects)
-- [What are Nx plugins?](https://nx.dev/concepts/nx-plugins?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects)
-
-And join the Nx community:
-- [Discord](https://go.nx.dev/community)
-- [Follow us on X](https://twitter.com/nxdevtools) or [LinkedIn](https://www.linkedin.com/company/nrwl)
-- [Our Youtube channel](https://www.youtube.com/@nxdevtools)
-- [Our blog](https://nx.dev/blog?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects)
+If you encounter any issues or problems, feel free to create a new Issue.

apps/backoffice/.deploy

@@ -0,0 +1 @@
+Tue, Nov 25, 2025  4:21:27 PM

apps/backoffice/.deploy-trigger

@@ -0,0 +1,2 @@
+# Deployment trigger
+# Updated to deploy circular dependency fixes and auth hooks

apps/backoffice/.env.example

@@ -0,0 +1 @@
+VITE_API_URL=

apps/backoffice/eslint.config.mjs

@@ -0,0 +1,12 @@
+import nx from '@nx/eslint-plugin';
+import baseConfig from '../../eslint.config.mjs';
+
+export default [
+  ...baseConfig,
+  ...nx.configs['flat/react'],
+  {
+    files: ['**/*.ts', '**/*.tsx', '**/*.js', '**/*.jsx'],
+    // Override or add rules here
+    rules: {},
+  },
+];

apps/backoffice/index.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Backoffice</title>
+    <base href="/" />
+
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="icon" type="image/x-icon" href="/logos/simple.svg" />
+    <link rel="stylesheet" href="/src/styles.css" />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

apps/backoffice/postcss.config.mjs

@@ -0,0 +1,9 @@
+import { join } from 'path';
+
+export default {
+  plugins: {
+    '@tailwindcss/postcss': {
+      base: join(import.meta.dirname, '../../'),
+    },
+  },
+};

apps/backoffice/project.json

@@ -0,0 +1,9 @@
+{
+  "name": "backoffice",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "apps/backoffice/src",
+  "projectType": "application",
+  "tags": [],
+  "// targets": "to see all targets run: nx show project backoffice --web",
+  "targets": {}
+}

apps/backoffice/src/app/(protected)/accounts/_components/modal-edit-account.tsx

@@ -0,0 +1,162 @@
+import { Button } from '@imphnen-frontend-service/ui/atoms';
+import { InputField, Modal } from '@imphnen-frontend-service/ui/molecules';
+import { useState } from 'react';
+
+interface IModalEditAccount {
+  isOpen: boolean;
+  onClose: () => void;
+  handleEditAccount?: () => void;
+  currentStep?: number;
+  nextStep: () => void;
+  prevStep: () => void;
+  resetStep: () => void;
+}
+
+const ModalEditAccount = ({
+  isOpen,
+  onClose,
+  currentStep,
+  nextStep,
+  prevStep,
+  resetStep,
+  handleEditAccount,
+}: IModalEditAccount) => {
+  return (
+    <Modal
+      className="min-w-[400px] bg-primary-50 rounded-lg p-[40px] flex flex-col gap-8 text-center"
+      isOpen={isOpen}
+      onClose={() => {
+        onClose();
+        resetStep();
+      }}
+      disableEscapeKeyDown={true}
+    >
+      {currentStep === 1 && <StepOne nextStep={nextStep} onClose={onClose} />}
+      {currentStep === 2 && (
+        <StepTwo
+          onClose={onClose}
+          handleEditAccount={handleEditAccount}
+          resetStep={resetStep}
+        />
+      )}
+    </Modal>
+  );
+};
+
+interface IStepOneProps {
+  nextStep: () => void;
+  onClose: () => void;
+}
+
+const StepOne = ({ nextStep }: IStepOneProps) => {
+  const [fullName, setFullName] = useState('Ahmad Wiyana');
+  const [email, setEmail] = useState('fullname23@gmail.com');
+  const [phoneNumber, setPhoneNumber] = useState('081904423804');
+  const [address, setAddress] = useState('Jl. Pantai Cibaduyut Indah');
+
+  return (
+    <>
+      <Modal.Header>
+        <h2 className="text-p1 font-semibold text-primary-500 mb-3">
+          Edit Data Akun
+        </h2>
+      </Modal.Header>
+      <Modal.Content className="flex flex-col gap-8">
+        <div className="flex flex-col gap-4">
+          <InputField
+            label="Nama Lengkap"
+            type="text"
+            placeholder="Masukkan Nama Lengkap"
+            value={fullName}
+            onChange={(e) => setFullName(e.target.value)}
+            size="lg"
+            className="w-full"
+          />
+          <InputField
+            label="Email"
+            type="text"
+            placeholder="Masukkan Email"
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            size="lg"
+            className="w-full"
+          />
+          <InputField
+            label="Nomor Telepon"
+            type="text"
+            placeholder="Masukkan Nomor Telepon"
+            value={phoneNumber}
+            onChange={(e) => setPhoneNumber(e.target.value)}
+            size="lg"
+            className="w-full"
+          />
+          <InputField
+            label="Alamat"
+            type="text"
+            placeholder="Masukkan Alamat"
+            value={address}
+            onChange={(e) => setAddress(e.target.value)}
+            size="lg"
+            className="w-full"
+          />
+        </div>
+
+        <Button
+          variant="primary"
+          size="lg"
+          className="w-full"
+          onClick={nextStep}
+        >
+          Perbarui Data
+        </Button>
+      </Modal.Content>
+    </>
+  );
+};
+
+interface IStepTwoProps {
+  onClose: () => void;
+  handleEditAccount?: () => void;
+  resetStep: () => void;
+}
+
+const StepTwo = ({ onClose, handleEditAccount, resetStep }: IStepTwoProps) => (
+  <>
+    <Modal.Header className="mb-0 text-center items-center">
+      <h2 className="text-p1 font-semibold text-primary-500 mb-3">
+        Update Data
+      </h2>
+      <p className="text-p3 text-neutral-400">
+        Apakah kamu yakin dengan
+        <br /> perubahan yang dilakukan?
+      </p>
+    </Modal.Header>
+    <Modal.Content className="flex gap-4">
+      <Button
+        variant="bordered"
+        size="lg"
+        className="w-full"
+        onClick={() => {
+          onClose();
+          resetStep();
+        }}
+      >
+        Batal
+      </Button>
+      <Button
+        variant="primary"
+        size="lg"
+        className="w-full"
+        onClick={() => {
+          handleEditAccount && handleEditAccount();
+          onClose();
+          resetStep();
+        }}
+      >
+        Update
+      </Button>
+    </Modal.Content>
+  </>
+);
+
+export default ModalEditAccount;

apps/backoffice/src/app/(protected)/accounts/page.tsx

@@ -0,0 +1,195 @@
+import * as React from 'react';
+
+import { FC, Fragment, ReactElement, useState } from 'react';
+import {
+  FilterOutlined,
+  SearchOutlined,
+  EditOutlined,
+} from '@ant-design/icons';
+import { Button, Input } from '@imphnen-frontend-service/ui/atoms';
+import { DataTable, Filter } from '@imphnen-frontend-service/ui/organisms';
+
+import {
+  ColumnDef,
+  getCoreRowModel,
+  getPaginationRowModel,
+  PaginationState,
+  useReactTable,
+  RowSelectionState,
+} from '@tanstack/react-table';
+import ModalEditAccount from './_components/modal-edit-account';
+import { useQueryState } from '@imphnen-frontend-service/utils';
+
+interface Account {
+  id: number;
+  name: string;
+  email: string;
+  phone: string;
+  address: string;
+}
+
+// Mock data for demonstration
+const mockData: Account[] = Array.from({ length: 90 }, (_, i) => ({
+  id: i + 1,
+  name: i === 0 ? 'Ahmad Wijuana' : 'Nama Lengkap',
+  email: 'fullname23@gmail.com',
+  phone: '081904423804',
+  address: 'Jl. Pantai Cibaduyut Indah',
+}));
+
+export const Components: FC = (): ReactElement => {
+  const [showModalEditAccount, setShowModalEditAccount] = useState(false);
+
+  const {
+    step: currentStep,
+    nextStep,
+    prevStep,
+    resetStep,
+  } = useQueryState('step', {
+    defaultValue: 1,
+    maxValue: 2,
+    minValue: 1,
+  });
+
+  const [pagination, setPagination] = React.useState<PaginationState>({
+    pageIndex: 0,
+    pageSize: 9,
+  });
+
+  const [rowSelection, setRowSelection] = React.useState<RowSelectionState>({});
+  const [showFilter, setShowFilter] = useState(false);
+
+  const columns: ColumnDef<Account>[] = [
+    {
+      id: 'select',
+      header: ({ table }) => (
+        <input
+          type="checkbox"
+          className="rounded"
+          checked={table.getIsAllRowsSelected()}
+          onChange={table.getToggleAllRowsSelectedHandler()}
+        />
+      ),
+      cell: ({ row }) => (
+        <input
+          type="checkbox"
+          className="rounded"
+          checked={row.getIsSelected()}
+          onChange={row.getToggleSelectedHandler()}
+        />
+      ),
+    },
+    {
+      header: 'No',
+      accessorKey: 'id',
+    },
+    {
+      header: 'Nama Lengkap',
+      accessorKey: 'name',
+    },
+    {
+      header: 'Email',
+      accessorKey: 'email',
+    },
+    {
+      header: 'Nomor Telp',
+      accessorKey: 'phone',
+    },
+    {
+      header: 'Alamat Pengiriman',
+      accessorKey: 'address',
+    },
+    {
+      header: 'Action',
+      cell: ({ row }) => (
+        <Button
+          variant="primary"
+          size="sm"
+          onClick={(e) => {
+            e.stopPropagation();
+            setShowModalEditAccount(true);
+          }}
+          className="flex items-center gap-2"
+        >
+          <EditOutlined /> Edit
+        </Button>
+      ),
+    },
+  ];
+
+  const table = useReactTable({
+    data: mockData,
+    columns,
+    state: {
+      pagination,
+      rowSelection,
+    },
+    enableRowSelection: true,
+    onRowSelectionChange: setRowSelection,
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    onPaginationChange: setPagination,
+    pageCount: Math.ceil(mockData.length / pagination.pageSize),
+    manualPagination: false,
+  });
+
+  return (
+    <Fragment>
+      <main className="w-full px-[48px] py-[40px] flex flex-col gap-8">
+        {/* Header */}
+        <header className="bg-white py-4 px-8 rounded-lg shadow p-4">
+          <h1 className="text-p2 font-semibold">Data Akun</h1>
+        </header>
+        {/* Account Table Section */}
+        <section className="flex flex-col gap-6 p-8 bg-white rounded-md">
+          {/* Search and Filter */}
+          <div className="flex justify-between items-center gap-8 mb-2">
+            <div className="relative w-full">
+              <Input
+                placeholder="Cari berdasarkan nama lengkap, email"
+                className="pl-12 w-full max-h-full"
+              />
+              <div className="absolute left-3 top-1/2 transform -translate-y-1/2 text-[16px]">
+                <SearchOutlined />
+              </div>
+            </div>
+            <div className="relative">
+              <Button
+                variant="primary"
+                size="md"
+                className="flex items-center gap-3"
+                disabled
+                onClick={() => setShowFilter(!showFilter)}
+              >
+                <FilterOutlined />
+                Filters
+              </Button>
+              {showFilter && (
+                <div className="absolute right-0 top-[calc(100%+12px)] z-10 shadow-lg">
+                  <Filter onClose={() => setShowFilter(false)} options={[]} />
+                </div>
+              )}
+            </div>
+          </div>
+          {/* Table */}
+          <DataTable data={mockData} columns={columns} table={table} />
+        </section>
+      </main>
+
+      {/* Modal Edit Account */}
+      <ModalEditAccount
+        currentStep={currentStep}
+        isOpen={showModalEditAccount}
+        onClose={() => setShowModalEditAccount(false)}
+        handleEditAccount={() => {
+          console.log('Account updated');
+        }}
+        nextStep={nextStep}
+        prevStep={prevStep}
+        resetStep={resetStep}
+      />
+    </Fragment>
+  );
+};
+
+export default Components;

apps/backoffice/src/app/(protected)/dashboard-dimentorin/_components/chart/session-status.tsx

@@ -0,0 +1,52 @@
+import { Cell, Pie, PieChart, ResponsiveContainer, Tooltip } from "recharts"
+import { PieLabelProps } from "recharts/types/polar/Pie"
+
+type ChartProps = {
+  name: string
+  value: number
+  color: string
+}
+
+const chartData: ChartProps[] = [
+  { name: "Active", value: 49, color: "#23A1EB" },
+  { name: "Done", value: 24, color: "#81CBF8" },
+  { name: "Canceled", value: 27, color: "#BCE1FB" },
+]
+
+const RADIAN = Math.PI / 180;
+const renderCustomizedLabel = ({ cx, cy, midAngle, innerRadius, outerRadius, percent }: PieLabelProps) => {
+  const radius = innerRadius + (outerRadius - innerRadius) * 0.5;
+  const x = cx + radius * Math.cos(-(midAngle ?? 0) * RADIAN);
+  const y = cy + radius * Math.sin(-(midAngle ?? 0) * RADIAN);
+
+  return (
+    <text x={x} y={y} fill="white" textAnchor={x > cx ? 'start' : 'end'} dominantBaseline="central">
+      {`${((percent ?? 1) * 100).toFixed(0)}%`}
+    </text>
+  );
+};
+
+export const SessionStatusChart = () => {
+  return (
+    <ResponsiveContainer width="100%" height={320}>
+      <PieChart width={500} height={320}>
+        <Pie
+          data={chartData}
+          dataKey="value"
+          nameKey="name"
+          cx="50%"
+          cy="50%"
+          innerRadius={40}
+          outerRadius={100}
+          labelLine={false}
+          label={renderCustomizedLabel}
+        >
+          {chartData.map((entry, index) => (
+            <Cell key={`cell-${index}`} fill={entry.color} />
+          ))}
+        </Pie>
+        <Tooltip />
+      </PieChart>
+    </ResponsiveContainer>
+  )
+}

apps/backoffice/src/app/(protected)/dashboard-dimentorin/_components/chart/user-growth.tsx

@@ -0,0 +1,36 @@
+import { CartesianGrid, Legend, Line, LineChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts"
+
+type ChartProps = {
+  name: string
+  activeUser: number
+  activeSession: number
+}
+
+const chartData: ChartProps[] = [
+  { name: "2014", activeUser: 0, activeSession: 0 },
+  { name: "2015", activeUser: 15, activeSession: 25 },
+  { name: "2016", activeUser: 30, activeSession: 40 },
+  { name: "2017", activeUser: 45, activeSession: 55 },
+  { name: "2018", activeUser: 60, activeSession: 70 },
+  { name: "2019", activeUser: 75, activeSession: 85 },
+  { name: "2020", activeUser: 90, activeSession: 95 },
+  { name: "2021", activeUser: 85, activeSession: 80 },
+  { name: "2022", activeUser: 95, activeSession: 90 },
+  { name: "2023", activeUser: 100, activeSession: 100 },
+]
+
+export const UserGrowthChart = () => {
+  return (
+    <ResponsiveContainer width="100%" height={320}>
+      <LineChart data={chartData} width={500} height={320} margin={{ left: -32 }}>
+        <CartesianGrid />
+        <XAxis dataKey="name" />
+        <YAxis tickCount={10} />
+        <Tooltip />
+        <Legend />
+        <Line dataKey="activeUser" stroke="#23A1EB" />
+        <Line dataKey="activeSession" stroke="#0877C1" />
+      </LineChart>
+    </ResponsiveContainer>
+  )
+}

apps/backoffice/src/app/(protected)/dashboard-dimentorin/page.tsx

@@ -0,0 +1,115 @@
+import { Button } from "@imphnen-frontend-service/ui/atoms";
+import { BackofficeWrapper } from "@imphnen-frontend-service/ui/organisms";
+import { For } from "@imphnen-frontend-service/utils";
+import { ReactElement } from "react";
+import { UserGrowthChart } from "./_components/chart/user-growth";
+import { SessionStatusChart } from "./_components/chart/session-status";
+
+const Overview = () => {
+  return (
+    <div className="bg-white px-6 py-4 rounded-md shadow">
+      <h3 className="text-primary-500 text-p2 font-semibold mb-2.5">0</h3>
+      <p className="text-neutral-400 text-p3">Total Users</p>
+    </div>
+  )
+}
+
+export default function Components(): ReactElement {
+  return (
+    <BackofficeWrapper title="Dimentorin.dev">
+      <h1 className="text-p1 font-semibold text-neutral-700 mb-5">Overview</h1>
+
+      <div className="space-y-14">
+        <div>
+          <Button type="button" size="sm" variant="bordered" className="bg-white text-md text-neutral-900 mb-5 border-primary-200">
+            Overview
+          </Button>
+
+          <div className="grid grid-cols-5 gap-5">
+            <For data={Array.from({ length: 5 })}>
+              {(_, index) => <Overview key={index} />}
+            </For>
+          </div>
+        </div>
+
+        <div>
+          <Button type="button" size="sm" variant="bordered" className="bg-white text-md text-neutral-900 mb-5 border-primary-200">
+            Trends & Analytics
+          </Button>
+
+          <div className="grid grid-cols-7 gap-x-5">
+            <div className="bg-white px-6 py-4 rounded-lg col-span-5">
+              <div className="flex items-center justify-between mb-7">
+                <h2 className="font-semibold text-p3 text-neutral-700">User Growth</h2>
+                <div></div>
+              </div>
+              <UserGrowthChart />
+            </div>
+            <div className="bg-white px-6 py-4 rounded-lg col-span-2">
+              <h2 className="font-semibold text-p3 text-neutral-700 mb-7">Session Status</h2>
+              <SessionStatusChart />
+            </div>
+          </div>
+        </div>
+
+        <div className="grid grid-cols-2 gap-x-5">
+          <div className="bg-white px-7 py-4 rounded-lg">
+            <h2 className="font-semibold text-p3 text-neutral-700 mb-5">Top 5 Mentors</h2>
+
+            <div>
+              <table className="w-full">
+                <thead>
+                  <tr className="text-label1 bg-primary-50 text-left rounded-full">
+                    <th className="font-medium py-4 px-5 w-[10%] rounded-l-lg">No.</th>
+                    <th className="font-medium py-4 px-5 w-3/5">Nama Lengkap</th>
+                    <th className="font-medium py-4 px-5 rounded-r-lg">Avg Rating</th>
+                  </tr>
+                </thead>
+
+                <tbody>
+                  <For data={Array.from({ length: 5 })}>
+                    {(_, index) => (
+                      <tr key={index} className="shadow rounded-lg">
+                        <td className="py-4 px-5">{index + 1}</td>
+                        <td className="py-4 px-5">Mursid Al-Catraz</td>
+                        <td className="py-4 px-5">4.9</td>
+                      </tr>
+                    )}
+                  </For>
+                </tbody>
+              </table>
+            </div>
+          </div>
+
+          <div className="bg-white px-6 py-4 rounded-lg">
+            <h2 className="font-semibold text-p3 text-neutral-700 mb-5">Top Booked Mentoring Topics</h2>
+
+            <div>
+              <table className="w-full">
+                <thead>
+                  <tr className="text-label1 bg-primary-50 text-left font-medium">
+                    <th className="font-medium py-4 px-5 w-[10%] rounded-l-lg">No.</th>
+                    <th className="font-medium py-4 px-5 w-3/5">Nama Lengkap</th>
+                    <th className="font-medium py-4 px-5 rounded-r-lg">Total Sesi</th>
+                  </tr>
+                </thead>
+
+                <tbody>
+                  <For data={Array.from({ length: 5 })}>
+                    {(_, index) => (
+                      <tr key={index} className="shadow rounded-lg">
+                        <td className="py-4 px-5">{index + 1}</td>
+                        <td className="py-4 px-5">Mursid Al-Catraz</td>
+                        <td className="py-4 px-5">1000</td>
+                      </tr>
+                    )}
+                  </For>
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </div>
+      </div>
+    </BackofficeWrapper>
+  )
+}

apps/backoffice/src/app/(protected)/dashboard/_components/modal-add-item.tsx

@@ -0,0 +1,161 @@
+import { Button } from '@imphnen-frontend-service/ui/atoms';
+import { Modal } from '@imphnen-frontend-service/ui/molecules';
+import { useConfirmItem, useItem } from '../_hook/use-item';
+import { ControlledInputField } from '@imphnen-frontend-service/ui/organisms';
+
+interface IModalAddItem {
+  isOpen: boolean;
+  onClose: () => void;
+  handleAddItem?: () => Promise<boolean>;
+  currentStep?: number;
+  nextStep: () => void;
+  prevStep: () => void;
+  resetStep: () => void;
+}
+
+const ModalAddItem = ({
+  isOpen,
+  onClose,
+  currentStep,
+  nextStep,
+  resetStep,
+  handleAddItem,
+}: IModalAddItem) => {
+  return (
+    <Modal
+      className="min-w-[400px] bg-primary-50 rounded-lg p-[40px] flex flex-col gap-8 text-center"
+      isOpen={isOpen}
+      onClose={() => {
+        onClose();
+        resetStep();
+      }}
+      disableEscapeKeyDown={true}
+    >
+      {currentStep === 1 && <StepOne nextStep={nextStep} onClose={onClose} />}
+      {currentStep === 2 && (
+        <StepTwo
+          onClose={onClose}
+          handleAddItem={handleAddItem}
+          resetStep={resetStep}
+        />
+      )}
+    </Modal>
+  );
+};
+
+interface IStepOneProps {
+  nextStep: () => void;
+  onClose: () => void;
+}
+
+const StepOne = ({ nextStep }: IStepOneProps) => {
+  const { form, onSubmit } = useItem(nextStep);
+
+  return (
+    <>
+      <Modal.Header>
+        <h2 className="text-p1 font-semibold text-primary-500 mb-3">
+          Tambah Item Gacha
+        </h2>
+        <p className="text-p3 text-neutral-400">
+          Lengkapi detail di bawah ini untuk menambahkan item gacha
+        </p>
+      </Modal.Header>
+      <Modal.Content>
+        <form onSubmit={onSubmit} className="flex flex-col gap-8">
+          <div className="flex flex-col gap-4">
+            <ControlledInputField
+              control={form.control}
+              label="Nama Hadiah"
+              name="itemName"
+              type="text"
+              placeholder="Masukkan Nama Hadiah"
+              size="lg"
+              className="w-full"
+            />
+            <ControlledInputField
+              control={form.control}
+              label="Quantity"
+              name="quantity"
+              type="number"
+              min={1}
+              placeholder="Masukkan Kuantitas Item"
+              size="lg"
+              className="w-full"
+            />
+            <ControlledInputField
+              control={form.control}
+              label="Foto Barang"
+              type="file"
+              name="foto"
+              placeholder=".jpg, .jpeg, atau .png"
+              size="lg"
+              className="w-full"
+            />
+          </div>
+
+          <Button
+            variant="primary"
+            size="lg"
+            className="w-full"
+            onClick={nextStep}
+          >
+            Tambahkan Item
+          </Button>
+        </form>
+      </Modal.Content>
+    </>
+  );
+};
+
+interface IStepTwoProps {
+  onClose: () => void;
+  handleAddItem?: () => Promise<boolean>;
+  resetStep: () => void;
+}
+
+const StepTwo = ({ onClose, handleAddItem, resetStep }: IStepTwoProps) => {
+  const { onConfirm, onCancel } = useConfirmItem(
+    onClose,
+    resetStep,
+    handleAddItem,
+    {
+      success: 'Item ditambahkan ke gacha item',
+      error: 'Item gagal ditambahkan ke gacha item',
+    }
+  );
+
+  return (
+    <>
+      <Modal.Header className="mb-0 text-center items-center">
+        <h2 className="text-p1 font-semibold text-primary-500 mb-3">
+          Tambah Item
+        </h2>
+        <p className="text-p3 text-neutral-400">
+          Apakah kamu yakin ingin
+          <br /> menambahkan item ini?
+        </p>
+      </Modal.Header>
+      <Modal.Content className="flex gap-4">
+        <Button
+          variant="bordered"
+          size="lg"
+          className="w-full"
+          onClick={onCancel}
+        >
+          Batal
+        </Button>
+        <Button
+          variant="primary"
+          size="lg"
+          className="w-full"
+          onClick={onConfirm}
+        >
+          Tambahkan
+        </Button>
+      </Modal.Content>
+    </>
+  );
+};
+
+export default ModalAddItem;

apps/backoffice/src/app/(protected)/dashboard/_components/modal-delete-item.tsx

@@ -0,0 +1,62 @@
+import { Button } from '@imphnen-frontend-service/ui/atoms';
+import { Modal } from '@imphnen-frontend-service/ui/molecules';
+
+interface IModalDeleteItem {
+  isOpen: boolean;
+  onClose: () => void;
+  handleDeleteItem?: () => void;
+}
+
+const ModalDeleteItem = ({
+  isOpen,
+  onClose,
+  handleDeleteItem,
+}: IModalDeleteItem) => {
+  return (
+    <Modal
+      className="min-w-[400px] bg-primary-50 rounded-lg p-[40px] flex flex-col gap-8 text-center"
+      isOpen={isOpen}
+      onClose={onClose}
+      closeButtonClassName="hidden"
+    >
+      <Modal.Header className="gap-8">
+        <img
+          src="/chibi-delete.webp"
+          alt="Delete item?"
+          width={148}
+          className="self-center"
+        />
+        <div className="text-center">
+          <h2 className="text-p1 font-semibold text-danger-500 mb-3">
+            Delete Item
+          </h2>
+          <p className="text-p3 text-neutral-400">
+            Apakah kamu yakin untuk menghapus item ini?
+          </p>
+        </div>
+      </Modal.Header>
+      <Modal.Content className="flex gap-4">
+        <Button
+          variant="secondary"
+          size="lg"
+          className="w-full"
+          onClick={onClose}
+        >
+          Batal Hapus
+        </Button>
+        <Button
+          variant="danger"
+          size="lg"
+          className="w-full"
+          onClick={() => {
+            handleDeleteItem && handleDeleteItem();
+          }}
+        >
+          Hapus Item
+        </Button>
+      </Modal.Content>
+    </Modal>
+  );
+};
+
+export default ModalDeleteItem;

apps/backoffice/src/app/(protected)/dashboard/_components/modal-edit-item.tsx

@@ -0,0 +1,164 @@
+import { Button } from '@imphnen-frontend-service/ui/atoms';
+import { InputField, Modal } from '@imphnen-frontend-service/ui/molecules';
+import { useConfirmItem, useItem } from '../_hook/use-item';
+import { ControlledInputField } from '@imphnen-frontend-service/ui/organisms';
+
+interface IModalEditItem {
+  isOpen: boolean;
+  onClose: () => void;
+  handleEditItem?: () => Promise<boolean>;
+  currentStep?: number;
+  nextStep: () => void;
+  prevStep: () => void;
+  resetStep: () => void;
+}
+
+const ModalEditItem = ({
+  isOpen,
+  onClose,
+  currentStep,
+  nextStep,
+  resetStep,
+  handleEditItem,
+}: IModalEditItem) => {
+  return (
+    <Modal
+      className="min-w-[400px] bg-primary-50 rounded-lg p-[40px] flex flex-col gap-8 text-center"
+      isOpen={isOpen}
+      onClose={() => {
+        onClose();
+        resetStep();
+      }}
+      disableEscapeKeyDown={true}
+    >
+      {currentStep === 1 && <StepOne nextStep={nextStep} onClose={onClose} />}
+      {currentStep === 2 && (
+        <StepTwo
+          onClose={onClose}
+          handleEditItem={handleEditItem}
+          resetStep={resetStep}
+        />
+      )}
+    </Modal>
+  );
+};
+
+interface IStepOneProps {
+  nextStep: () => void;
+  onClose: () => void;
+}
+
+const StepOne = ({ nextStep }: IStepOneProps) => {
+  const initialValues = {
+    itemName: 'Hoodie IMPHNEN Official 2025',
+    quantity: 10,
+  };
+
+  const { form, onSubmit } = useItem(nextStep, initialValues);
+
+  return (
+    <>
+      <Modal.Header>
+        <h2 className="text-p1 font-semibold text-primary-500 mb-3">
+          Edit Item Gacha
+        </h2>
+        <p className="text-p3 text-neutral-400">
+          Silakan mengubah detail dari item yang diperlukan
+        </p>
+      </Modal.Header>
+      <Modal.Content className="flex flex-col gap-8">
+        <form onSubmit={onSubmit} className="flex flex-col gap-8">
+          <div className="flex flex-col gap-4">
+            <ControlledInputField
+              control={form.control}
+              label="Nama Hadiah"
+              type="text"
+              name="itemName"
+              placeholder="Masukkan Nama Hadiah"
+              size="lg"
+              className="w-full"
+            />
+            <ControlledInputField
+              control={form.control}
+              label="Quantity"
+              type="number"
+              name="quantity"
+              placeholder="Masukkan Kuantitas Item"
+              size="lg"
+              className="w-full"
+            />
+            <ControlledInputField
+              control={form.control}
+              label="Foto Barang"
+              type="file"
+              name="foto"
+              placeholder=".jpg, .jpeg, atau .png"
+              size="lg"
+              className="w-full"
+            />
+          </div>
+
+          <Button
+            variant="primary"
+            size="lg"
+            className="w-full"
+            onClick={nextStep}
+          >
+            Perbarui Item
+          </Button>
+        </form>
+      </Modal.Content>
+    </>
+  );
+};
+
+interface IStepTwoProps {
+  onClose: () => void;
+  handleEditItem?: () => Promise<boolean>;
+  resetStep: () => void;
+}
+
+const StepTwo = ({ onClose, handleEditItem, resetStep }: IStepTwoProps) => {
+  const { onConfirm, onCancel } = useConfirmItem(
+    onClose,
+    resetStep,
+    handleEditItem,
+    {
+      success: 'Perubahan item berhasil dilakukan',
+      error: 'Perubahan item gagal dilakukan',
+    }
+  );
+  return (
+    <>
+      <Modal.Header className="mb-0 text-center items-center">
+        <h2 className="text-p1 font-semibold text-primary-500 mb-3">
+          Update Item
+        </h2>
+        <p className="text-p3 text-neutral-400">
+          Apakah kamu yakin dengan
+          <br /> perubahan yang dilakukan?
+        </p>
+      </Modal.Header>
+      <Modal.Content className="flex gap-4">
+        <Button
+          variant="bordered"
+          size="lg"
+          className="w-full"
+          onClick={onCancel}
+        >
+          Batal
+        </Button>
+        <Button
+          variant="primary"
+          size="lg"
+          className="w-full"
+          onClick={onConfirm}
+        >
+          Update
+        </Button>
+      </Modal.Content>
+    </>
+  );
+};
+
+export default ModalEditItem;

apps/backoffice/src/app/(protected)/dashboard/_hook/use-item.ts

@@ -0,0 +1,61 @@
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import {
+  gachaItemSchema,
+  TGachaItem
+} from '@imphnen-frontend-service/service';
+import { toast } from 'sonner';
+
+export const useItem = (
+  nextStep: () => void,
+  initialValues?: TGachaItem
+) => {
+  const form = useForm<TGachaItem>({
+    resolver: zodResolver(gachaItemSchema),
+    mode: 'all',
+    defaultValues: initialValues,
+  });
+
+  const onSubmit = form.handleSubmit((data) => {
+    console.log('Form data:', data);
+    nextStep();
+  });
+
+  return {
+    form,
+    onSubmit,
+  };
+};
+
+export const useConfirmItem = (
+  onClose: () => void,
+  resetStep: () => void,
+  actionFunction?: () => Promise<boolean>,
+  messages?: {
+    success?: string;
+    error?: string;
+  }
+) => {
+  const onConfirm = async () => {
+    try {
+      // const result = await actionFunction?.();
+      // result ? toast.success(messages?.success) : toast.error(messages?.error);
+      toast.success(messages?.success);
+      onClose();
+      resetStep();
+    } catch (error) {
+      console.log(error);
+      toast.error(messages?.error);
+    }
+  };
+
+  const onCancel = () => {
+    onClose();
+    resetStep();
+  };
+
+  return {
+    onConfirm,
+    onCancel,
+  };
+};

apps/backoffice/src/app/(protected)/dashboard/page.tsx

@@ -0,0 +1,188 @@
+import {
+  PlusOutlined,
+  ReloadOutlined,
+  UsergroupAddOutlined,
+  UsergroupDeleteOutlined,
+  UserSwitchOutlined,
+} from '@ant-design/icons';
+import { Button } from '@imphnen-frontend-service/ui/atoms';
+import { FC, Fragment, ReactElement, useState } from 'react';
+import ModalAddItem from './_components/modal-add-item';
+import ModalEditItem from './_components/modal-edit-item';
+import ModalDeleteItem from './_components/modal-delete-item';
+import { useQueryState } from '@imphnen-frontend-service/utils';
+
+export const Components: FC = (): ReactElement => {
+  const [showModalAddItem, setShowModalAddItem] = useState(false);
+  const [showModalEditItem, setShowModalEditItem] = useState(false);
+  const [showModalDeleteItem, setShowModalDeleteItem] = useState(false);
+
+  const {
+    step: currentStep,
+    nextStep,
+    prevStep,
+    resetStep,
+  } = useQueryState('step', {
+    defaultValue: 1,
+    maxValue: 2,
+    minValue: 1,
+  });
+
+  return (
+    <Fragment>
+      <main className="w-full px-[48px] py-[40px] flex flex-col gap-8">
+        <header className="bg-white py-4 px-8 rounded-lg shadow p-4">
+          <h1 className="text-p2 font-semibold">Dashboard</h1>
+        </header>
+
+        <div className="flex justify-between gap-[40px] p-8 bg-white rounded-md">
+          <div className="w-full flex flex-col gap-[40px]">
+            <section>
+              <h2 className="text-p2 font-medium text-primary-500 mb-8">
+                Summary
+              </h2>
+              <div className="grid grid-cols-2 gap-4">
+                <div className="bg-white rounded-lg shadow-sm py-4 px-6 flex items-center border border-neutral-100">
+                  <div className="mr-4 text-primary-500 bg-primary-100 p-[8px] rounded-md">
+                    <UsergroupAddOutlined className="text-[20px]" />
+                  </div>
+                  <div className="flex flex-col gap-1">
+                    <h3 className="text-p1 font-semibold">1000</h3>
+                    <p className="text-label1 text-neutral-500">Participants</p>
+                  </div>
+                </div>
+
+                <div className="bg-white rounded-lg shadow-sm py-4 px-6 flex items-center border border-neutral-100">
+                  <div className="mr-4 text-primary-500 bg-primary-100 p-[8px] rounded-md">
+                    <ReloadOutlined className="text-[20px]" />
+                  </div>
+                  <div className="flex flex-col gap-1">
+                    <h3 className="text-p1 font-semibold">1000</h3>
+                    <p className="text-label1 text-neutral-500">
+                      Roll and Reroll
+                    </p>
+                  </div>
+                </div>
+
+                <div className="bg-white rounded-lg shadow-sm py-4 px-6 flex items-center border border-neutral-100">
+                  <div className="mr-4 text-primary-500 bg-primary-100 p-[8px] rounded-md">
+                    <UserSwitchOutlined className="text-[20px]" />
+                  </div>
+                  <div className="flex flex-col gap-1">
+                    <h3 className="text-p1 font-semibold">1000</h3>
+                    <p className="text-label1 text-neutral-500">Redeem</p>
+                  </div>
+                </div>
+
+                <div className="bg-white rounded-lg shadow-sm py-4 px-6 flex items-center border border-neutral-100">
+                  <div className="mr-4 text-primary-500 bg-primary-100 p-[8px] rounded-md">
+                    <UsergroupDeleteOutlined className="text-[20px]" />
+                  </div>
+                  <div className="flex flex-col gap-1">
+                    <h3 className="text-p1 font-semibold">1000</h3>
+                    <p className="text-label1 text-neutral-500">
+                      Inactive Users
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </section>
+
+            <section className="flex flex-col gap-8">
+              <div className="flex justify-between items-center">
+                <h2 className="text-p2 font-medium text-primary-500">
+                  Gacha Items
+                </h2>
+                <Button
+                  variant="primary"
+                  size="sm"
+                  className="items-end gap-3"
+                  onClick={() => setShowModalAddItem(true)}
+                >
+                  <span>Tambah Item</span>
+                  <PlusOutlined className="text-[16px]" />
+                </Button>
+              </div>
+
+              <div className="flex flex-col gap-4 max-h-140 overflow-auto">
+                {[1, 2, 3, 4, 5, 6].map((item) => (
+                  <div
+                    key={item}
+                    className="bg-white overflow-clip rounded-lg shadow-sm flex justify-between border border-neutral-100"
+                  >
+                    <div className="flex flex-col py-4 px-6 gap-[8px]">
+                      <div>
+                        <h3 className="text-p3 text-primary-500 font-medium">
+                          Lanyard IMPHNEN
+                        </h3>
+                        <div className="flex items-center justify-start gap-10 text-label2 text-gray-500 mt-1">
+                          <span>Prize {item}</span>
+                          <span>Quantity: 10</span>
+                        </div>
+                      </div>
+                      <div className="flex justify-start gap-2">
+                        <Button
+                          variant="text"
+                          size="sm"
+                          className="text-[10px] text-neutral-500 p-0 font-normal hover:bg-transparent hover:text-primary-500"
+                          onClick={() => setShowModalEditItem(true)}
+                        >
+                          Edit
+                        </Button>
+                        <Button
+                          variant="text"
+                          size="sm"
+                          className="text-[10px] text-red-500 p-0 font-normal hover:bg-transparent hover:text-red-700"
+                          onClick={() => setShowModalDeleteItem(true)}
+                        >
+                          Delete
+                        </Button>
+                      </div>
+                    </div>
+
+                    <img src="gacha-clip.webp" alt="Lanyard IMPHNEN" />
+                  </div>
+                ))}
+              </div>
+            </section>
+          </div>
+
+          {/* Right-side illustration */}
+          <img
+            src="gacha.webp"
+            alt=""
+            className="rounded-lg hidden xl:block xl:min-w-[436px] h-auto object-cover"
+          />
+        </div>
+      </main>
+
+      {/* Modal Add Item */}
+      <ModalAddItem
+        currentStep={currentStep}
+        isOpen={showModalAddItem}
+        onClose={() => setShowModalAddItem(false)}
+        nextStep={nextStep}
+        prevStep={prevStep}
+        resetStep={resetStep}
+      />
+
+      {/* Modal Edit Item */}
+      <ModalEditItem
+        currentStep={currentStep}
+        isOpen={showModalEditItem}
+        onClose={() => setShowModalEditItem(false)}
+        nextStep={nextStep}
+        prevStep={prevStep}
+        resetStep={resetStep}
+      />
+
+      {/* Modal Delete Item */}
+      <ModalDeleteItem
+        isOpen={showModalDeleteItem}
+        onClose={() => setShowModalDeleteItem(false)}
+      />
+    </Fragment>
+  );
+};
+
+export default Components;

apps/backoffice/src/app/(protected)/feedback-review-dimentorin/page.tsx

@@ -0,0 +1,181 @@
+import { SearchOutlined } from "@ant-design/icons";
+import { Button, Input, Select } from "@imphnen-frontend-service/ui/atoms";
+import { BackofficeWrapper, DataTable } from "@imphnen-frontend-service/ui/organisms";
+import { cn, For } from "@imphnen-frontend-service/utils";
+import { ColumnDef, getCoreRowModel, getPaginationRowModel, PaginationState, RowSelectionState, useReactTable } from "@tanstack/react-table";
+import { ReactElement, useState } from "react"
+
+const TABS = {
+  MENTORING: 'Mentoring',
+  PLATFORM: 'Platform'
+} as const
+type Tabs = typeof TABS[keyof typeof TABS]
+
+type FeedbackStatus = 'done' | 'todo';
+
+interface FeedbackType {
+  id: number
+  name: string
+  email: string
+  rating: number
+  status: FeedbackStatus
+}
+
+const mockData: FeedbackType[] = Array.from({ length: 90 }, (_, i) => ({
+  id: i + 1,
+  name: i % 3 === 0 ? 'Ahmad Wijuana' : 'Sofia Wijuana',
+  email: 'fullname23@gmail.com',
+  rating: 4.5,
+  status: i % 2 === 0 ? 'done' : 'todo',
+}))
+
+export default function Components(): ReactElement {
+  const [activeTab, setActiveTab] = useState<Tabs>(TABS.MENTORING)
+
+  const [rowSelection, setRowSelection] = useState<RowSelectionState>({})
+  const [pagination, setPagination] = useState<PaginationState>({
+    pageIndex: 0,
+    pageSize: 9,
+  });
+
+  const columns: ColumnDef<FeedbackType>[] = [
+    {
+      id: 'select',
+      meta: { cellClassName: cn("w-20") },
+      header: ({ table }) => (
+        <input
+          type="checkbox"
+          className="rounded"
+          checked={table.getIsAllRowsSelected()}
+          onChange={table.getToggleAllRowsSelectedHandler()}
+        />
+      ),
+      cell: ({ row }) => (
+        <input
+          type="checkbox"
+          className="rounded"
+          checked={row.getIsSelected()}
+          onChange={row.getToggleSelectedHandler()}
+        />
+      ),
+    },
+    {
+      id: 'name',
+      header: 'Name',
+      accessorKey: 'name',
+    },
+    {
+      id: 'email',
+      header: 'Email',
+      accessorKey: 'email',
+    },
+    {
+      id: 'rating',
+      header: 'Rating',
+      accessorKey: 'rating',
+    },
+    {
+      id: 'status',
+      header: 'Status',
+      accessorKey: 'status',
+      cell: ({ row }) => {
+        const status = row.original.status;
+        const statusColors: Record<FeedbackStatus, string> = {
+          done: 'bg-success-200 text-success-500',
+          todo: 'bg-primary-200 text-primary-500',
+        };
+        const statusText: Record<FeedbackStatus, string> = {
+          done: 'Done',
+          todo: 'To Do',
+        };
+        return (
+          <div
+            className={`py-2 px-4 rounded-md text-center ${statusColors[status]}`}
+          >
+            {statusText[status]}
+          </div>
+        );
+      },
+    },
+    {
+      header: 'Action',
+      meta: { cellClassName: cn("w-72") },
+      cell: ({ row }) => (
+        <Button
+          variant="primary"
+          size="sm"
+          onClick={(e) => {
+            e.stopPropagation()
+          }}
+          className="flex items-center gap-2 w-max"
+        >
+          <SearchOutlined className="text-[16px]" /> Lihat Feedback
+        </Button>
+      ),
+    },
+  ]
+
+  const table = useReactTable({
+    data: mockData,
+    columns,
+    state: {
+      pagination,
+      rowSelection,
+    },
+    enableRowSelection: true,
+    onRowSelectionChange: setRowSelection,
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    onPaginationChange: setPagination,
+    pageCount: Math.ceil(mockData.length / pagination.pageSize),
+    manualPagination: false,
+  });
+
+  return (
+    <BackofficeWrapper title="Dimentorin.dev">
+      <div className="mb-8 flex justify-between items-center">
+        <h1 className="text-p1 font-semibold text-neutral-700">Feedback</h1>
+        <div className="flex gap-2 bg-primary-100 p-1.5 rounded-md">
+          <For data={Object.values(TABS)}>
+            {(tab) => (
+              <Button
+                key={tab}
+                variant="text"
+                className={cn("px-3 py-2 capitalize", activeTab === tab && "bg-white")}
+                onClick={() => setActiveTab(tab)}
+              >
+                {tab}
+              </Button>
+            )}
+          </For>
+        </div>
+      </div>
+
+      <section className="flex flex-col gap-6 p-8 bg-white rounded-md">
+        <div className="flex justify-between items-center gap-5 mb-2">
+          <div className="relative w-full">
+            <Input
+              placeholder="Cari berdasarkan nama mentor/mentee"
+              className="pl-12 w-full max-h-full"
+            />
+            <div className="absolute left-3 top-1/2 transform -translate-y-1/2 text-[16px]">
+              <SearchOutlined />
+            </div>
+          </div>
+          <Select>
+            <option selected disabled>Rating</option>
+            <option value="4.5">4.5</option>
+            <option value="5">5</option>
+          </Select>
+          <Select>
+            <option selected disabled>Status</option>
+            <option value="active">Active</option>
+            <option value="inactive">Inactive</option>
+          </Select>
+        </div>
+
+        <DataTable data={mockData} columns={columns} table={table} />
+      </section>
+    </BackofficeWrapper>
+  );
+}

apps/backoffice/src/app/(protected)/gacha-roll/_components/modal-add-item.tsx

@@ -0,0 +1,160 @@
+import { Button } from '@imphnen-frontend-service/ui/atoms';
+import { Modal } from '@imphnen-frontend-service/ui/molecules';
+import { ControlledInputField } from '@imphnen-frontend-service/ui/organisms';
+import { useItem, useConfirmItem } from '../_hook/use-item';
+
+interface IModalAddItem {
+  isOpen: boolean;
+  onClose: () => void;
+  handleAddItem?: () => Promise<boolean>;
+  currentStep?: number;
+  nextStep: () => void;
+  prevStep: () => void;
+  resetStep: () => void;
+}
+
+const ModalAddItem = ({
+  isOpen,
+  onClose,
+  currentStep,
+  nextStep,
+  resetStep,
+  handleAddItem,
+}: IModalAddItem) => {
+  return (
+    <Modal
+      className="min-w-[400px] bg-primary-50 rounded-lg p-[40px] flex flex-col gap-8 text-center"
+      isOpen={isOpen}
+      onClose={() => {
+        onClose();
+        resetStep();
+      }}
+      disableEscapeKeyDown={true}
+    >
+      {currentStep === 1 && <StepOne nextStep={nextStep} onClose={onClose} />}
+      {currentStep === 2 && (
+        <StepTwo
+          onClose={onClose}
+          handleAddItem={handleAddItem}
+          resetStep={resetStep}
+        />
+      )}
+    </Modal>
+  );
+};
+
+interface IStepOneProps {
+  nextStep: () => void;
+  onClose: () => void;
+}
+
+const StepOne = ({ nextStep }: IStepOneProps) => {
+  const { form, onSubmit } = useItem(nextStep);
+
+  return (
+    <>
+      <Modal.Header>
+        <h2 className="text-p1 font-semibold text-primary-500 mb-3">
+          Tambah Item Roll Gacha
+        </h2>
+        <p className="text-p3 text-neutral-400">
+          Lengkapi detal di bawah ini, untuk menambahkan item gacha
+        </p>
+      </Modal.Header>
+      <Modal.Content>
+        <form onSubmit={onSubmit} className="flex flex-col gap-8">
+          <div className="flex flex-col gap-4">
+            <ControlledInputField
+              control={form.control}
+              label="Pilih Item"
+              name="itemName"
+              type="text"
+              placeholder="Pilih item yang dimasukkan ke roll"
+              size="lg"
+              className="w-full"
+            />
+            <ControlledInputField
+              control={form.control}
+              label="Quantity"
+              name="quantity"
+              type="number"
+              min={1}
+              placeholder="Masukkan Kuantitas Item"
+              size="lg"
+              className="w-full"
+            />
+            <ControlledInputField
+              control={form.control}
+              label="Chance Rate"
+              name="chanceRate"
+              type="number"
+              value={0.1}
+              min={0.1}
+              step={0.1}
+              max={1}
+              placeholder="Masukkan Chance Rate (0,1 - 1)"
+              size="lg"
+              className="w-full"
+            />
+          </div>
+
+          <Button variant="primary" size="lg" className="w-full" type="submit">
+            Tambahkan Item
+          </Button>
+        </form>
+      </Modal.Content>
+    </>
+  );
+};
+
+interface IStepTwoProps {
+  onClose: () => void;
+  handleAddItem?: () => Promise<boolean>;
+  resetStep: () => void;
+}
+
+const StepTwo = ({ onClose, handleAddItem, resetStep }: IStepTwoProps) => {
+  const { onConfirm, onCancel } = useConfirmItem(
+    onClose,
+    resetStep,
+    handleAddItem,
+    {
+      success: 'Item ditambahkan ke roll gacha',
+      error: 'Item gagal ditambahkan ke roll gacha',
+    }
+  );
+
+  return (
+    <>
+      <Modal.Header className="mb-0 text-center items-center">
+        <h2 className="text-p1 font-semibold text-primary-500 mb-3">
+          Tambah ke Roll Gacha
+        </h2>
+        <p className="text-p3 text-neutral-400">
+          Apakah kamu yakin ingin
+          <br /> menambahkan item ini ke roll gacha?
+        </p>
+      </Modal.Header>
+      <Modal.Content className="flex gap-4">
+        <Button
+          variant="bordered"
+          size="lg"
+          className="w-full"
+          onClick={onCancel}
+        >
+          Batal
+        </Button>
+        <Button
+          variant="primary"
+          size="lg"
+          className="w-full"
+          onClick={onConfirm}
+        >
+          Tambahkan
+        </Button>
+      </Modal.Content>
+    </>
+  );
+};
+
+export default ModalAddItem;

apps/backoffice/src/app/(protected)/gacha-roll/_components/modal-delete-item.tsx

@@ -0,0 +1,62 @@
+import { Button } from '@imphnen-frontend-service/ui/atoms';
+import { Modal } from '@imphnen-frontend-service/ui/molecules';
+
+interface IModalDeleteItem {
+  isOpen: boolean;
+  onClose: () => void;
+  handleDeleteItem?: () => void;
+}
+
+const ModalDeleteItem = ({
+  isOpen,
+  onClose,
+  handleDeleteItem,
+}: IModalDeleteItem) => {
+  return (
+    <Modal
+      className="min-w-[400px] bg-primary-50 rounded-lg p-[40px] flex flex-col gap-8 text-center"
+      isOpen={isOpen}
+      onClose={onClose}
+      closeButtonClassName="hidden"
+    >
+      <Modal.Header className="gap-8">
+        <img
+          src="/chibi-delete.webp"
+          alt="Delete item?"
+          width={148}
+          className="self-center"
+        />
+        <div className="text-center">
+          <h2 className="text-p1 font-semibold text-danger-500 mb-3">
+            Delete Item
+          </h2>
+          <p className="text-p3 text-neutral-400">
+            Apakah kamu yakin untuk menghapus item ini?
+          </p>
+        </div>
+      </Modal.Header>
+      <Modal.Content className="flex gap-4">
+        <Button
+          variant="secondary"
+          size="lg"
+          className="w-full"
+          onClick={onClose}
+        >
+          Batal Hapus
+        </Button>
+        <Button
+          variant="danger"
+          size="lg"
+          className="w-full"
+          onClick={() => {
+            handleDeleteItem && handleDeleteItem();
+          }}
+        >
+          Hapus Item
+        </Button>
+      </Modal.Content>
+    </Modal>
+  );
+};
+
+export default ModalDeleteItem;

apps/backoffice/src/app/(protected)/gacha-roll/_components/modal-update-item.tsx

@@ -0,0 +1,168 @@
+import { Button } from '@imphnen-frontend-service/ui/atoms';
+import { Modal } from '@imphnen-frontend-service/ui/molecules';
+import { useConfirmItem, useItem } from '../_hook/use-item';
+import { ControlledInputField } from '@imphnen-frontend-service/ui/organisms';
+
+interface IModalUpdateItem {
+  isOpen: boolean;
+  onClose: () => void;
+  handleUpdateItem?: () => Promise<boolean>;
+  currentStep?: number;
+  nextStep: () => void;
+  prevStep: () => void;
+  resetStep: () => void;
+}
+
+const ModalUpdateItem = ({
+  isOpen,
+  onClose,
+  currentStep,
+  nextStep,
+  resetStep,
+  handleUpdateItem,
+}: IModalUpdateItem) => {
+  return (
+    <Modal
+      className="min-w-[400px] bg-primary-50 rounded-lg p-[40px] flex flex-col gap-8 text-center"
+      isOpen={isOpen}
+      onClose={() => {
+        onClose();
+        resetStep();
+      }}
+      disableEscapeKeyDown={true}
+    >
+      {currentStep === 1 && <StepOne nextStep={nextStep} onClose={onClose} />}
+      {currentStep === 2 && (
+        <StepTwo
+          onClose={onClose}
+          handleUpdateItem={handleUpdateItem}
+          resetStep={resetStep}
+        />
+      )}
+    </Modal>
+  );
+};
+
+interface IStepOneProps {
+  nextStep: () => void;
+  onClose: () => void;
+}
+
+const StepOne = ({ nextStep }: IStepOneProps) => {
+  const initialValues = {
+    itemName: 'Hoodie IMPHNEN Official 2025',
+    quantity: 10,
+    chanceRate: 0.1,
+  };
+
+  const { form, onSubmit } = useItem(nextStep, initialValues);
+
+  return (
+    <>
+      <Modal.Header>
+        <h2 className="text-p1 font-semibold text-primary-500 mb-3">
+          Update Item Roll Gacha
+        </h2>
+      </Modal.Header>
+      <Modal.Content>
+        <form onSubmit={onSubmit} className="flex flex-col gap-8">
+          <div className="flex flex-col gap-4">
+            <ControlledInputField
+              control={form.control}
+              label="Pilih Item"
+              name="itemName"
+              type="text"
+              placeholder="Pilih item yang dimasukkan ke roll"
+              size="lg"
+              className="w-full"
+            />
+            <ControlledInputField
+              control={form.control}
+              label="Quantity"
+              name="quantity"
+              type="number"
+              min={1}
+              placeholder="Masukkan Kuantitas Item"
+              size="lg"
+              className="w-full"
+            />
+            <ControlledInputField
+              control={form.control}
+              label="Chance Rate"
+              name="chanceRate"
+              type="number"
+              value={0.1}
+              min={0.1}
+              step={0.1}
+              max={1}
+              placeholder="Masukkan Chance Rate (0,1 - 1)"
+              size="lg"
+              className="w-full"
+            />
+          </div>
+
+          <Button
+            variant="primary"
+            size="lg"
+            className="w-full"
+            onClick={nextStep}
+          >
+            Perbarui Item
+          </Button>
+        </form>
+      </Modal.Content>
+    </>
+  );
+};
+
+interface IStepTwoProps {
+  onClose: () => void;
+  handleUpdateItem?: () => Promise<boolean>;
+  resetStep: () => void;
+}
+
+const StepTwo = ({ onClose, handleUpdateItem, resetStep }: IStepTwoProps) => {
+  const { onConfirm, onCancel } = useConfirmItem(
+    onClose,
+    resetStep,
+    handleUpdateItem,
+    {
+      success: 'Perubahan item roll berhasil dilakukan',
+      error: 'Perubahan item roll gagal dilakukan',
+    }
+  );
+
+  return (
+    <>
+      <Modal.Header className="mb-0 text-center items-center">
+        <h2 className="text-p1 font-semibold text-primary-500 mb-3">
+          Update Item
+        </h2>
+        <p className="text-p3 text-neutral-400">
+          Apakah kamu yakin dengan
+          <br /> perubahan yang dilakukan?
+        </p>
+      </Modal.Header>
+      <Modal.Content className="flex gap-4">
+        <Button
+          variant="bordered"
+          size="lg"
+          className="w-full"
+          onClick={onCancel}
+        >
+          Batal
+        </Button>
+        <Button
+          variant="primary"
+          size="lg"
+          className="w-full"
+          onClick={onConfirm}
+        >
+          Update
+        </Button>
+      </Modal.Content>
+    </>
+  );
+};
+
+export default ModalUpdateItem;

apps/backoffice/src/app/(protected)/gacha-roll/_hook/use-item.ts

@@ -0,0 +1,61 @@
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import {
+  gachaRollItemSchema,
+  TGachaRollItem
+} from '@imphnen-frontend-service/service';
+import { toast } from 'sonner';
+
+export const useItem = (
+  nextStep: () => void,
+  initialValues?: TGachaRollItem
+) => {
+  const form = useForm<TGachaRollItem>({
+    resolver: zodResolver(gachaRollItemSchema),
+    mode: 'all',
+    defaultValues: initialValues,
+  });
+
+  const onSubmit = form.handleSubmit((data) => {
+    console.log('Form data:', data);
+    nextStep();
+  });
+
+  return {
+    form,
+    onSubmit,
+  };
+};
+
+export const useConfirmItem = (
+  onClose: () => void,
+  resetStep: () => void,
+  actionFunction?: () => Promise<boolean>,
+  messages?: {
+    success?: string;
+    error?: string;
+  }
+) => {
+  const onConfirm = async () => {
+    try {
+      // const result = await actionFunction?.();
+      // result ? toast.success(messages?.success) : toast.error(messages?.error);
+      toast.success(messages?.success);
+      onClose();
+      resetStep();
+    } catch (error) {
+      console.log(error);
+      toast.error(messages?.error);
+    }
+  };
+
+  const onCancel = () => {
+    onClose();
+    resetStep();
+  };
+
+  return {
+    onConfirm,
+    onCancel,
+  };
+};

apps/backoffice/src/app/(protected)/gacha-roll/page.tsx

@@ -0,0 +1,210 @@
+import * as React from 'react';
+
+import { FC, Fragment, ReactElement, useState } from 'react';
+import {
+  SearchOutlined,
+  EditOutlined,
+  DeleteOutlined,
+  PlusOutlined,
+} from '@ant-design/icons';
+import { Button, Input } from '@imphnen-frontend-service/ui/atoms';
+import { DataTable } from '@imphnen-frontend-service/ui/organisms';
+
+import {
+  ColumnDef,
+  getCoreRowModel,
+  getPaginationRowModel,
+  PaginationState,
+  useReactTable,
+  RowSelectionState,
+} from '@tanstack/react-table';
+import ModalAddItem from './_components/modal-add-item';
+import ModalUpdateItem from './_components/modal-update-item';
+import ModalDeleteItem from './_components/modal-delete-item';
+import { useQueryState } from '@imphnen-frontend-service/utils';
+
+interface GachaItem {
+  id: number;
+  name: string;
+  chanceRate: number;
+  quantity: number;
+}
+
+const mockData: GachaItem[] = Array.from({ length: 90 }, (_, i) => ({
+  id: i + 1,
+  name: 'Hoodie IMPHNEN Official 2025',
+  chanceRate: 0.1,
+  quantity: 10,
+}));
+
+export const Components: FC = (): ReactElement => {
+  const [showModalAddItem, setShowModalAddItem] = useState(false);
+  const [showModalUpdateItem, setShowModalUpdateItem] = useState(false);
+  const [showModalDeleteItem, setShowModalDeleteItem] = useState(false);
+
+  const {
+    step: currentStep,
+    nextStep,
+    prevStep,
+    resetStep,
+  } = useQueryState('step', {
+    defaultValue: 1,
+    maxValue: 2,
+    minValue: 1,
+  });
+
+  const [pagination, setPagination] = React.useState<PaginationState>({
+    pageIndex: 0,
+    pageSize: 9,
+  });
+
+  const [rowSelection, setRowSelection] = React.useState<RowSelectionState>({});
+
+  const columns: ColumnDef<GachaItem>[] = [
+    {
+      id: 'select',
+      header: ({ table }) => (
+        <input
+          type="checkbox"
+          className="rounded"
+          checked={table.getIsAllRowsSelected()}
+          onChange={table.getToggleAllRowsSelectedHandler()}
+        />
+      ),
+      cell: ({ row }) => (
+        <input
+          type="checkbox"
+          className="rounded"
+          checked={row.getIsSelected()}
+          onChange={row.getToggleSelectedHandler()}
+        />
+      ),
+    },
+    {
+      header: 'No',
+      accessorKey: 'id',
+    },
+    {
+      header: 'Nama Item',
+      accessorKey: 'name',
+    },
+    {
+      header: 'Chance Rate',
+      accessorKey: 'chanceRate',
+    },
+    {
+      header: 'Quantity',
+      accessorKey: 'quantity',
+    },
+    {
+      header: 'Action',
+      cell: () => (
+        <div className="flex gap-[8px]">
+          <Button
+            variant="primary"
+            size="sm"
+            onClick={(e) => {
+              e.stopPropagation();
+              setShowModalUpdateItem(true);
+            }}
+            className="flex items-center gap-2"
+          >
+            <EditOutlined /> Update
+          </Button>
+          <Button
+            variant="danger"
+            size="sm"
+            onClick={(e) => {
+              e.stopPropagation();
+              setShowModalDeleteItem(true);
+            }}
+            className="flex items-center gap-2"
+          >
+            <DeleteOutlined /> Delete
+          </Button>
+        </div>
+      ),
+    },
+  ];
+
+  const table = useReactTable({
+    data: mockData,
+    columns,
+    state: {
+      pagination,
+      rowSelection,
+    },
+    enableRowSelection: true,
+    onRowSelectionChange: setRowSelection,
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    onPaginationChange: setPagination,
+    pageCount: Math.ceil(mockData.length / pagination.pageSize),
+    manualPagination: false,
+  });
+
+  return (
+    <Fragment>
+      <main className="w-full px-[48px] py-[40px] flex flex-col gap-8">
+        <header className="bg-white py-4 px-8 rounded-lg shadow p-4">
+          <h1 className="text-p2 font-semibold">Gacha Roll</h1>
+        </header>
+
+        <section className="flex flex-col gap-6 p-8 bg-white rounded-md">
+          <div className="flex justify-between items-center gap-8 mb-2">
+            <div className="relative w-full">
+              <Input
+                placeholder="Cari berdasarkan nama item"
+                className="pl-12 w-full max-h-full"
+              />
+              <div className="absolute left-3 top-1/2 transform -translate-y-1/2 text-[16px]">
+                <SearchOutlined />
+              </div>
+            </div>
+            <div className="relative">
+              <Button
+                variant="primary"
+                size="md"
+                className="flex gap-3 text-nowrap"
+                onClick={() => {
+                  setShowModalAddItem(true);
+                }}
+              >
+                <PlusOutlined />
+                Tambah Item
+              </Button>
+            </div>
+          </div>
+
+          <DataTable data={mockData} columns={columns} table={table} />
+        </section>
+      </main>
+
+      <ModalAddItem
+        currentStep={currentStep}
+        isOpen={showModalAddItem}
+        onClose={() => setShowModalAddItem(false)}
+        nextStep={nextStep}
+        prevStep={prevStep}
+        resetStep={resetStep}
+      />
+      <ModalUpdateItem
+        currentStep={currentStep}
+        isOpen={showModalUpdateItem}
+        onClose={() => setShowModalUpdateItem(false)}
+        nextStep={nextStep}
+        prevStep={prevStep}
+        resetStep={resetStep}
+      />
+      <ModalDeleteItem
+        isOpen={showModalDeleteItem}
+        onClose={() => setShowModalDeleteItem(false)}
+        handleDeleteItem={() => {
+          console.log('Item deleted');
+        }}
+      />
+    </Fragment>
+  );
+};
+
+export default Components;

apps/backoffice/src/app/(protected)/hackathon-dashboard/page.tsx

@@ -0,0 +1,32 @@
+import { BackofficeWrapper } from '@imphnen-frontend-service/ui/organisms';
+import { FC, ReactElement } from 'react';
+
+export const HackathonDashboardPage: FC = (): ReactElement => {
+  return (
+    <BackofficeWrapper title="IMPHNEN x Kolosal.ai Hackathon 2025">
+      <h1 className="mb-8 text-p1 font-semibold text-neutral-700">Dashboard</h1>
+
+      <section className="grid grid-cols-5 gap-5">
+        {/* Participant */}
+        <div className="bg-white px-6 py-4 rounded-md shadow">
+          <h3 className="text-primary-500 text-p2 font-semibold mb-2.5">
+            1261
+          </h3>
+          <p className="text-neutral-400 text-p3">Total Participants</p>
+        </div>
+        {/* Team */}
+        <div className="bg-white px-6 py-4 rounded-md shadow">
+          <h3 className="text-primary-500 text-p2 font-semibold mb-2.5">206</h3>
+          <p className="text-neutral-400 text-p3">Total Teams</p>
+        </div>
+        {/* Project Submitted */}
+        <div className="bg-white px-6 py-4 rounded-md shadow">
+          <h3 className="text-primary-500 text-p2 font-semibold mb-2.5">0</h3>
+          <p className="text-neutral-400 text-p3">Total Project Submitted</p>
+        </div>
+      </section>
+    </BackofficeWrapper>
+  );
+};
+
+export default HackathonDashboardPage;

apps/backoffice/src/app/(protected)/hackathon-submissions/page.tsx

@@ -0,0 +1,128 @@
+import { FC, ReactElement, useState } from 'react';
+import {
+  BackofficeWrapper,
+  DataTable,
+} from '@imphnen-frontend-service/ui/organisms';
+import {
+  ColumnDef,
+  getCoreRowModel,
+  getPaginationRowModel,
+  PaginationState,
+  RowSelectionState,
+  useReactTable,
+} from '@tanstack/react-table';
+import { Button } from '@imphnen-frontend-service/ui/atoms';
+import { cn } from '@imphnen-frontend-service/utils';
+import { EditOutlined } from '@ant-design/icons';
+
+export const HackathonUsersPage: FC = (): ReactElement => {
+  const [rowSelection, setRowSelection] = useState<RowSelectionState>({});
+  const [pagination, setPagination] = useState<PaginationState>({
+    pageIndex: 0,
+    pageSize: 9,
+  });
+
+  const mockData: any[] = Array.from({ length: 90 }, (_, i) => ({
+    id: i + 1,
+    project_name: `Project ${i + 1}`,
+    repository_url: `https://github.com/user/repo${i + 1}`,
+    demo_url: `https://demo.example.com/project${i + 1}`,
+    presentation_url: `https://slides.example.com/project${i + 1}`,
+  }));
+
+  type UserStatus = 'active' | 'inactive';
+
+  interface SubmissionType {
+    id: number;
+    project_name: string;
+    repository_url: string;
+    demo_url: string;
+    presentation_url: string;
+  }
+
+  const columns: ColumnDef<SubmissionType>[] = [
+    {
+      header: 'Project Name',
+      accessorKey: 'project_name',
+    },
+    {
+      header: 'Repository URL',
+      accessorKey: 'repository_url',
+    },
+    {
+      header: 'Demo URL',
+      accessorKey: 'demo_url',
+    },
+    {
+      header: 'Presentation URL',
+      accessorKey: 'presentation_url',
+    },
+    {
+      header: 'Action',
+      meta: { cellClassName: cn('w-72') },
+      cell: ({ row }) => (
+        <Button
+          variant="primary"
+          size="sm"
+          className="flex items-center gap-2 w-max"
+          onClick={() => {
+            // View detail logic
+          }}
+        >
+          <EditOutlined className="text-base" /> View & Manage
+        </Button>
+      ),
+    },
+  ];
+
+  const table = useReactTable({
+    data: mockData,
+    columns,
+    state: {
+      pagination,
+      rowSelection,
+    },
+    enableRowSelection: true,
+    onRowSelectionChange: setRowSelection,
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    onPaginationChange: setPagination,
+    pageCount: Math.ceil(mockData.length / pagination.pageSize),
+    manualPagination: false,
+  });
+
+  return (
+    <BackofficeWrapper title="IMPHNEN x Kolosal.ai Hackathon 2025">
+      <h1 className="mb-8 text-p1 font-semibold text-neutral-700">
+        Project Submission
+      </h1>
+      {/* Filters and actions */}
+      <section className="bg-white rounded-md shadow p-8 flex flex-col gap-6">
+        <div className="flex flex-wrap gap-3 items-center">
+          <input
+            type="text"
+            className="border border-neutral-200 rounded-md px-3 py-2 text-label1 w-full sm:w-64"
+            placeholder="Search name or email"
+          />
+          <select className="border border-neutral-200 rounded-md px-3 py-2 text-label1 w-full sm:w-40">
+            <option value="all">All Status</option>
+            <option value="active">Active</option>
+            <option value="suspended">Suspended</option>
+          </select>
+          <select className="border border-neutral-200 rounded-md px-3 py-2 text-label1 w-full sm:w-40">
+            <option value="all">All City</option>
+            <option value="jakarta">Jakarta</option>
+            <option value="bandung">Bandung</option>
+          </select>
+        </div>
+
+        {/* Table */}
+        <DataTable data={mockData} columns={columns} table={table} />
+      </section>
+
+      {/* Modals extracted into shared backoffice components */}
+    </BackofficeWrapper>
+  );
+};
+
+export default HackathonUsersPage;

apps/backoffice/src/app/(protected)/hackathon-teams/page.tsx

@@ -0,0 +1,210 @@
+import { FC, ReactElement, useState } from 'react';
+import {
+  BackofficeWrapper,
+  DataTable,
+} from '@imphnen-frontend-service/ui/organisms';
+import {
+  ColumnDef,
+  getCoreRowModel,
+  getPaginationRowModel,
+  PaginationState,
+  RowSelectionState,
+  useReactTable,
+} from '@tanstack/react-table';
+import { Button } from '@imphnen-frontend-service/ui/atoms';
+import { cn } from '@imphnen-frontend-service/utils';
+import { useTeams } from '@imphnen-frontend-service/service';
+import { EditOutlined } from '@ant-design/icons';
+
+export const HackathonTeamsPage: FC = (): ReactElement => {
+  const { data: teamsData } = useTeams();
+
+  const [rowSelection, setRowSelection] = useState<RowSelectionState>({});
+  const [pagination, setPagination] = useState<PaginationState>({
+    pageIndex: 0,
+    pageSize: 9,
+  });
+
+  const mockData: TeamType[] = Array.from({ length: 90 }, (_, i) => ({
+    id: `team-${i + 1}`,
+    name: `Team ${i + 1} - ${i % 3 === 0 ? 'Innovators' : 'Hackers'}`,
+    city: i % 2 === 0 ? 'Jakarta' : 'Bandung',
+    visibility: i % 4 === 0 ? 'private' : 'public',
+    member_count: Math.floor(Math.random() * 4) + 1,
+    has_submission: i % 3 !== 0,
+    created_at: new Date().toISOString(),
+    updated_at: new Date().toISOString(),
+    leader: {
+      user: {
+        fullname: `Leader User ${i}`,
+        email: `leader${i}@example.com`,
+      },
+    },
+  }));
+
+  interface TeamType {
+    id: string;
+    name: string;
+    city: string;
+    visibility: 'public' | 'private';
+    member_count: number;
+    has_submission: boolean;
+    created_at: string;
+    updated_at: string;
+    leader?: {
+      user: {
+        fullname: string;
+        email: string;
+      };
+    };
+  }
+
+  const columns: ColumnDef<TeamType>[] = [
+    {
+      accessorKey: 'id',
+      header: 'ID',
+    },
+    {
+      accessorKey: 'name',
+      header: 'Team Name',
+    },
+    {
+      accessorKey: 'city',
+      header: 'City',
+    },
+    {
+      accessorKey: 'visibility',
+      header: 'Visibility',
+      cell: ({ row }) => {
+        const isPublic = row.original.visibility === 'public';
+        return (
+          <span
+            className={cn(
+              'py-2 px-4 text-sm rounded-2xl text-center',
+              isPublic
+                ? 'bg-info-200 text-info-700'
+                : 'bg-gray-200 text-gray-700'
+            )}
+          >
+            {isPublic ? 'Public' : 'Private'}
+          </span>
+        );
+      },
+    },
+    {
+      accessorKey: 'member_count',
+      header: 'Members',
+    },
+    {
+      id: 'leader',
+      header: 'Leader',
+      cell: ({ row }) => {
+        const leader = row.original.leader?.user;
+        return leader ? (
+          <div>
+            <div className="text-sm font-medium text-gray-900">
+              {leader.fullname}
+            </div>
+            <div className="text-xs text-gray-500">{leader.email}</div>
+          </div>
+        ) : (
+          <span className="text-gray-400 italic">-</span>
+        );
+      },
+    },
+    {
+      accessorKey: 'has_submission',
+      header: 'Submitted',
+      cell: ({ row }) => {
+        const hasSubmission = row.original.has_submission;
+        return (
+          <span
+            className={cn(
+              'py-2 px-4 text-sm rounded-2xl text-center',
+              hasSubmission
+                ? 'bg-success-200 text-success-700'
+                : 'bg-danger-200 text-danger-700'
+            )}
+          >
+            {hasSubmission ? 'Yes' : 'No'}
+          </span>
+        );
+      },
+    },
+    {
+      accessorKey: 'updated_at',
+      header: 'Last Updated',
+      cell: ({ row }) => {
+        return new Date(row.original.updated_at).toLocaleDateString();
+      },
+    },
+    {
+      id: 'actions',
+      header: 'Action',
+      meta: { cellClassName: cn('w-48') },
+      cell: ({ row }) => (
+        <div className="flex items-center gap-2">
+          <Button
+            variant="primary"
+            size="sm"
+            className="flex items-center gap-2 w-max"
+            onClick={() => {
+              // View detail logic
+            }}
+          >
+            <EditOutlined className="text-base" /> View & Manage
+          </Button>
+        </div>
+      ),
+    },
+  ];
+
+  const table = useReactTable({
+    data: mockData,
+    columns,
+    state: {
+      pagination,
+      rowSelection,
+    },
+    enableRowSelection: true,
+    onRowSelectionChange: setRowSelection,
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    onPaginationChange: setPagination,
+    pageCount: Math.ceil(mockData.length / pagination.pageSize),
+    manualPagination: false,
+  });
+
+  return (
+    <BackofficeWrapper title="IMPHNEN x Kolosal.ai Hackathon 2025">
+      <h1 className="mb-8 text-p1 font-semibold text-neutral-700">
+        Team Management
+      </h1>
+      {/* Filters and actions */}
+      <section className="bg-white rounded-md shadow p-8 flex flex-col gap-6">
+        <div className="flex flex-wrap gap-3 items-center">
+          <input
+            type="text"
+            className="border border-neutral-200 rounded-md px-3 py-2 text-label1 w-full sm:w-64"
+            placeholder="Search name or email"
+          />
+          <select className="border border-neutral-200 rounded-md px-3 py-2 text-label1 w-full sm:w-40">
+            <option value="all">All Status</option>
+            <option value="active">Active</option>
+            <option value="suspended">Suspended</option>
+          </select>
+          <select className="border border-neutral-200 rounded-md px-3 py-2 text-label1 w-full sm:w-40">
+            <option value="all">All City</option>
+            <option value="jakarta">Jakarta</option>
+            <option value="bandung">Bandung</option>
+          </select>
+        </div>
+        {/* Table */}
+        <DataTable data={mockData} columns={columns} table={table} />
+      </section>
+      {/* Modals extracted into shared backoffice components */}
+    </BackofficeWrapper>
+  );
+};
+
+export default HackathonTeamsPage;

apps/backoffice/src/app/(protected)/hackathon-users/_components/modal-user-detail.tsx

@@ -0,0 +1,651 @@
+import { FC, useState, useEffect, useMemo, useRef } from 'react';
+import { Button } from '@imphnen-frontend-service/ui/atoms';
+import { cn } from '@imphnen-frontend-service/utils';
+import {
+  UserOutlined,
+  EnvironmentOutlined,
+  CalendarOutlined,
+  SaveOutlined,
+  CloseOutlined,
+  ExclamationOutlined,
+  CameraOutlined,
+  DeleteOutlined,
+  UploadOutlined,
+} from '@ant-design/icons';
+
+interface UserType {
+  id: string;
+  avatar?: string;
+  fullname: string;
+  bio?: string;
+  location: string;
+  is_active: boolean;
+  skills: string[];
+  created_at: string;
+  updated_at: string;
+}
+
+interface ModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  user: UserType | null;
+}
+
+const ModalUserDetail: FC<ModalProps> = ({ isOpen, onClose, user }) => {
+  const [formData, setFormData] = useState<UserType | null>(null);
+  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
+  const [showAvatarMenu, setShowAvatarMenu] = useState(false);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  // Initialize form data when modal opens
+  useEffect(() => {
+    if (isOpen) {
+      if (user) {
+        // Edit existing user
+        setFormData({ ...user });
+      } else {
+        // Create new user
+        setFormData({
+          id: '', // Will be generated by backend
+          fullname: '',
+          bio: '',
+          location: '',
+          is_active: true,
+          skills: [],
+          avatar: undefined,
+          created_at: new Date().toISOString(),
+          updated_at: new Date().toISOString(),
+        });
+      }
+    }
+  }, [isOpen, user]);
+
+  // Check if form has changes
+  const hasChanges = useMemo(() => {
+    if (!formData) return false;
+    if (!user) return true; // New user always has changes
+    return (
+      formData.fullname !== user.fullname ||
+      formData.location !== user.location ||
+      formData.is_active !== user.is_active ||
+      formData.avatar !== user.avatar ||
+      JSON.stringify(formData.skills) !== JSON.stringify(user.skills) ||
+      formData.bio !== user.bio
+    );
+  }, [formData, user]);
+
+  // Check if required fields are filled
+  const isFormValid = useMemo(() => {
+    if (!formData) return false;
+    return formData.fullname.trim() !== '' && formData.location.trim() !== '';
+  }, [formData]);
+
+  const canSave = hasChanges && isFormValid;
+
+  if (!isOpen || !formData) return null;
+
+  const handleInputChange = (
+    field: keyof UserType,
+    value: string | boolean | string[] | undefined
+  ) => {
+    setFormData((prev) => (prev ? { ...prev, [field]: value } : null));
+  };
+
+  const handleSkillsChange = (skills: string[]) => {
+    setFormData((prev) => (prev ? { ...prev, skills } : null));
+  };
+
+  const handleSave = () => {
+    if (!formData) return;
+
+    if (user) {
+      // Update existing user
+      console.log('Update user data:', formData);
+    } else {
+      // Create new user
+      console.log('Create new user:', formData);
+    }
+    // Here you would typically make an API call to save the data
+    onClose();
+  };
+
+  const handleCancel = () => {
+    if (user) {
+      setFormData({ ...user }); // Reset to original for edit mode
+    }
+    onClose();
+  };
+
+  const handleDeleteAccount = () => {
+    if (!user) return; // Can't delete new user
+    console.log('Delete user:', user.id);
+    setShowDeleteConfirm(false);
+    onClose();
+  };
+
+  const handleAvatarUpload = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+    if (file) {
+      // Validate file type
+      if (!file.type.startsWith('image/')) {
+        alert('Please select an image file');
+        return;
+      }
+
+      // Validate file size (max 5MB)
+      if (file.size > 5 * 1024 * 1024) {
+        alert('Image size must be less than 5MB');
+        return;
+      }
+
+      // Create preview URL
+      const reader = new FileReader();
+      reader.onload = (e) => {
+        const avatarUrl = e.target?.result as string;
+        handleInputChange('avatar', avatarUrl);
+        setShowAvatarMenu(false);
+      };
+      reader.readAsDataURL(file);
+    }
+  };
+
+  const handleRemoveAvatar = () => {
+    handleInputChange('avatar', undefined);
+    setShowAvatarMenu(false);
+  };
+
+  const triggerFileUpload = () => {
+    fileInputRef.current?.click();
+  };
+
+  const availableSkills = [
+    'Frontend Developer',
+    'Backend Developer',
+    'Full Stack Developer',
+    'DevOps Engineer',
+    'UI/UX Designer',
+    'Product Manager',
+    'Data Scientist',
+    'Mobile Developer',
+  ];
+
+  return (
+    <div className="fixed inset-0 z-50">
+      <div
+        className="fixed inset-0 bg-black/50"
+        onClick={(e) => {
+          setShowAvatarMenu(false);
+          onClose();
+        }}
+      />
+      <div className="fixed inset-0 flex items-center justify-center p-4">
+        <div
+          className="bg-white rounded-xl shadow-2xl w-full max-w-4xl max-h-[90vh] overflow-y-auto"
+          onClick={(e) => e.stopPropagation()}
+        >
+          {/* Hidden File Input */}
+          <input
+            type="file"
+            ref={fileInputRef}
+            onChange={handleAvatarUpload}
+            accept="image/*"
+            className="hidden"
+          />
+          {/* Header */}
+          <div className="border-b border-neutral-200 px-8 py-6 flex justify-between items-start">
+            <div className="flex items-center gap-4">
+              {/* Interactive User Avatar */}
+              <div className="relative group ">
+                <div className="w-16 h-16 rounded-full bg-neutral-200 flex items-center justify-center overflow-hidden border-2 border-transparent group-hover:border-primary-300 transition-colors">
+                  {formData.avatar ? (
+                    <img
+                      src={formData.avatar}
+                      alt={formData.fullname}
+                      className="w-full h-full object-cover"
+                    />
+                  ) : (
+                    <UserOutlined className="text-neutral-500 text-2xl" />
+                  )}
+                </div>
+
+                {/* Avatar Hover Overlay */}
+                <button
+                  onClick={() => setShowAvatarMenu(!showAvatarMenu)}
+                  className="absolute inset-0 bg-neutral-400 cursor-pointer rounded-full opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center"
+                >
+                  <CameraOutlined className="text-white text-lg" />
+                </button>
+
+                {/* Avatar Menu Dropdown */}
+                {showAvatarMenu && (
+                  <div className="absolute top-full left-0 mt-2 bg-white rounded-lg shadow-lg border border-neutral-200 py-2 min-w-[140px] z-10">
+                    <button
+                      onClick={triggerFileUpload}
+                      className="w-full px-4 py-2 text-left text-sm text-neutral-700 hover:bg-neutral-50 flex items-center gap-2 cursor-pointer"
+                    >
+                      <UploadOutlined className="text-sm" />
+                      {formData.avatar ? 'Change Photo' : 'Upload Photo'}
+                    </button>
+                    {formData.avatar && (
+                      <button
+                        onClick={handleRemoveAvatar}
+                        className="w-full px-4 py-2 text-left text-sm text-red-600 hover:bg-red-50 flex items-center gap-2 cursor-pointer"
+                      >
+                        <DeleteOutlined className="text-sm" />
+                        Remove Photo
+                      </button>
+                    )}
+                  </div>
+                )}
+              </div>
+              <div>
+                <div className="flex items-center gap-3 mb-2">
+                  <h2 className="text-2xl font-bold text-neutral-900">
+                    {user ? 'Edit User Profile' : 'Create New User'}
+                  </h2>
+                  {user && (
+                    <span className="px-3 py-1 bg-info-100 text-info-700 text-xs font-medium rounded-2xl">
+                      Hover avatar to change
+                    </span>
+                  )}
+                </div>
+                <div className="text-sm text-neutral-500">
+                  {user
+                    ? `Make changes to ${
+                        formData.fullname || 'this user'
+                      }'s profile information`
+                    : 'Fill in the information below to create a new user account'}
+                </div>
+              </div>
+            </div>
+            <button
+              className="p-2 hover:bg-neutral-100 rounded-lg transition-colors"
+              onClick={() => {
+                setShowAvatarMenu(false);
+                handleCancel();
+              }}
+            >
+              <CloseOutlined className="text-neutral-400 text-lg cursor-pointer" />
+            </button>
+          </div>
+
+          {/* Content */}
+          <div className="p-8" onClick={() => setShowAvatarMenu(false)}>
+            <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
+              {/* Left Column - Basic Info */}
+              <div className="space-y-6">
+                <div>
+                  <h3 className="text-lg font-semibold text-neutral-900 mb-4">
+                    Basic Information
+                  </h3>
+                  <div className="space-y-4">
+                    {/* Full Name - Required */}
+                    <div className="flex items-center gap-3">
+                      <UserOutlined className="text-neutral-400" />
+                      <div className="flex-1">
+                        <label className="text-sm text-neutral-500 block mb-1">
+                          Full Name <span className="text-red-500">*</span>
+                        </label>
+                        <input
+                          type="text"
+                          value={formData.fullname}
+                          onChange={(e) =>
+                            handleInputChange('fullname', e.target.value)
+                          }
+                          className={cn(
+                            'w-full border rounded-lg px-3 py-2 text-sm focus:border-primary-500 focus:outline-none',
+                            formData.fullname.trim() === ''
+                              ? 'border-red-300 bg-red-50'
+                              : 'border-neutral-300'
+                          )}
+                          placeholder="Enter full name"
+                        />
+                        {formData.fullname.trim() === '' && (
+                          <p className="text-red-500 text-xs mt-1">
+                            Full name is required
+                          </p>
+                        )}
+                      </div>
+                    </div>
+
+                    {/* Location - Required */}
+                    <div className="flex items-center gap-3">
+                      <EnvironmentOutlined className="text-neutral-400" />
+                      <div className="flex-1">
+                        <label className="text-sm text-neutral-500 block mb-1">
+                          Location <span className="text-red-500">*</span>
+                        </label>
+                        <select
+                          value={formData.location}
+                          onChange={(e) =>
+                            handleInputChange('location', e.target.value)
+                          }
+                          className={cn(
+                            'w-full border rounded-lg px-3 py-2 text-sm focus:border-primary-500 focus:outline-none bg-white',
+                            formData.location.trim() === ''
+                              ? 'border-red-300 bg-red-50'
+                              : 'border-neutral-300'
+                          )}
+                        >
+                          <option value="">Select location</option>
+                          <option value="Jakarta">Jakarta</option>
+                          <option value="Bandung">Bandung</option>
+                          <option value="Surabaya">Surabaya</option>
+                          <option value="Medan">Medan</option>
+                          <option value="Yogyakarta">Yogyakarta</option>
+                        </select>
+                        {formData.location.trim() === '' && (
+                          <p className="text-red-500 text-xs mt-1">
+                            Location is required
+                          </p>
+                        )}
+                      </div>
+                    </div>
+
+                    {/* Joined Date - Read Only - Only show for existing users */}
+                    {user && (
+                      <div className="flex items-center gap-3">
+                        <CalendarOutlined className="text-neutral-400" />
+                        <div>
+                          <p className="text-sm text-neutral-500">
+                            Joined Date
+                          </p>
+                          <p className="font-medium">
+                            {new Date(formData.created_at).toLocaleDateString(
+                              'en-US',
+                              {
+                                year: 'numeric',
+                                month: 'long',
+                                day: 'numeric',
+                              }
+                            )}
+                          </p>
+                        </div>
+                      </div>
+                    )}
+                  </div>
+                </div>
+
+                {/* Bio Section - Optional */}
+                <div>
+                  <h3 className="text-lg font-semibold text-neutral-900 mb-3">
+                    Bio{' '}
+                    <span className="text-neutral-400 text-sm font-normal">
+                      (Optional)
+                    </span>
+                  </h3>
+                  <textarea
+                    value={formData.bio || ''}
+                    onChange={(e) =>
+                      handleInputChange('bio', e.target.value || undefined)
+                    }
+                    placeholder="Tell us about yourself..."
+                    rows={4}
+                    className="w-full border border-neutral-300 rounded-lg px-3 py-2 text-sm focus:border-primary-500 focus:outline-none resize-none"
+                  />
+                </div>
+              </div>
+
+              {/* Right Column - Skills & Status */}
+              <div className="space-y-6">
+                {/* Account Status - Enhanced Tab Design */}
+                <div>
+                  <h3 className="text-lg font-semibold text-neutral-900 mb-4">
+                    Account Status
+                  </h3>
+                  <div className="flex bg-neutral-100 p-1 rounded-lg">
+                    <button
+                      onClick={() => handleInputChange('is_active', true)}
+                      className={cn(
+                        'flex-1 px-4 py-2 text-sm font-medium rounded-md transition-all duration-200 cursor-pointer',
+                        formData.is_active
+                          ? 'bg-white text-success-700 shadow-sm ring-1 ring-success-200'
+                          : 'text-neutral-600 hover:text-neutral-800'
+                      )}
+                    >
+                      <div className="flex items-center justify-center gap-2">
+                        <div
+                          className={cn(
+                            'w-2 h-2 rounded-full',
+                            formData.is_active
+                              ? 'bg-success-500'
+                              : 'bg-neutral-400'
+                          )}
+                        />
+                        Active
+                      </div>
+                    </button>
+                    <button
+                      onClick={() => handleInputChange('is_active', false)}
+                      className={cn(
+                        'flex-1 px-4 py-2 text-sm font-medium rounded-md transition-all duration-200 cursor-pointer',
+                        !formData.is_active
+                          ? 'bg-white text-neutral-700 shadow-sm ring-1 ring-neutral-200'
+                          : 'text-neutral-600 hover:text-neutral-800'
+                      )}
+                    >
+                      <div className="flex items-center justify-center gap-2">
+                        <div
+                          className={cn(
+                            'w-2 h-2 rounded-full',
+                            !formData.is_active
+                              ? 'bg-neutral-500'
+                              : 'bg-neutral-400'
+                          )}
+                        />
+                        Inactive
+                      </div>
+                    </button>
+                  </div>
+                  <p className="text-xs text-neutral-500 mt-2">
+                    {formData.is_active
+                      ? 'User can access their account and participate in activities'
+                      : 'User account is suspended and cannot access services'}
+                  </p>
+                </div>
+
+                {/* Skills Section - Optional */}
+                <div>
+                  <h3 className="text-lg font-semibold text-neutral-900 mb-4">
+                    Skills & Expertise{' '}
+                    <span className="text-neutral-400 text-sm font-normal">
+                      (Optional)
+                    </span>
+                  </h3>
+                  <div className="space-y-3">
+                    <div className="flex flex-wrap gap-2 min-h-10 p-3 border border-neutral-300 rounded-lg bg-neutral-50">
+                      {formData.skills.length > 0 ? (
+                        formData.skills.map((skill, index) => (
+                          <span
+                            key={index}
+                            className="inline-flex items-center gap-2 px-3 py-1.5 rounded-2xl text-sm font-medium bg-blue-100 text-blue-800"
+                          >
+                            {skill}
+                            <button
+                              onClick={() =>
+                                handleSkillsChange(
+                                  formData.skills.filter((_, i) => i !== index)
+                                )
+                              }
+                              className="text-blue-600 hover:text-blue-800 ml-1 cursor-pointer"
+                            >
+                              ✕
+                            </button>
+                          </span>
+                        ))
+                      ) : (
+                        <span className="text-neutral-400 text-sm">
+                          No skills added yet
+                        </span>
+                      )}
+                    </div>
+                    <select
+                      value=""
+                      onChange={(e) => {
+                        if (
+                          e.target.value &&
+                          !formData.skills.includes(e.target.value)
+                        ) {
+                          handleSkillsChange([
+                            ...formData.skills,
+                            e.target.value,
+                          ]);
+                        }
+                      }}
+                      className="w-full border border-neutral-300 rounded-lg px-3 py-2 text-sm focus:border-primary-500 focus:outline-none bg-white"
+                    >
+                      <option value="">Add a skill...</option>
+                      {availableSkills
+                        .filter((skill) => !formData.skills.includes(skill))
+                        .map((skill) => (
+                          <option key={skill} value={skill}>
+                            {skill}
+                          </option>
+                        ))}
+                    </select>
+                  </div>
+                </div>
+
+                {/* Account Details - Read Only - Only show for existing users */}
+                {user && (
+                  <div>
+                    <h3 className="text-lg font-semibold text-neutral-900 mb-4">
+                      Account Details
+                    </h3>
+                    <div className="space-y-3 bg-neutral-50 p-4 rounded-lg">
+                      <div className="flex justify-between items-center py-1">
+                        <span className="text-neutral-600 text-sm">
+                          User ID
+                        </span>
+                        <span className="font-mono text-sm text-neutral-800">
+                          {formData.id}
+                        </span>
+                      </div>
+                      <div className="flex justify-between items-center py-1">
+                        <span className="text-neutral-600 text-sm">
+                          Last Updated
+                        </span>
+                        <span className="text-sm text-neutral-800">
+                          {new Date(formData.updated_at).toLocaleDateString(
+                            'en-US',
+                            {
+                              month: 'short',
+                              day: 'numeric',
+                              year: 'numeric',
+                            }
+                          )}
+                        </span>
+                      </div>
+                    </div>
+                  </div>
+                )}
+              </div>
+            </div>
+          </div>
+
+          {/* Footer Actions */}
+          <div className="border-t border-neutral-200 px-8 py-6">
+            <div className="flex justify-between items-center">
+              <div className="flex items-center gap-4">
+                <div className="text-sm text-neutral-500">
+                  {canSave
+                    ? 'Ready to save changes'
+                    : hasChanges
+                    ? 'Please fill required fields'
+                    : 'No changes made'}
+                </div>
+                {/* Delete Account Button - Only show for existing users */}
+                {user && (
+                  <button
+                    onClick={() => setShowDeleteConfirm(true)}
+                    className="text-red-600 hover:text-red-700 text-sm font-medium transition-colors cursor-pointer"
+                  >
+                    Delete Account
+                  </button>
+                )}
+              </div>
+
+              <div className="flex items-center gap-3">
+                <Button
+                  variant="secondary"
+                  size="sm"
+                  onClick={handleCancel}
+                  className="px-6"
+                >
+                  Cancel
+                </Button>
+                <Button
+                  variant="primary"
+                  size="sm"
+                  onClick={handleSave}
+                  disabled={!canSave}
+                  className={cn(
+                    'flex items-center gap-2 px-6',
+                    !canSave && 'opacity-50 cursor-not-allowed'
+                  )}
+                >
+                  <SaveOutlined className="text-sm" />
+                  {user ? 'Save Changes' : 'Create User'}
+                </Button>
+              </div>
+            </div>
+          </div>
+
+          {/* Delete Confirmation Modal */}
+          {showDeleteConfirm && (
+            <div className="fixed inset-0 z-60">
+              <div
+                className="fixed inset-0 bg-black/50"
+                onClick={() => setShowDeleteConfirm(false)}
+              />
+              <div className="fixed inset-0 flex items-center justify-center p-4">
+                <div className="bg-white rounded-xl shadow-2xl w-full max-w-md">
+                  <div className="p-6">
+                    <div className="flex items-center gap-3 mb-4">
+                      <div className="w-10 h-10 bg-red-100 rounded-full flex items-center justify-center">
+                        <ExclamationOutlined className="text-red-600 text-lg" />
+                      </div>
+                      <div>
+                        <h3 className="text-lg font-semibold text-neutral-900">
+                          Delete Account
+                        </h3>
+                        <p className="text-sm text-neutral-500">
+                          This action cannot be undone
+                        </p>
+                      </div>
+                    </div>
+                    <p className="text-neutral-700 mb-6">
+                      Are you sure you want to permanently delete{' '}
+                      <strong>{formData.fullname}</strong>'s account? This will
+                      remove all their data and cannot be reversed.
+                    </p>
+                    <div className="flex gap-3 justify-end">
+                      <Button
+                        variant="secondary"
+                        size="sm"
+                        onClick={() => setShowDeleteConfirm(false)}
+                        className="px-4"
+                      >
+                        Cancel
+                      </Button>
+                      <Button
+                        variant="primary"
+                        size="sm"
+                        onClick={handleDeleteAccount}
+                        className="px-4 bg-red-600 hover:bg-red-700 border-red-600"
+                      >
+                        Delete Account
+                      </Button>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ModalUserDetail;

apps/backoffice/src/app/(protected)/hackathon-users/page.tsx

@@ -0,0 +1,476 @@
+import { FC, ReactElement, useState, useMemo, useCallback } from 'react';
+import ModalUserDetail from './_components/modal-user-detail';
+import {
+  BackofficeWrapper,
+  DataTable,
+} from '@imphnen-frontend-service/ui/organisms';
+import { ColumnDef } from '@tanstack/react-table';
+import { Button } from '@imphnen-frontend-service/ui/atoms';
+import { cn } from '@imphnen-frontend-service/utils';
+import {
+  EditOutlined,
+  UserOutlined,
+  SearchOutlined,
+  FilterOutlined,
+  PlusOutlined,
+} from '@ant-design/icons';
+// Removed unused SearchOutlined icon after schema revision
+
+// Define interface outside component
+interface UserType {
+  id: string; // UUID
+  avatar?: string;
+  fullname: string;
+  bio?: string;
+  location: string;
+  is_active: boolean; // admin can deactivate
+  skills: string[]; // Frontend Developer, Backend Developer, etc.
+  created_at: string;
+  updated_at: string;
+}
+
+// Move mock data outside component to prevent recreation
+const skillsOptions = [
+  'Frontend Developer',
+  'Backend Developer',
+  'Full Stack Developer',
+  'DevOps Engineer',
+  'UI/UX Designer',
+  'Product Manager',
+  'Data Scientist',
+  'Mobile Developer',
+];
+
+const locations = ['Jakarta', 'Bandung', 'Surabaya', 'Medan', 'Yogyakarta'];
+const bios = [
+  'Passionate developer with 5+ years experience',
+  'Tech enthusiast and problem solver',
+  'Building scalable solutions for modern problems',
+  'Creative designer with technical background',
+  'Data-driven decision maker',
+];
+
+const mockData: UserType[] = Array.from({ length: 50 }, (_, i) => {
+  const randomSkillsCount = Math.floor(Math.random() * 3) + 1; // 1-3 skills
+  const randomSkills = skillsOptions
+    .sort(() => 0.5 - Math.random())
+    .slice(0, randomSkillsCount);
+
+  return {
+    id: `24db9e4d-ca4c-46aa-ac36-8ef04bbe01${String(i).padStart(2, '0')}`,
+    avatar:
+      i % 4 === 0
+        ? `https://ui-avatars.com/api/?name=${encodeURIComponent(
+            i % 3 === 0 ? 'Ahmad Wijuana' : 'Sofia Wijuana'
+          )}&background=random`
+        : undefined,
+    fullname:
+      i % 3 === 0
+        ? 'Ahmad Wijuana'
+        : i % 3 === 1
+        ? 'Sofia Wijuana'
+        : 'Budi Santoso',
+    bio: i % 4 === 0 ? bios[i % bios.length] : undefined,
+    location: locations[i % locations.length],
+    is_active: i % 7 !== 0, // More realistic distribution
+    skills: randomSkills,
+    created_at: new Date(
+      Date.now() - i * 86400000 * (Math.random() * 30 + 1)
+    ).toISOString(), // Random within last 30-60 days
+    updated_at: new Date().toISOString(),
+  };
+});
+
+export const HackathonUsersPage: FC = (): ReactElement => {
+  const [showDetailModal, setShowDetailModal] = useState(false);
+  const [showNewUserModal, setShowNewUserModal] = useState(false);
+  const [selectedUser, setSelectedUser] = useState<UserType | null>(null);
+  const [globalFilter, setGlobalFilter] = useState('');
+
+  // Advanced filtering states
+  const [statusFilter, setStatusFilter] = useState('all');
+  const [locationFilter, setLocationFilter] = useState('all');
+  const [skillsFilter, setSkillsFilter] = useState<string[]>([]);
+
+  // Constants
+  const pageSize = 10;
+
+  // Memoize the callback to prevent recreation
+  const handleShowDetailModal = useCallback((user: UserType) => {
+    setSelectedUser(user);
+    setShowDetailModal(true);
+  }, []);
+
+  const handleCloseDetailModal = useCallback(() => {
+    setShowDetailModal(false);
+    setSelectedUser(null);
+  }, []);
+
+  const handleShowNewUserModal = useCallback(() => {
+    setShowNewUserModal(true);
+  }, []);
+
+  const handleCloseNewUserModal = useCallback(() => {
+    setShowNewUserModal(false);
+  }, []);
+
+  // Filter data based on current filter states
+  const filteredData = useMemo(() => {
+    return mockData.filter((user) => {
+      // Status filter
+      if (statusFilter !== 'all') {
+        const isActive = statusFilter === 'active';
+        if (user.is_active !== isActive) return false;
+      }
+
+      // Location filter
+      if (locationFilter !== 'all' && user.location !== locationFilter) {
+        return false;
+      }
+
+      // Skills filter
+      if (skillsFilter.length > 0) {
+        const hasMatchingSkill = skillsFilter.some((skill) =>
+          user.skills.includes(skill)
+        );
+        if (!hasMatchingSkill) return false;
+      }
+
+      return true;
+    });
+  }, [statusFilter, locationFilter, skillsFilter]);
+
+  // Memoize columns to prevent recreation on every render
+  const columns: ColumnDef<UserType>[] = useMemo(
+    () => [
+      {
+        accessorKey: 'fullname',
+        header: 'User',
+        cell: ({ row }) => (
+          <div className="flex items-center gap-3">
+            {/* Avatar */}
+            <div className="w-10 h-10 rounded-full bg-neutral-200 flex items-center justify-center overflow-hidden shrink-0">
+              {row.original.avatar ? (
+                <img
+                  src={row.original.avatar}
+                  alt={row.original.fullname}
+                  className="w-full h-full object-cover"
+                />
+              ) : (
+                <UserOutlined className="text-neutral-500 text-lg" />
+              )}
+            </div>
+            {/* Name only */}
+            <div className="min-w-0 flex-1">
+              <p className="font-medium text-neutral-900 truncate">
+                {row.original.fullname}
+              </p>
+            </div>
+          </div>
+        ),
+        enableSorting: true,
+      },
+      {
+        accessorKey: 'skills',
+        header: 'Skills',
+        cell: ({ row }) => (
+          <div className="flex flex-wrap gap-1 max-w-xs">
+            {row.original.skills.slice(0, 2).map((skill, index) => (
+              <span
+                key={index}
+                className="inline-flex items-center px-2 py-1 rounded-2xl text-xs font-medium bg-success-100 text-success-800"
+              >
+                {skill.replace(' Developer', '').replace(' Engineer', '')}
+              </span>
+            ))}
+            {row.original.skills.length > 2 && (
+              <span className="inline-flex items-center px-2 py-1 rounded-2xl text-xs font-medium bg-success-200 text-success-700">
+                +{row.original.skills.length - 2}
+              </span>
+            )}
+          </div>
+        ),
+        enableSorting: false,
+      },
+      {
+        accessorKey: 'location',
+        header: 'Location',
+        cell: ({ row }) => (
+          <span className="text-neutral-700">{row.original.location}</span>
+        ),
+        enableSorting: true,
+      },
+      {
+        accessorKey: 'is_active',
+        header: 'Status',
+        cell: ({ row }) => (
+          <div className="flex items-center gap-2">
+            <div
+              className={cn(
+                'w-2 h-2 rounded-full',
+                row.original.is_active ? 'bg-success-500' : 'bg-neutral-400'
+              )}
+            />
+            <span
+              className={cn(
+                'text-sm font-medium',
+                row.original.is_active ? 'text-success-700' : 'text-neutral-500'
+              )}
+            >
+              {row.original.is_active ? 'Active' : 'Inactive'}
+            </span>
+          </div>
+        ),
+        enableSorting: true,
+        sortingFn: (rowA, rowB) => {
+          const aActive = rowA.original.is_active;
+          const bActive = rowB.original.is_active;
+          if (aActive && !bActive) return -1;
+          if (!aActive && bActive) return 1;
+          return 0;
+        },
+      },
+      {
+        accessorKey: 'created_at',
+        header: 'Joined',
+        cell: ({ row }) => (
+          <span className="text-neutral-900 text-sm">
+            {new Date(row.original.created_at).toLocaleDateString('en-US', {
+              year: 'numeric',
+              month: 'short',
+              day: 'numeric',
+            })}
+          </span>
+        ),
+        enableSorting: true,
+        sortingFn: 'datetime',
+      },
+      {
+        id: 'actions',
+        header: 'Actions',
+        meta: { cellClassName: cn('w-48') },
+        cell: ({ row }) => (
+          <div className="flex items-center gap-2">
+            <Button
+              variant="primary"
+              size="sm"
+              className="flex items-center gap-2 text-sm px-4 py-2"
+              onClick={() => handleShowDetailModal(row.original)}
+            >
+              <EditOutlined className="text-sm" />
+              Manage
+            </Button>
+            <Button
+              variant="secondary"
+              size="sm"
+              className="text-sm px-4 py-2"
+              onClick={() => {
+                // Toggle user status - implement later
+                console.log(`Toggle status for ${row.original.fullname}`);
+              }}
+            >
+              {row.original.is_active ? 'Deactivate' : 'Activate'}
+            </Button>
+          </div>
+        ),
+        enableSorting: false,
+      },
+    ],
+    [handleShowDetailModal]
+  );
+
+  return (
+    <BackofficeWrapper title="IMPHNEN x Kolosal.ai Hackathon 2025">
+      <h1 className="mb-8 text-p1 font-semibold text-neutral-700">
+        User Management
+      </h1>
+      {/* Filters and actions */}
+      <section className="bg-white rounded-md shadow p-8 flex flex-col gap-6">
+        <div className="flex flex-wrap gap-3 items-center justify-between">
+          {/* Left side - Search & filters */}
+          <div className="flex flex-wrap gap-3 items-center">
+            {/* Search bar */}
+            <div className="relative">
+              <SearchOutlined className="absolute left-3 top-1/2 transform -translate-y-1/2 text-neutral-400 text-sm" />
+              <input
+                type="text"
+                className="border border-neutral-200 rounded-lg pl-10 pr-4 py-2.5 text-sm w-full sm:w-80 focus:border-primary-500 focus:outline-none"
+                placeholder="Search users by name or location..."
+                value={globalFilter}
+                onChange={(e) => setGlobalFilter(e.target.value)}
+              />
+            </div>
+
+            {/* Status Filter */}
+            <div className="relative">
+              <FilterOutlined className="absolute left-3 top-1/2 transform -translate-y-1/2 text-neutral-400 text-sm pointer-events-none z-10" />
+              <select
+                className="border border-neutral-200 rounded-lg pl-10 pr-10 py-2.5 text-sm w-full sm:w-36 focus:border-primary-500 focus:outline-none appearance-none bg-white cursor-pointer"
+                value={statusFilter}
+                onChange={(e) => setStatusFilter(e.target.value)}
+              >
+                <option value="all">All Status</option>
+                <option value="active">Active</option>
+                <option value="inactive">Inactive</option>
+              </select>
+            </div>
+
+            {/* Location Filter */}
+            <div className="relative">
+              <FilterOutlined className="absolute left-3 top-1/2 transform -translate-y-1/2 text-neutral-400 text-sm pointer-events-none z-10" />
+              <select
+                className="border border-neutral-200 rounded-lg pl-10 pr-10 py-2.5 text-sm w-full sm:w-44 focus:border-primary-500 focus:outline-none appearance-none bg-white cursor-pointer"
+                value={locationFilter}
+                onChange={(e) => setLocationFilter(e.target.value)}
+              >
+                <option value="all">All Locations</option>
+                {locations.map((location) => (
+                  <option key={location} value={location}>
+                    {location}
+                  </option>
+                ))}
+              </select>
+            </div>
+
+            {/* Skills Filter with Icon */}
+            <div className="relative">
+              <FilterOutlined className="absolute left-3 top-1/2 transform -translate-y-1/2 text-neutral-400 text-sm pointer-events-none z-10" />
+              <select
+                className="border border-neutral-200 rounded-lg pl-10 pr-10 py-2.5 text-sm w-full sm:w-44 focus:border-primary-500 focus:outline-none appearance-none bg-white cursor-pointer"
+                value=""
+                onChange={(e) => {
+                  if (
+                    e.target.value &&
+                    !skillsFilter.includes(e.target.value)
+                  ) {
+                    setSkillsFilter((prev) => [...prev, e.target.value]);
+                  }
+                }}
+              >
+                <option value="">Add Skill Filter</option>
+                {skillsOptions.map((skill) => (
+                  <option
+                    key={skill}
+                    value={skill}
+                    disabled={skillsFilter.includes(skill)}
+                  >
+                    {skill}
+                  </option>
+                ))}
+              </select>
+            </div>
+          </div>
+
+          {/* Right side - Add User Button */}
+          <div className="flex items-center gap-3">
+            <Button
+              variant="primary"
+              size="md"
+              className="flex items-center gap-2 px-4 py-2"
+              onClick={handleShowNewUserModal}
+            >
+              <PlusOutlined className="text-sm" />
+              Add User
+            </Button>
+          </div>
+        </div>
+
+        {/* Active filters display */}
+        {(skillsFilter.length > 0 ||
+          statusFilter !== 'all' ||
+          locationFilter !== 'all') && (
+          <div className="flex flex-wrap gap-2 items-center">
+            <span className="text-sm text-neutral-600">Active filters:</span>
+
+            {/* Status filter badge */}
+            {statusFilter !== 'all' && (
+              <span className="inline-flex items-center gap-1 px-2 py-1 bg-info-100 text-info-800 rounded-2xl text-sm">
+                Status: {statusFilter}
+                <button
+                  onClick={() => setStatusFilter('all')}
+                  className="text-info-600 hover:text-info-800 cursor-pointer"
+                >
+                  ✕
+                </button>
+              </span>
+            )}
+
+            {/* Location filter badge */}
+            {locationFilter !== 'all' && (
+              <span className="inline-flex items-center gap-1 px-2 py-1 bg-green-100 text-green-800 rounded-2xl text-sm">
+                Location: {locationFilter}
+                <button
+                  onClick={() => setLocationFilter('all')}
+                  className="text-green-600 hover:text-green-800 cursor-pointer"
+                >
+                  ✕
+                </button>
+              </span>
+            )}
+
+            {/* Skills filter badges */}
+            {skillsFilter.map((skill) => (
+              <span
+                key={skill}
+                className="inline-flex items-center gap-1 px-2 py-1 bg-purple-100 text-purple-800 rounded-2xl text-sm"
+              >
+                {skill.replace(' Developer', '').replace(' Engineer', '')}
+                <button
+                  onClick={() =>
+                    setSkillsFilter((prev) => prev.filter((s) => s !== skill))
+                  }
+                  className="text-purple-600 hover:text-purple-800 cursor-pointer"
+                >
+                  ✕
+                </button>
+              </span>
+            ))}
+
+            {/* Clear all filters */}
+            <Button
+              variant="secondary"
+              size="sm"
+              onClick={() => {
+                setStatusFilter('all');
+                setLocationFilter('all');
+                setSkillsFilter([]);
+                setGlobalFilter('');
+              }}
+              className="text-sm text-neutral-600"
+            >
+              Clear All
+            </Button>
+          </div>
+        )}
+
+        {/* Pagination-aware results display */}
+        {filteredData.length > 0 && (
+          <div className="text-sm text-neutral-600">
+            Showing {Math.min(pageSize, filteredData.length)} of{' '}
+            {filteredData.length} users
+            {filteredData.length > pageSize}
+          </div>
+        )}
+
+        {/* Table */}
+        <DataTable data={filteredData} columns={columns} pageSize={10} />
+      </section>
+
+      {/* Modals component */}
+      <ModalUserDetail
+        isOpen={showDetailModal}
+        onClose={handleCloseDetailModal}
+        user={selectedUser}
+      />
+
+      {/* New User Modal */}
+      <ModalUserDetail
+        isOpen={showNewUserModal}
+        onClose={handleCloseNewUserModal}
+        user={null} // null indicates creating new user
+      />
+    </BackofficeWrapper>
+  );
+};
+
+export default HackathonUsersPage;

apps/backoffice/src/app/(protected)/layout.tsx

@@ -0,0 +1,56 @@
+import { FC, ReactElement, useState } from 'react';
+import { Outlet } from 'react-router-dom';
+import { BackofficeSidebar } from '@imphnen-frontend-service/ui/organisms';
+
+export const AppLayout: FC = (): ReactElement => {
+  const [mobileSidebarOpen, setMobileSidebarOpen] = useState(false);
+
+  return (
+    <div className="bg-primary-50 min-h-screen flex justify-center">
+      <div className="bg-primary-50 min-h-screen w-full flex">
+        <BackofficeSidebar
+          isOpen={mobileSidebarOpen}
+          onClose={() => setMobileSidebarOpen(false)}
+        />
+        <div className="flex-1 overflow-auto">
+          {/* Sticky top header */}
+          <header
+            className={
+              'lg:hidden sticky top-0 bg-white border-b border-primary-200 px-4 py-3 flex items-center gap-3 ' +
+              (mobileSidebarOpen ? 'z-0' : 'z-30')
+            }
+          >
+            {/* Mobile menu button (shown on small screens) */}
+            <button
+              type="button"
+              className="lg:hidden p-2 rounded-md hover:bg-gray-100 text-gray-700"
+              onClick={() => setMobileSidebarOpen(true)}
+              aria-label="Open sidebar"
+            >
+              <svg
+                className="w-5 h-5"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M4 6h16M4 12h16M4 18h16"
+                />
+              </svg>
+            </button>
+            <h1 className="text-p3 font-semibold text-primary-700">
+              IMPHNEN Backoffice
+            </h1>
+          </header>
+
+          <Outlet />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default AppLayout;

apps/backoffice/src/app/(protected)/permissions/_components/modal-add-permission.tsx

@@ -0,0 +1,132 @@
+import { Button } from '@imphnen-frontend-service/ui/atoms';
+import { Modal } from '@imphnen-frontend-service/ui/molecules';
+import { ControlledInputField } from '@imphnen-frontend-service/ui/organisms';
+import { useItem, useConfirmItem } from '../_hook/use-item';
+
+interface IModalAddPermission {
+  isOpen: boolean;
+  onClose: () => void;
+  handleAddItem?: () => Promise<boolean>;
+  currentStep?: number;
+  nextStep: () => void;
+  prevStep: () => void;
+  resetStep: () => void;
+}
+
+const ModalAddPermission = ({
+  isOpen,
+  onClose,
+  currentStep,
+  nextStep,
+  resetStep,
+  handleAddItem,
+}: IModalAddPermission) => {
+  return (
+    <Modal
+      className="min-w-[400px] bg-primary-50 rounded-lg p-[40px] flex flex-col gap-3 text-center"
+      isOpen={isOpen}
+      onClose={() => {
+        onClose();
+        resetStep();
+      }}
+      disableEscapeKeyDown={true}
+    >
+      {currentStep === 1 && <StepOne nextStep={nextStep} onClose={onClose} />}
+      {currentStep === 2 && (
+        <StepTwo
+          onClose={onClose}
+          handleAddItem={handleAddItem}
+          resetStep={resetStep}
+        />
+      )}
+    </Modal>
+  );
+};
+
+interface IStepOneProps {
+  nextStep: () => void;
+  onClose: () => void;
+}
+
+const StepOne = ({ nextStep }: IStepOneProps) => {
+  const { form, onSubmit } = useItem(nextStep);
+
+  return (
+    <>
+      <Modal.Header>
+        <h2 className="text-p1 font-semibold text-primary-500">
+          Tambah Permissions
+        </h2>
+      </Modal.Header>
+      <Modal.Content>
+        <form onSubmit={onSubmit} className="flex flex-col gap-8">
+          <ControlledInputField
+            control={form.control}
+            label="Name"
+            name="name"
+            type="text"
+            placeholder="Nama Permission"
+            size="lg"
+            className="w-full"
+          />
+
+          <Button variant="primary" size="lg" className="w-full" type="submit">
+            Tambah Permission
+          </Button>
+        </form>
+      </Modal.Content>
+    </>
+  );
+};
+
+interface IStepTwoProps {
+  onClose: () => void;
+  handleAddItem?: () => Promise<boolean>;
+  resetStep: () => void;
+}
+
+const StepTwo = ({ onClose, handleAddItem, resetStep }: IStepTwoProps) => {
+  const { onConfirm, onCancel } = useConfirmItem(
+    onClose,
+    resetStep,
+    handleAddItem,
+    {
+      success: 'Data permissions berhasil ditambahkan',
+      error: 'Data permissions gagal ditambahkan',
+    }
+  );
+
+  return (
+    <>
+      <Modal.Header className="mb-7 text-center items-center">
+        <h2 className="text-p1 font-semibold text-primary-500 mb-3">
+          Tambah Permissions
+        </h2>
+        <p className="text-p3 text-center text-neutral-400">
+          Apakah kamu yakin ingin
+          <br /> menambahkan permission ini?
+        </p>
+      </Modal.Header>
+      <Modal.Content className="flex mb-0 gap-4">
+        <Button
+          variant="bordered"
+          size="lg"
+          className="w-full"
+          onClick={onCancel}
+        >
+          Batal
+        </Button>
+        <Button
+          variant="primary"
+          size="lg"
+          className="w-full"
+          onClick={onConfirm}
+        >
+          Tambahkan
+        </Button>
+      </Modal.Content>
+    </>
+  );
+};
+
+export default ModalAddPermission;

apps/backoffice/src/app/(protected)/permissions/_components/modal-delete-permission.tsx

@@ -0,0 +1,72 @@
+import { Button } from '@imphnen-frontend-service/ui/atoms';
+import { Modal } from '@imphnen-frontend-service/ui/molecules';
+import { useConfirmItem } from '../_hook/use-item';
+
+interface IModalDeletePermission {
+  isOpen: boolean;
+  onClose: () => void;
+  handleDelete?: () => Promise<boolean>;
+  currentStep?: number;
+  nextStep: () => void;
+  prevStep: () => void;
+  resetStep: () => void;
+}
+
+const ModalDeletePermission = ({
+  isOpen,
+  onClose,
+  resetStep,
+  handleDelete,
+}: IModalDeletePermission) => {
+  const { onConfirm } = useConfirmItem(onClose, resetStep, handleDelete, {
+    success: 'Data permissions berhasil dihapus',
+    error: 'Data permissions gagal dihapus',
+  });
+
+  return (
+    <Modal
+      className="min-w-[400px] bg-primary-50 rounded-lg p-[40px] flex flex-col gap-8 text-center"
+      isOpen={isOpen}
+      onClose={onClose}
+      closeButtonClassName="hidden"
+    >
+      <Modal.Header className="gap-8">
+        <img
+          src="/chibi-delete.webp"
+          alt="Delete?"
+          width={148}
+          className="self-center"
+        />
+        <div className="text-center">
+          <h2 className="text-p1 font-semibold text-danger-500 mb-3">
+            Delete Permissions
+          </h2>
+          <p className="text-p3 text-neutral-400">
+            Apakah kamu yakin untuk menghapus permission ini? Menghapus data ini
+            mungkin akan mempengaruhi fungsional sistem
+          </p>
+        </div>
+      </Modal.Header>
+      <Modal.Content className="flex gap-4">
+        <Button
+          variant="secondary"
+          size="lg"
+          className="w-full"
+          onClick={onClose}
+        >
+          Batal Hapus
+        </Button>
+        <Button
+          variant="primary"
+          size="lg"
+          className="w-full bg-danger-500 hover:bg-danger-600"
+          onClick={onConfirm}
+        >
+          Hapus Item
+        </Button>
+      </Modal.Content>
+    </Modal>
+  );
+};
+
+export default ModalDeletePermission;

apps/backoffice/src/app/(protected)/permissions/_components/modal-update-permission.tsx

@@ -0,0 +1,62 @@
+import { Button } from '@imphnen-frontend-service/ui/atoms';
+import { InputField, Modal } from '@imphnen-frontend-service/ui/molecules';
+import { useConfirmItem } from '../_hook/use-item';
+
+interface IModalUpdatePermission {
+  isOpen: boolean;
+  onClose: () => void;
+  handleUpdate?: () => Promise<boolean>;
+  currentStep?: number;
+  nextStep: () => void;
+  prevStep: () => void;
+  resetStep: () => void;
+}
+
+const ModalUpdatePermission = ({
+  isOpen,
+  onClose,
+  resetStep,
+  handleUpdate,
+}: IModalUpdatePermission) => {
+  const { onConfirm } = useConfirmItem(onClose, resetStep, handleUpdate, {
+    success: 'Perubahan permissions berhasil dilakukan',
+    error: 'Perubahan permissions gagal dilakukan',
+  });
+
+  return (
+    <Modal
+      className="min-w-[400px] bg-primary-50 rounded-lg p-[40px] flex flex-col gap-3 text-center"
+      isOpen={isOpen}
+      onClose={onClose}
+      disableEscapeKeyDown={true}
+    >
+      <Modal.Header>
+        <h2 className="text-p1 font-semibold text-primary-500">
+          Update Permissions
+        </h2>
+      </Modal.Header>
+      <Modal.Content className="flex flex-col gap-8">
+        <InputField
+          label="Name"
+          name="name"
+          type="text"
+          placeholder="Nama Permission"
+          size="lg"
+          className="w-full"
+        />
+
+        <Button
+          variant="primary"
+          size="lg"
+          className="w-full"
+          type="submit"
+          onClick={onConfirm}
+        >
+          Update Permission
+        </Button>
+      </Modal.Content>
+    </Modal>
+  );
+};
+
+export default ModalUpdatePermission;

apps/backoffice/src/app/(protected)/permissions/_hook/use-item.ts

@@ -0,0 +1,61 @@
+import { useForm } from 'react-hook-form';
+// import { zodResolver } from '@hookform/resolvers/zod';
+// import {
+//   gachaRollItemSchema,
+//   TGachaRollItem
+// } from '@imphnen-frontend-service/service';
+import { toast } from 'sonner';
+
+export const useItem = (
+  nextStep: () => void,
+  initialValues?: any
+) => {
+  const form = useForm<any>({
+    // resolver: zodResolver(),
+    mode: 'all',
+    defaultValues: initialValues,
+  });
+
+  const onSubmit = form.handleSubmit((data) => {
+    console.log('Form data:', data);
+    nextStep();
+  });
+
+  return {
+    form,
+    onSubmit,
+  };
+};
+
+export const useConfirmItem = (
+  onClose: () => void,
+  resetStep: () => void,
+  actionFunction?: () => Promise<boolean>,
+  messages?: {
+    success?: string;
+    error?: string;
+  }
+) => {
+  const onConfirm = async () => {
+    try {
+      // const result = await actionFunction?.();
+      // result ? toast.success(messages?.success) : toast.error(messages?.error);
+      toast.success(messages?.success);
+      onClose();
+      resetStep();
+    } catch (error) {
+      console.log(error);
+      toast.error(messages?.error);
+    }
+  };
+
+  const onCancel = () => {
+    onClose();
+    resetStep();
+  };
+
+  return {
+    onConfirm,
+    onCancel,
+  };
+};

apps/backoffice/src/app/(protected)/permissions/page.tsx

@@ -0,0 +1,202 @@
+import { FC, Fragment, ReactElement, useState } from 'react';
+import {
+  SearchOutlined,
+  EditOutlined,
+  DeleteOutlined,
+  PlusOutlined,
+} from '@ant-design/icons';
+import { Button, Input } from '@imphnen-frontend-service/ui/atoms';
+import { DataTable } from '@imphnen-frontend-service/ui/organisms';
+import {
+  ColumnDef,
+  getCoreRowModel,
+  getPaginationRowModel,
+  PaginationState,
+  RowSelectionState,
+  useReactTable,
+} from '@tanstack/react-table';
+import ModalAddPermission from './_components/modal-add-permission';
+import ModalUpdatePermission from './_components/modal-update-permission';
+import ModalDeletePermission from './_components/modal-delete-permission';
+import { useQueryState } from '@imphnen-frontend-service/utils';
+import React from 'react';
+
+interface Permission {
+  id: number;
+  name: string;
+}
+
+const mockData: Permission[] = [
+  { id: 1, name: 'Read' },
+  { id: 2, name: 'Create' },
+  { id: 3, name: 'Update' },
+  { id: 4, name: 'Delete' },
+];
+
+export const Components: FC = (): ReactElement => {
+  const [showModalAddItem, setShowModalAddItem] = useState(false);
+  const [showModalUpdateItem, setShowModalUpdateItem] = useState(false);
+  const [showModalDeleteItem, setShowModalDeleteItem] = useState(false);
+
+  const {
+    step: currentStep,
+    nextStep,
+    prevStep,
+    resetStep,
+  } = useQueryState('step', {
+    defaultValue: 1,
+    maxValue: 2,
+    minValue: 1,
+  });
+
+  const [pagination, setPagination] = React.useState<PaginationState>({
+    pageIndex: 0,
+    pageSize: 9,
+  });
+
+  const [rowSelection, setRowSelection] = React.useState<RowSelectionState>({});
+
+  const columns: ColumnDef<Permission>[] = [
+    {
+      id: 'select',
+      header: ({ table }) => (
+        <input
+          type="checkbox"
+          className="rounded"
+          checked={table.getIsAllRowsSelected()}
+          onChange={table.getToggleAllRowsSelectedHandler()}
+        />
+      ),
+      cell: ({ row }) => (
+        <input
+          type="checkbox"
+          className="rounded"
+          checked={row.getIsSelected()}
+          onChange={row.getToggleSelectedHandler()}
+        />
+      ),
+    },
+    {
+      header: 'No',
+      accessorKey: 'id',
+    },
+    {
+      header: 'Name',
+      accessorKey: 'name',
+    },
+    {
+      header: 'Action',
+      cell: () => (
+        <div className="flex gap-[8px]">
+          <Button
+            variant="primary"
+            size="sm"
+            onClick={(e) => {
+              e.stopPropagation();
+              setShowModalUpdateItem(true);
+            }}
+            className="flex items-center gap-2"
+          >
+            <EditOutlined /> Update
+          </Button>
+          <Button
+            variant="danger"
+            size="sm"
+            onClick={(e) => {
+              e.stopPropagation();
+              setShowModalDeleteItem(true);
+            }}
+            className="flex items-center gap-2"
+          >
+            <DeleteOutlined /> Delete
+          </Button>
+        </div>
+      ),
+    },
+  ];
+
+  const table = useReactTable({
+    data: mockData,
+    columns,
+    state: {
+      pagination,
+      rowSelection,
+    },
+    enableRowSelection: true,
+    onRowSelectionChange: setRowSelection,
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    onPaginationChange: setPagination,
+    pageCount: Math.ceil(mockData.length / pagination.pageSize),
+    manualPagination: false,
+  });
+
+  return (
+    <Fragment>
+      <main className="w-full px-[48px] py-[40px] flex flex-col gap-8">
+        <header className="bg-white py-4 px-8 rounded-lg shadow p-4">
+          <h1 className="text-p2 font-semibold">Permissions</h1>
+        </header>
+
+        <section className="flex flex-col gap-6 p-8 bg-white rounded-md">
+          <div className="flex justify-between items-center gap-8 mb-2">
+            <div className="relative w-full">
+              <Input
+                placeholder="Cari berdasarkan nama permissions"
+                className="pl-12 w-full max-h-full"
+              />
+              <div className="absolute left-3 top-1/2 transform -translate-y-1/2 text-[16px]">
+                <SearchOutlined />
+              </div>
+            </div>
+            <div className="relative">
+              <Button
+                variant="primary"
+                size="md"
+                className="flex gap-3 text-nowrap"
+                onClick={() => {
+                  setShowModalAddItem(true);
+                }}
+              >
+                <PlusOutlined />
+                Tambah Permissionss
+              </Button>
+            </div>
+          </div>
+
+          <DataTable
+            data={mockData}
+            columns={columns}
+            pageSize={9}
+            table={table}
+          />
+        </section>
+      </main>
+
+      <ModalAddPermission
+        currentStep={currentStep}
+        isOpen={showModalAddItem}
+        onClose={() => setShowModalAddItem(false)}
+        nextStep={nextStep}
+        prevStep={prevStep}
+        resetStep={resetStep}
+      />
+      <ModalUpdatePermission
+        isOpen={showModalUpdateItem}
+        onClose={() => setShowModalUpdateItem(false)}
+        nextStep={nextStep}
+        prevStep={prevStep}
+        resetStep={resetStep}
+      />
+      <ModalDeletePermission
+        isOpen={showModalDeleteItem}
+        onClose={() => setShowModalDeleteItem(false)}
+        nextStep={nextStep}
+        prevStep={prevStep}
+        resetStep={resetStep}
+      />
+    </Fragment>
+  );
+};
+
+export default Components;

apps/backoffice/src/app/(protected)/prizes/_components/modal-process-item.tsx

@@ -0,0 +1,84 @@
+import { Button } from '@imphnen-frontend-service/ui/atoms';
+import { InputField, Modal } from '@imphnen-frontend-service/ui/molecules';
+
+interface IModalProcessDelivery {
+  isOpen: boolean;
+  onClose: () => void;
+  handleProcessDelivery?: () => void;
+}
+
+const ModalProcessDelivery = ({
+  isOpen,
+  onClose,
+  handleProcessDelivery,
+}: IModalProcessDelivery) => {
+  return (
+    <Modal
+      className="min-w-[400px] bg-primary-50 rounded-lg p-[40px] flex flex-col gap-8 text-center"
+      isOpen={isOpen}
+      onClose={onClose}
+      disableEscapeKeyDown={true}
+    >
+      <Modal.Header>
+        <h2 className="text-p1 font-semibold text-primary-500 mb-3">
+          Delivery Process
+        </h2>
+        <p className="text-p3 text-neutral-400">
+          Lakukan pengiriman hadiah gacha untuk pengguna di bawah ini, jika
+          sudah ubah status menjadi “Delivered”.
+        </p>
+      </Modal.Header>
+      <Modal.Content className="flex flex-col gap-8">
+        <div className="flex flex-col gap-4">
+          <InputField
+            label="Nama Lengkap"
+            type="text"
+            placeholder="Masukkan Nama Lengkap"
+            value="Ahmad Wiyana"
+            size="lg"
+            className="w-full"
+            readOnly
+          />
+          <InputField
+            label="Item yang didapatkan"
+            type="text"
+            placeholder="Masukkan Nama Item"
+            value="Lanyard + ID Card"
+            size="lg"
+            className="w-full"
+            readOnly
+          />
+          <InputField
+            label="Alamat Pengiriman"
+            type="text"
+            placeholder="Masukkan Alamat Pengiriman"
+            value="Jl. Pantai Cibaduyut Indah"
+            size="lg"
+            className="w-full"
+            readOnly
+          />
+          <InputField
+            label="Status"
+            type="text"
+            placeholder="Isi Status Pengiriman"
+            value="Lanyard + ID Card"
+            size="lg"
+            className="w-full"
+            readOnly
+          />
+        </div>
+
+        <Button
+          variant="primary"
+          size="lg"
+          className="w-full"
+          onClick={() => handleProcessDelivery && handleProcessDelivery()}
+        >
+          Proses Pengiriman
+        </Button>
+      </Modal.Content>
+    </Modal>
+  );
+};
+
+export default ModalProcessDelivery;

apps/backoffice/src/app/(protected)/prizes/page.tsx

@@ -0,0 +1,251 @@
+import * as React from 'react';
+
+import { FC, Fragment, ReactElement, useState } from 'react';
+import {
+  FilterOutlined,
+  SearchOutlined,
+  AuditOutlined,
+} from '@ant-design/icons';
+import { Button, Input } from '@imphnen-frontend-service/ui/atoms';
+import { DataTable, Filter } from '@imphnen-frontend-service/ui/organisms';
+
+import {
+  ColumnDef,
+  getCoreRowModel,
+  getPaginationRowModel,
+  PaginationState,
+  useReactTable,
+  RowSelectionState,
+} from '@tanstack/react-table';
+import ModalProcessDelivery from './_components/modal-process-item';
+
+type OrderValid = 'valid' | 'invalid' | 'unchecked';
+type Status = 'undelivered' | 'delivered';
+
+interface Prize {
+  id: number;
+  name: string;
+  orderValid: OrderValid;
+  items: string;
+  address: string;
+  status: Status;
+}
+
+const items = [
+  'Sertifikat + Laminating',
+  'Lanyard + ID Card',
+  'Pin',
+  'Sticker Isi 3',
+  'Sticker Isi 5',
+  'Gelang Karet',
+];
+
+// Mock data for transactions
+const mockData: Prize[] = Array.from({ length: 90 }, (_, i) => ({
+  id: i + 1,
+  name: 'Nama Lengkap',
+  orderValid: (i % 3 === 0
+    ? 'invalid'
+    : i % 5 === 0
+    ? 'unchecked'
+    : 'valid') as OrderValid,
+  items: items[i % items.length],
+  address: 'Jl. Pantai Cibaduyut Indah',
+  status: (i % 3 === 0 ? 'undelivered' : 'delivered') as Status,
+}));
+
+export const Components: FC = (): ReactElement => {
+  const [showModalProcessDelivery, setShowModalProcessDelivery] =
+    useState(false);
+
+  const [pagination, setPagination] = React.useState<PaginationState>({
+    pageIndex: 0,
+    pageSize: 9,
+  });
+
+  const [rowSelection, setRowSelection] = React.useState<RowSelectionState>({});
+  const [showFilter, setShowFilter] = useState(false);
+
+  const deliveryOptions = [
+    { id: 'option1', value: 'undelivered', label: 'Undelivered' },
+    { id: 'option1', value: 'delivered', label: 'Delivered' },
+  ];
+
+  const columns: ColumnDef<Prize>[] = [
+    {
+      id: 'select',
+      header: ({ table }) => (
+        <input
+          type="checkbox"
+          className="rounded"
+          checked={table.getIsAllRowsSelected()}
+          onChange={table.getToggleAllRowsSelectedHandler()}
+        />
+      ),
+      cell: ({ row }) => (
+        <input
+          type="checkbox"
+          className="rounded"
+          checked={row.getIsSelected()}
+          onChange={row.getToggleSelectedHandler()}
+        />
+      ),
+    },
+    {
+      header: 'No',
+      accessorKey: 'id',
+    },
+    {
+      header: 'Nama Lengkap',
+      accessorKey: 'name',
+    },
+    {
+      header: 'Order Valid?',
+      accessorKey: 'orderValid',
+      cell: ({ row }) => {
+        const status = row.original.orderValid;
+        const statusColors: Record<OrderValid, string> = {
+          valid: 'bg-success-200 text-success-500',
+          invalid: 'bg-danger-200 text-danger-500',
+          unchecked: 'bg-warning-200 text-warning-900',
+        };
+        const statusText: Record<OrderValid, string> = {
+          valid: 'Valid',
+          invalid: 'Invalid',
+          unchecked: 'Unchecked',
+        };
+        return (
+          <div
+            className={`py-2 px-4 rounded-md text-center ${statusColors[status]}`}
+          >
+            {statusText[status]}
+          </div>
+        );
+      },
+    },
+    {
+      header: 'Items',
+      accessorKey: 'items',
+    },
+    {
+      header: 'Alamat Pengiriman',
+      accessorKey: 'address',
+    },
+    {
+      header: 'Status',
+      accessorKey: 'status',
+      cell: ({ row }) => {
+        const status = row.original.status;
+        const statusColors: Record<Status, string> = {
+          delivered: 'bg-success-200 text-success-500',
+          undelivered: 'bg-danger-200 text-danger-500',
+        };
+        const statusText: Record<Status, string> = {
+          delivered: 'Delivered',
+          undelivered: 'Undelivered',
+        };
+        return (
+          <div
+            className={`py-2 px-4 rounded-md text-center ${statusColors[status]}`}
+          >
+            {statusText[status]}
+          </div>
+        );
+      },
+    },
+    {
+      header: 'Action',
+      cell: ({ row }) => (
+        <Button
+          variant="primary"
+          size="sm"
+          onClick={(e) => {
+            e.stopPropagation();
+            setShowModalProcessDelivery(true);
+          }}
+          className="flex items-center gap-2 w-full"
+        >
+          <AuditOutlined className="text-[16px]" /> Process
+        </Button>
+      ),
+    },
+  ];
+
+  const table = useReactTable({
+    data: mockData,
+    columns,
+    state: {
+      pagination,
+      rowSelection,
+    },
+    enableRowSelection: true,
+    onRowSelectionChange: setRowSelection,
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    onPaginationChange: setPagination,
+    pageCount: Math.ceil(mockData.length / pagination.pageSize),
+    manualPagination: false,
+  });
+
+  return (
+    <Fragment>
+      <main className="w-full px-[48px] py-[40px] flex flex-col gap-8">
+        {/* Header */}
+        <header className="bg-white py-4 px-8 rounded-lg shadow p-4">
+          <h1 className="text-p2 font-semibold">Data Pengiriman Hadiah</h1>
+        </header>
+        {/* Account Table Section */}
+        <section className="flex flex-col gap-6 p-8 bg-white rounded-md">
+          {/* Search and Filter */}
+          <div className="flex justify-between items-center gap-8 mb-2">
+            <div className="relative w-full">
+              <Input
+                placeholder="Cari berdasarkan nama lengkap, nomor order Shopee"
+                className="pl-12 w-full max-h-full"
+              />
+              <div className="absolute left-3 top-1/2 transform -translate-y-1/2 text-[16px]">
+                <SearchOutlined />
+              </div>
+            </div>
+            <div className="relative">
+              <Button
+                variant="primary"
+                size="md"
+                className="flex items-center gap-3"
+                onClick={() => setShowFilter(!showFilter)}
+              >
+                <FilterOutlined />
+                Filters
+              </Button>
+              {showFilter && (
+                <div className="absolute right-0 top-[calc(100%+12px)] z-10 shadow-lg">
+                  <Filter
+                    options={deliveryOptions}
+                    onClose={() => setShowFilter(false)}
+                    onFilterChange={(value) => {
+                      console.log('Selected filter:', value);
+                      // Filter logic di sini
+                    }}
+                  />
+                </div>
+              )}
+            </div>
+          </div>
+          {/* Table */}
+          <DataTable data={mockData} columns={columns} table={table} />
+        </section>
+      </main>
+
+      {/* Modal Process Delivery */}
+      <ModalProcessDelivery
+        isOpen={showModalProcessDelivery}
+        onClose={() => setShowModalProcessDelivery(false)}
+        handleProcessDelivery={() => {
+          console.log('Action ketika user menekan tombol Proses Pengiriman');
+        }}
+      />
+    </Fragment>
+  );
+};
+
+export default Components;

apps/backoffice/src/app/(protected)/roadmap-dimentorin/_components/modal/create-roadmap/index.tsx

@@ -0,0 +1,85 @@
+import { ArrowRightOutlined } from "@ant-design/icons";
+import { Button, Input, Select, Textarea } from "@imphnen-frontend-service/ui/atoms";
+import { Accordion, Modal, ModalProps } from "@imphnen-frontend-service/ui/molecules";
+import { cn, For } from "@imphnen-frontend-service/utils";
+import { FC } from "react";
+
+const labelClass = cn('text-neutral-800 text-[10px] font-medium mb-1.5 inline-block md:text-xs md:mb-2 xl:text-p3')
+
+export const ModalCreateRoadmap: FC<Omit<ModalProps, 'children'>> = ({ isOpen, onClose }) => {
+  return (
+    <Modal
+      isOpen={isOpen}
+      onClose={onClose}
+      className="xl:max-w-[64rem] bg-white px-10 py-9"
+      closeButtonClassName="hidden"
+    >
+      <div className="overflow-y-auto max-h-[80vh]">
+        <h1 className="bg-primary-50 px-6 py-3 text-neutral-800 text-p2 font-semibold mb-8">
+          Create Roadmaps
+        </h1>
+
+        <div className="grid grid-cols-5 gap-6 mb-12">
+          <div className="col-span-3">
+            <label className={labelClass}>Prompt</label>
+            <Textarea
+              className="min-w-full w-full h-[calc(100%-2rem)]"
+              placeholder="Create a learning roadmap for (subject) at the (level) level. Include topics, estimated duration, and logical progression."
+            />
+          </div>
+          <div className="col-span-2 space-y-8">
+            <div>
+              <label className={labelClass}>Roadmap Name</label>
+              <Input type="text" className="min-w-full w-full" placeholder="Nama Roadmap" />
+            </div>
+            <div>
+              <label className={labelClass}>Roadmap Name</label>
+              <Select className="w-full">
+                <option value="pemula">Pemula</option>
+                <option value="menengah">Menengah</option>
+              </Select>
+            </div>
+            <div>
+              <label className={labelClass}>Model</label>
+              <Select className="w-full">
+                <option value="gpt-3.5-turbo">GPT 3.5 Turbo</option>
+                <option value="gpt-4">GPT 4</option>
+                <option value="gpt-4-32k">GPT 4 32k</option>
+              </Select>
+            </div>
+          </div>
+          
+          <div className="col-span-full">
+            <Button>
+              Generate Roadmap
+            </Button>
+          </div>
+        </div>
+
+        <div>
+          <h2 className="text-neutral-600 text-p2 font-semibold mb-8">
+            Roadmap Preview
+          </h2>
+          <div className="space-y-2.5">
+            <For data={Array.from({ length: 3 })}>
+              {(_, index) => (
+                <Accordion
+                  key={index}
+                  title={`Day ${index + 1}`}
+                  description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. In convallis tincidunt nisl, id consequat mi malesuada vel. Nulla facilisi. Nam in turpis ligula."
+                />
+              )}
+            </For>
+          </div>
+        </div>
+
+        <div className="flex justify-end mt-12">
+          <Button type="button" className="flex items-center gap-5">
+            Submit Roadmap
+            <ArrowRightOutlined />
+          </Button>
+        </div>
+      </div>
+    </Modal>
+  )
+}

apps/backoffice/src/app/(protected)/roadmap-dimentorin/page.tsx

@@ -0,0 +1,174 @@
+import { DeleteOutlined, EditOutlined, PlusOutlined, SearchOutlined } from "@ant-design/icons";
+import { Button, Input, Select } from "@imphnen-frontend-service/ui/atoms";
+import { BackofficeWrapper, DataTable } from "@imphnen-frontend-service/ui/organisms";
+import { cn } from "@imphnen-frontend-service/utils";
+import { ColumnDef, getCoreRowModel, getPaginationRowModel, PaginationState, RowSelectionState, useReactTable } from "@tanstack/react-table";
+import { useState } from "react";
+import { ModalCreateRoadmap } from "./_components/modal/create-roadmap";
+
+type LearningStatus = 'active' | 'inactive'
+
+type RoadmapType = {
+  id: number
+  name: string
+  learningLevel: string
+  status: LearningStatus
+}
+
+const mockData: RoadmapType[] = Array.from({ length: 90 }, (_, i) => ({
+  id: i + 1,
+  name: i === 0 ? 'Ahmad Wijuana' : 'Anna Wiguana',
+  learningLevel: ['Pemula', 'Menengah'][Math.floor(Math.random() * 2)],
+  status: i % 2 === 0 ? 'active' : 'inactive',
+}))
+
+export default function Components(): React.ReactElement {
+  const [openCreateModal, setOpenCreateModal] = useState(false)
+
+  const [rowSelection, setRowSelection] = useState<RowSelectionState>({})
+  const [pagination, setPagination] = useState<PaginationState>({
+    pageIndex: 0,
+    pageSize: 9,
+  });
+
+  const columns: ColumnDef<RoadmapType>[] = [
+    {
+      id: 'select',
+      meta: { cellClassName: cn("w-20") },
+      header: ({ table }) => (
+        <input
+          type="checkbox"
+          className="rounded"
+          checked={table.getIsAllRowsSelected()}
+          onChange={table.getToggleAllRowsSelectedHandler()}
+        />
+      ),
+      cell: ({ row }) => (
+        <input
+          type="checkbox"
+          className="rounded"
+          checked={row.getIsSelected()}
+          onChange={row.getToggleSelectedHandler()}
+        />
+      ),
+    },
+    {
+      id: 'id',
+      header: 'No',
+      accessorKey: 'id',
+    },
+    {
+      id: 'name',
+      header: 'Nama Roadmap',
+      accessorKey: 'name',
+    },
+    {
+      id: 'learningLevel',
+      header: 'Tingkat Belajar',
+      accessorKey: 'learningLevel',
+    },
+    {
+      id: 'status',
+      header: 'Status',
+      accessorKey: 'status',
+      cell: ({ row }) => {
+        const status = row.original.status;
+        const statusColors: Record<LearningStatus, string> = {
+          inactive: 'bg-danger-200 text-danger-700',
+          active: 'bg-success-200 text-success-500',
+        };
+        const statusText: Record<LearningStatus, string> = {
+          inactive: 'Inactive',
+          active: 'Active',
+        };
+        return (
+          <div
+            className={`py-2 px-4 rounded-md text-center ${statusColors[status]}`}
+          >
+            {statusText[status]}
+          </div>
+        );
+      },
+    },
+    {
+      header: 'Action',
+      meta: { cellClassName: cn("w-72") },
+      cell: ({ row }) => (
+        <div className="flex gap-[8px]">
+          <Button
+            variant="primary"
+            size="sm"
+            onClick={(e) => {
+              e.stopPropagation();
+            }}
+            className="flex items-center gap-2"
+          >
+            <EditOutlined /> Action
+          </Button>
+          <Button
+            variant="danger"
+            size="sm"
+            onClick={(e) => {
+              e.stopPropagation();
+            }}
+            className="flex items-center gap-2"
+          >
+            <DeleteOutlined /> Delete
+          </Button>
+        </div>
+      ),
+    },
+  ]
+
+  const table = useReactTable({
+    data: mockData,
+    columns,
+    state: {
+      pagination,
+      rowSelection,
+    },
+    enableRowSelection: true,
+    onRowSelectionChange: setRowSelection,
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    onPaginationChange: setPagination,
+    pageCount: Math.ceil(mockData.length / pagination.pageSize),
+    manualPagination: false,
+  });
+
+  return (
+    <BackofficeWrapper title="Dimentorin.dev">
+      <h1 className="text-p1 font-semibold text-neutral-700 mb-8">Content & Roadmap</h1>
+
+      <section className="flex flex-col gap-6 p-8 bg-white rounded-md">
+        <div className="flex items-center justify-between mb-9">
+          <h2 className="text-p2 font-semibold text-neutral-600">AI Roadmaps</h2>
+          <Button type="button" variant="primary" className="flex items-center gap-2" onClick={() => setOpenCreateModal(true)}>
+            <PlusOutlined /> Buat Roadmap
+          </Button>
+        </div>
+
+        <div className="flex justify-between items-center gap-5 mb-2">
+          <div className="relative w-full">
+            <Input
+              placeholder="Cari berdasarkan nama roadmap"
+              className="pl-12 w-full max-h-full"
+            />
+            <div className="absolute left-3 top-1/2 transform -translate-y-1/2 text-[16px]">
+              <SearchOutlined />
+            </div>
+          </div>
+          <Select>
+            <option selected disabled>Tingkat Belajar</option>
+            <option value="pemula">Pemula</option>
+            <option value="menengah">Menengah</option>
+          </Select>
+        </div>
+
+        <DataTable data={mockData} columns={columns} table={table} />
+      </section>
+
+      <ModalCreateRoadmap isOpen={openCreateModal} onClose={() => setOpenCreateModal(false)} />
+    </BackofficeWrapper>
+  )
+}

apps/backoffice/src/app/(protected)/roles/_components/modal-add-role.tsx

@@ -0,0 +1,185 @@
+import { Button } from '@imphnen-frontend-service/ui/atoms';
+import { Modal } from '@imphnen-frontend-service/ui/molecules';
+import { ControlledInputField } from '@imphnen-frontend-service/ui/organisms';
+import { useItem, useConfirmItem } from '../_hook/use-item';
+
+interface IModalAddRole {
+  isOpen: boolean;
+  onClose: () => void;
+  handleAdd?: () => Promise<boolean>;
+  currentStep?: number;
+  nextStep: () => void;
+  prevStep: () => void;
+  resetStep: () => void;
+}
+
+const ModalAddRole = ({
+  isOpen,
+  onClose,
+  currentStep,
+  nextStep,
+  resetStep,
+  handleAdd,
+}: IModalAddRole) => {
+  return (
+    <Modal
+      className="min-w-[400px] bg-primary-50 rounded-lg p-[40px] flex flex-col gap-0 text-center"
+      isOpen={isOpen}
+      onClose={() => {
+        onClose();
+        resetStep();
+      }}
+      disableEscapeKeyDown={true}
+    >
+      {currentStep === 1 && <StepOne nextStep={nextStep} onClose={onClose} />}
+      {currentStep === 2 && (
+        <StepTwo
+          onClose={onClose}
+          handleAdd={handleAdd}
+          resetStep={resetStep}
+        />
+      )}
+    </Modal>
+  );
+};
+
+interface IStepOneProps {
+  nextStep: () => void;
+  onClose: () => void;
+}
+
+const StepOne = ({ nextStep }: IStepOneProps) => {
+  const { form, onSubmit } = useItem(nextStep);
+
+  return (
+    <>
+      <Modal.Header>
+        <h2 className="text-p1 font-semibold text-primary-500 mb-3">
+          Tambah Roles
+        </h2>
+      </Modal.Header>
+      <Modal.Content>
+        <form onSubmit={onSubmit} className="flex flex-col gap-8">
+          <div className="flex flex-col gap-4">
+            <ControlledInputField
+              control={form.control}
+              label="Nama Role"
+              name="name"
+              type="text"
+              placeholder="Masukkan Nama Role"
+              size="lg"
+              className="w-full"
+            />
+          </div>
+
+          <div className="flex flex-col gap-4 items-start overflow-auto">
+            <span className="text-p3 font-medium text-neutral-800 sticky left-0">
+              Permissions
+            </span>
+            <div className="flex gap-x-6 overflow-x-scroll">
+              {[
+                'Gacha Items',
+                'Gacha Roll',
+                'Roll',
+                'Users',
+                'Gacha Claim',
+              ].map((title) => (
+                <div
+                  key={title}
+                  className="flex flex-col gap-4 select-none text-label2 font-medium text-neutral-900 "
+                >
+                  <span className="text-nowrap text-label1">{title}</span>
+                  <div className="flex gap-[8px] items-center">
+                    <input
+                      type="checkbox"
+                      id={`${title}-all`}
+                      className="rounded"
+                    />
+                    <label htmlFor={`${title}-all`} className="text-nowrap">
+                      Check All
+                    </label>
+                  </div>
+                  <hr className="border-blue-200" />
+                  <div className="flex flex-col items-start gap-4 mb-4">
+                    <div className="flex gap-[8px] items-center">
+                      <input type="checkbox" id={`${title}-read`} />
+                      <label htmlFor={`${title}-read`}>Read</label>
+                    </div>
+                    <div className="flex gap-[8px] items-center">
+                      <input type="checkbox" id={`${title}-create`} />
+                      <label htmlFor={`${title}-create`}>Create</label>
+                    </div>
+                    <div className="flex gap-[8px] items-center">
+                      <input type="checkbox" id={`${title}-update`} />
+                      <label htmlFor={`${title}-update`}>Update</label>
+                    </div>
+                    <div className="flex gap-[8px] items-center">
+                      <input type="checkbox" id={`${title}-delete`} />
+                      <label htmlFor={`${title}-delete`}>Delete</label>
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+
+          <Button variant="primary" size="lg" className="w-full" type="submit">
+            Tambah Role
+          </Button>
+        </form>
+      </Modal.Content>
+    </>
+  );
+};
+
+interface IStepTwoProps {
+  onClose: () => void;
+  handleAdd?: () => Promise<boolean>;
+  resetStep: () => void;
+}
+
+const StepTwo = ({ onClose, handleAdd, resetStep }: IStepTwoProps) => {
+  const { onConfirm, onCancel } = useConfirmItem(
+    onClose,
+    resetStep,
+    handleAdd,
+    {
+      success: 'Data role berhasil ditambahkan',
+      error: 'Data role gagal ditambahkan',
+    }
+  );
+
+  return (
+    <>
+      <Modal.Header className="mb-10 text-center items-center">
+        <h2 className="text-p1 font-semibold text-primary-500 mb-3">
+          Tambah Roles
+        </h2>
+        <p className="text-p3 text-center text-neutral-400">
+          Apakah kamu yakin ingin
+          <br /> menambahkan role ini?
+        </p>
+      </Modal.Header>
+      <Modal.Content className="flex mb-0 gap-4">
+        <Button
+          variant="bordered"
+          size="lg"
+          className="w-full"
+          onClick={onCancel}
+        >
+          Batal
+        </Button>
+        <Button
+          variant="primary"
+          size="lg"
+          className="w-full"
+          onClick={onConfirm}
+        >
+          Tambahkan
+        </Button>
+      </Modal.Content>
+    </>
+  );
+};
+
+export default ModalAddRole;

apps/backoffice/src/app/(protected)/roles/_components/modal-delete-role.tsx

@@ -0,0 +1,72 @@
+import { Button } from '@imphnen-frontend-service/ui/atoms';
+import { Modal } from '@imphnen-frontend-service/ui/molecules';
+import { useConfirmItem } from '../_hook/use-item';
+
+interface IModalDeletePermission {
+  isOpen: boolean;
+  onClose: () => void;
+  handleDelete?: () => Promise<boolean>;
+  currentStep?: number;
+  nextStep: () => void;
+  prevStep: () => void;
+  resetStep: () => void;
+}
+
+const ModalDeletePermission = ({
+  isOpen,
+  onClose,
+  resetStep,
+  handleDelete,
+}: IModalDeletePermission) => {
+  const { onConfirm } = useConfirmItem(onClose, resetStep, handleDelete, {
+    success: 'Data roles berhasil dihapus',
+    error: 'Data roles gagal dihapus',
+  });
+
+  return (
+    <Modal
+      className="min-w-[400px] bg-primary-50 rounded-lg p-[40px] flex flex-col gap-8 text-center"
+      isOpen={isOpen}
+      onClose={onClose}
+      closeButtonClassName="hidden"
+    >
+      <Modal.Header className="gap-8">
+        <img
+          src="/chibi-delete.webp"
+          alt="Delete?"
+          width={148}
+          className="self-center"
+        />
+        <div className="text-center">
+          <h2 className="text-p1 font-semibold text-danger-500 mb-3">
+            Delete Roles
+          </h2>
+          <p className="text-p3 text-neutral-400">
+            Apakah kamu yakin untuk menghapus role ini? Menghapus data ini
+            mungkin akan mempengaruhi fungsional sistem
+          </p>
+        </div>
+      </Modal.Header>
+      <Modal.Content className="flex gap-4">
+        <Button
+          variant="secondary"
+          size="lg"
+          className="w-full"
+          onClick={onClose}
+        >
+          Batal Hapus
+        </Button>
+        <Button
+          variant="primary"
+          size="lg"
+          className="w-full bg-danger-500 hover:bg-danger-600"
+          onClick={onConfirm}
+        >
+          Hapus Role
+        </Button>
+      </Modal.Content>
+    </Modal>
+  );
+};
+
+export default ModalDeletePermission;

apps/backoffice/src/app/(protected)/roles/_components/modal-update-role.tsx

@@ -0,0 +1,111 @@
+import { Button } from '@imphnen-frontend-service/ui/atoms';
+import { InputField, Modal } from '@imphnen-frontend-service/ui/molecules';
+import { useConfirmItem } from '../_hook/use-item';
+
+interface IModalUpdatePermission {
+  isOpen: boolean;
+  onClose: () => void;
+  handleUpdate?: () => Promise<boolean>;
+  currentStep?: number;
+  nextStep: () => void;
+  prevStep: () => void;
+  resetStep: () => void;
+}
+
+const ModalUpdatePermission = ({
+  isOpen,
+  onClose,
+  resetStep,
+  handleUpdate,
+}: IModalUpdatePermission) => {
+  const { onConfirm } = useConfirmItem(onClose, resetStep, handleUpdate, {
+    success: 'Perubahan roles berhasil dilakukan',
+    error: 'Perubahan roles gagal dilakukan',
+  });
+
+  return (
+    <Modal
+      className="min-w-[400px] bg-primary-50 rounded-lg p-[40px] flex flex-col gap-0 text-center"
+      isOpen={isOpen}
+      onClose={onClose}
+      disableEscapeKeyDown={true}
+    >
+      <Modal.Header>
+        <h2 className="text-p1 font-semibold text-primary-500 mb-3">
+          Update Roles
+        </h2>
+      </Modal.Header>
+      <Modal.Content className="flex flex-col gap-8">
+        <div className="flex flex-col gap-4">
+          <InputField
+            label="Nama Role"
+            name="name"
+            type="text"
+            placeholder="Masukkan Nama Role"
+            size="lg"
+            className="w-full"
+          />
+        </div>
+
+        <div className="flex flex-col gap-4 items-start overflow-auto">
+          <span className="text-p3 font-medium text-neutral-800 sticky left-0">
+            Permissions
+          </span>
+          <div className="flex gap-x-6 overflow-x-scroll">
+            {['Gacha Items', 'Gacha Roll', 'Roll', 'Users', 'Gacha Claim'].map(
+              (title) => (
+                <div
+                  key={title}
+                  className="flex flex-col gap-4 select-none text-label2 font-medium text-neutral-900 "
+                >
+                  <span className="text-nowrap text-label1">{title}</span>
+                  <div className="flex gap-[8px] items-center">
+                    <input
+                      type="checkbox"
+                      id={`${title}-all`}
+                      className="rounded"
+                    />
+                    <label htmlFor={`${title}-all`} className="text-nowrap">
+                      Check All
+                    </label>
+                  </div>
+                  <hr className="border-blue-200" />
+                  <div className="flex flex-col items-start gap-4 mb-4">
+                    <div className="flex gap-[8px] items-center">
+                      <input type="checkbox" id={`${title}-read`} />
+                      <label htmlFor={`${title}-read`}>Read</label>
+                    </div>
+                    <div className="flex gap-[8px] items-center">
+                      <input type="checkbox" id={`${title}-create`} />
+                      <label htmlFor={`${title}-create`}>Create</label>
+                    </div>
+                    <div className="flex gap-[8px] items-center">
+                      <input type="checkbox" id={`${title}-update`} />
+                      <label htmlFor={`${title}-update`}>Update</label>
+                    </div>
+                    <div className="flex gap-[8px] items-center">
+                      <input type="checkbox" id={`${title}-delete`} />
+                      <label htmlFor={`${title}-delete`}>Delete</label>
+                    </div>
+                  </div>
+                </div>
+              )
+            )}
+          </div>
+        </div>
+
+        <Button
+          variant="primary"
+          size="lg"
+          className="w-full"
+          type="submit"
+          onClick={onConfirm}
+        >
+          Update Role
+        </Button>
+      </Modal.Content>
+    </Modal>
+  );
+};
+
+export default ModalUpdatePermission;

apps/backoffice/src/app/(protected)/roles/_hook/use-item.ts

@@ -0,0 +1,61 @@
+import { useForm } from 'react-hook-form';
+// import { zodResolver } from '@hookform/resolvers/zod';
+// import {
+//   gachaRollItemSchema,
+//   TGachaRollItem
+// } from '@imphnen-frontend-service/service';
+import { toast } from 'sonner';
+
+export const useItem = (
+  nextStep: () => void,
+  initialValues?: any
+) => {
+  const form = useForm<any>({
+    // resolver: zodResolver(),
+    mode: 'all',
+    defaultValues: initialValues,
+  });
+
+  const onSubmit = form.handleSubmit((data) => {
+    console.log('Form data:', data);
+    nextStep();
+  });
+
+  return {
+    form,
+    onSubmit,
+  };
+};
+
+export const useConfirmItem = (
+  onClose: () => void,
+  resetStep: () => void,
+  actionFunction?: () => Promise<boolean>,
+  messages?: {
+    success?: string;
+    error?: string;
+  }
+) => {
+  const onConfirm = async () => {
+    try {
+      // const result = await actionFunction?.();
+      // result ? toast.success(messages?.success) : toast.error(messages?.error);
+      toast.success(messages?.success);
+      onClose();
+      resetStep();
+    } catch (error) {
+      console.log(error);
+      toast.error(messages?.error);
+    }
+  };
+
+  const onCancel = () => {
+    onClose();
+    resetStep();
+  };
+
+  return {
+    onConfirm,
+    onCancel,
+  };
+};

apps/backoffice/src/app/(protected)/roles/page.tsx

@@ -0,0 +1,203 @@
+import { FC, Fragment, ReactElement, useState } from 'react';
+import {
+  SearchOutlined,
+  EditOutlined,
+  DeleteOutlined,
+  PlusOutlined,
+} from '@ant-design/icons';
+import { Button, Input } from '@imphnen-frontend-service/ui/atoms';
+import { DataTable } from '@imphnen-frontend-service/ui/organisms';
+import {
+  ColumnDef,
+  getCoreRowModel,
+  getPaginationRowModel,
+  PaginationState,
+  RowSelectionState,
+  useReactTable,
+} from '@tanstack/react-table';
+import ModalAddRole from './_components/modal-add-role';
+import ModalUpdateRole from './_components/modal-update-role';
+import ModalDeleteRole from './_components/modal-delete-role';
+import { useQueryState } from '@imphnen-frontend-service/utils';
+import React from 'react';
+
+interface Role {
+  id: number;
+  name: string;
+}
+
+const mockData: Role[] = [
+  { id: 1, name: 'Admin' },
+  { id: 2, name: 'Admin Pembayaran' },
+  { id: 3, name: 'Staff' },
+  { id: 4, name: 'Staff Aktivasi User' },
+  { id: 5, name: 'User' },
+];
+
+export const Components: FC = (): ReactElement => {
+  const [showModalAddItem, setShowModalAddItem] = useState(false);
+  const [showModalUpdateItem, setShowModalUpdateItem] = useState(false);
+  const [showModalDeleteItem, setShowModalDeleteItem] = useState(false);
+
+  const {
+    step: currentStep,
+    nextStep,
+    prevStep,
+    resetStep,
+  } = useQueryState('step', {
+    defaultValue: 1,
+    maxValue: 2,
+    minValue: 1,
+  });
+
+  const [pagination, setPagination] = React.useState<PaginationState>({
+    pageIndex: 0,
+    pageSize: 9,
+  });
+
+  const [rowSelection, setRowSelection] = React.useState<RowSelectionState>({});
+
+  const columns: ColumnDef<Role>[] = [
+    {
+      id: 'select',
+      header: ({ table }) => (
+        <input
+          type="checkbox"
+          className="rounded"
+          checked={table.getIsAllRowsSelected()}
+          onChange={table.getToggleAllRowsSelectedHandler()}
+        />
+      ),
+      cell: ({ row }) => (
+        <input
+          type="checkbox"
+          className="rounded"
+          checked={row.getIsSelected()}
+          onChange={row.getToggleSelectedHandler()}
+        />
+      ),
+    },
+    {
+      header: 'ID',
+      accessorKey: 'id',
+    },
+    {
+      header: 'Roles Name',
+      accessorKey: 'name',
+    },
+    {
+      header: 'Action',
+      cell: () => (
+        <div className="flex gap-[8px]">
+          <Button
+            variant="primary"
+            size="sm"
+            onClick={(e) => {
+              e.stopPropagation();
+              setShowModalUpdateItem(true);
+            }}
+            className="flex items-center gap-2"
+          >
+            <EditOutlined /> Update
+          </Button>
+          <Button
+            variant="danger"
+            size="sm"
+            onClick={(e) => {
+              e.stopPropagation();
+              setShowModalDeleteItem(true);
+            }}
+            className="flex items-center gap-2"
+          >
+            <DeleteOutlined /> Delete
+          </Button>
+        </div>
+      ),
+    },
+  ];
+
+  const table = useReactTable({
+    data: mockData,
+    columns,
+    state: {
+      pagination,
+      rowSelection,
+    },
+    enableRowSelection: true,
+    onRowSelectionChange: setRowSelection,
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    onPaginationChange: setPagination,
+    pageCount: Math.ceil(mockData.length / pagination.pageSize),
+    manualPagination: false,
+  });
+
+  return (
+    <Fragment>
+      <main className="w-full px-[48px] py-[40px] flex flex-col gap-8">
+        <header className="bg-white py-4 px-8 rounded-lg shadow p-4">
+          <h1 className="text-p2 font-semibold">Roles</h1>
+        </header>
+
+        <section className="flex flex-col gap-6 p-8 bg-white rounded-md">
+          <div className="flex justify-between items-center gap-8 mb-2">
+            <div className="relative w-full">
+              <Input
+                placeholder="Cari berdasarkan nama roles"
+                className="pl-12 w-full max-h-full"
+              />
+              <div className="absolute left-3 top-1/2 transform -translate-y-1/2 text-[16px]">
+                <SearchOutlined />
+              </div>
+            </div>
+            <div className="relative">
+              <Button
+                variant="primary"
+                size="md"
+                className="flex gap-3 text-nowrap"
+                onClick={() => {
+                  setShowModalAddItem(true);
+                }}
+              >
+                <PlusOutlined />
+                Tambah Role
+              </Button>
+            </div>
+          </div>
+
+          <DataTable
+            data={mockData}
+            columns={columns}
+            pageSize={9}
+            table={table}
+          />
+        </section>
+      </main>
+
+      <ModalAddRole
+        currentStep={currentStep}
+        isOpen={showModalAddItem}
+        onClose={() => setShowModalAddItem(false)}
+        nextStep={nextStep}
+        prevStep={prevStep}
+        resetStep={resetStep}
+      />
+      <ModalUpdateRole
+        isOpen={showModalUpdateItem}
+        onClose={() => setShowModalUpdateItem(false)}
+        nextStep={nextStep}
+        prevStep={prevStep}
+        resetStep={resetStep}
+      />
+      <ModalDeleteRole
+        isOpen={showModalDeleteItem}
+        onClose={() => setShowModalDeleteItem(false)}
+        nextStep={nextStep}
+        prevStep={prevStep}
+        resetStep={resetStep}
+      />
+    </Fragment>
+  );
+};
+
+export default Components;

apps/backoffice/src/app/(protected)/session-dimentorin/_components/modal/detail/index.tsx

@@ -0,0 +1,114 @@
+import { Icon } from "@iconify/react";
+import { Input, Select, Textarea } from "@imphnen-frontend-service/ui/atoms";
+import { Modal } from "@imphnen-frontend-service/ui/molecules";
+import { cn, For } from "@imphnen-frontend-service/utils";
+import { FC } from "react";
+
+const TOPICS = [
+  { id: 2, icon: '🏢', name: 'Industry Insight' },
+  { id: 4, icon: '🖥️', name: 'Basic IT' },
+]
+
+const placeholder = `Hi [Nama Mentor], Saya [Nama Kamu] & saya berharap dapat memiliki sesi mentoring dengan Anda.
+  
+Saat ini, saya tertarik untuk mengejar __. Tujuan saya untuk sesi ini adalah __.
+
+Saya ingin tahu secara khusus tentang ___.
+1.Pertanyaan Anda
+2. ...
+3. ...`
+
+const labelClass = cn('text-neutral-800 text-[10px] font-semibold mb-1.5 inline-block md:text-xs md:mb-2 xl:text-[15px]')
+
+type ModalProps = {
+  open: boolean
+  setOpen: (open: boolean) => void
+}
+
+export const ModalDetailSession: FC<ModalProps> = ({ open, setOpen }) => {
+  return (
+    <Modal
+      isOpen={open}
+      onClose={() => setOpen(false)}
+      className="xl:max-w-[64rem] bg-white px-10 py-9"
+      closeButtonClassName="hidden"
+    >
+      <div>
+        <h1 className="bg-primary-50 px-6 py-3 text-neutral-800 text-p2 font-semibold mb-8">
+          Detail Sesi
+        </h1>
+
+        <div className="grid grid-cols-9 px-9 py-7 border rounded-md gap-12 mb-10">
+          <div className="col-span-4 flex items-center gap-x-12">
+            <div>
+              <h2 className="text-p2 font-semibold text-primary-500 mb-4">Mentor</h2>
+              <div>
+                <p className="text-p3 font-semibold mb-2.5">Muhammad Firdaus Oi Oi Oi, S.H., M.H.</p>
+                <p className="text-neutral-600">UI Designer at Oray orayan Studios</p>
+              </div>
+            </div>
+            <Icon icon="ph:arrow-right" className="text-9xl text-primary-500" />
+          </div>
+
+          <div className="col-span-5 flex items-center gap-12">
+            <div>
+              <h2 className="text-p2 font-semibold text-primary-500 mb-4">Mentee</h2>
+              <div>
+                <p className="text-p3 font-semibold mb-2.5">Muhammad Firdaus Oi Oi Oi, S.H., M.H.</p>
+                <p className="text-neutral-600">UI Designer at Oray orayan Studios</p>
+              </div>
+            </div>
+            <div>
+              <h2 className="text-p2 font-semibold text-neutral-700 mb-4">Status</h2>
+              <div className="py-2 px-6 rounded-md text-center bg-success-200 text-success-500 font-semibold">
+                Finished
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div>
+          <h1 className="text-p3 font-medium mb-2.5">Topics</h1>
+          <div className="p-5 bg-primary-50 border border-primary-100 rounded-md flex flex-wrap gap-2.5 mb-8">
+            <For data={TOPICS}>
+              {(item, index) => (
+                <div
+                  key={index}
+                  className="px-2.5 py-2 text-neutral-800 bg-white border border-primary-100 rounded-md shadow font-medium"
+                >
+                  <span>{item.icon} </span>
+                  <span>{item.name}</span>
+                </div>
+              )}
+            </For>
+          </div>
+
+          <div className="grid gap-2.5 md:grid-cols-2 md:gap-5">
+            <div>
+              <label className={labelClass}>Tanggal</label>
+              <Input type="date" className="min-w-full w-full" />
+            </div>
+            <div>
+              <label className={labelClass}>Waktu</label>
+              <Input type="time" className="min-w-full w-full" />
+            </div>
+            <div className="relative md:col-span-full">
+              <label className={labelClass}>Lokasi</label>
+              <Select className="min-w-full w-full">
+                <option value="online">Online</option>
+                <option value="offline">Offline</option>
+              </Select>
+            </div>
+            <div className="md:col-span-full">
+              <label className={labelClass}>Pertanyaan Untuk Senpai</label>
+              <Textarea
+                className="min-w-full w-full h-40"
+                placeholder={placeholder}
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </Modal>
+  )
+}

apps/backoffice/src/app/(protected)/session-dimentorin/page.tsx

@@ -0,0 +1,168 @@
+import { SearchOutlined } from "@ant-design/icons";
+import { Button, Input, Select } from "@imphnen-frontend-service/ui/atoms";
+import { BackofficeWrapper, DataTable } from "@imphnen-frontend-service/ui/organisms";
+import { cn } from "@imphnen-frontend-service/utils";
+import { ColumnDef, getCoreRowModel, getPaginationRowModel, PaginationState, RowSelectionState, useReactTable } from "@tanstack/react-table";
+import { ReactElement, useState } from "react";
+import { ModalDetailSession } from "./_components/modal/detail";
+
+type SessionStatus = 'ongoing' | 'finished';
+
+interface SessionType {
+  id: string
+  mentorName: string
+  menteeName: string
+  datetime: number
+  status: SessionStatus
+}
+
+const mockData: SessionType[] = Array.from({ length: 90 }, (_, i) => ({
+  id: `DS-${i + 1}`,
+  mentorName: 'Ahmad Wijuana',
+  menteeName: 'Sofia Wijuana',
+  datetime: new Date().getTime(),
+  status: i % 2 === 0 ? 'ongoing' : 'finished',
+}))
+
+export default function Components(): ReactElement {
+  const [openDetail, setOpenDetail] = useState(false);
+
+  const [rowSelection, setRowSelection] = useState<RowSelectionState>({})
+  const [pagination, setPagination] = useState<PaginationState>({
+    pageIndex: 0,
+    pageSize: 9,
+  });
+
+  const columns: ColumnDef<SessionType>[] = [
+    {
+      id: 'select',
+      meta: { cellClassName: cn("w-20") },
+      header: ({ table }) => (
+        <input
+          type="checkbox"
+          className="rounded"
+          checked={table.getIsAllRowsSelected()}
+          onChange={table.getToggleAllRowsSelectedHandler()}
+        />
+      ),
+      cell: ({ row }) => (
+        <input
+          type="checkbox"
+          className="rounded"
+          checked={row.getIsSelected()}
+          onChange={row.getToggleSelectedHandler()}
+        />
+      ),
+    },
+    {
+      id: 'id',
+      header: 'ID Sesi',
+      accessorKey: 'id',
+    },
+    {
+      id: 'mentorName',
+      header: 'Nama Mentor',
+      accessorKey: 'name',
+    },
+    {
+      id: 'menteeName',
+      header: 'Nama Mentee',
+      accessorKey: 'name',
+    },
+    {
+      id: 'datetime',
+      header: 'Waktu',
+      accessorKey: 'datetime',
+    },
+    {
+      id: 'status',
+      header: 'Status',
+      accessorKey: 'status',
+      cell: ({ row }) => {
+        const status = row.original.status;
+        const statusColors: Record<SessionStatus, string> = {
+          ongoing: 'bg-warning-200 text-warning-700',
+          finished: 'bg-success-200 text-success-500',
+        };
+        const statusText: Record<SessionStatus, string> = {
+          ongoing: 'On Going',
+          finished: 'Finished',
+        };
+        return (
+          <div
+            className={`py-2 px-4 rounded-md text-center ${statusColors[status]}`}
+          >
+            {statusText[status]}
+          </div>
+        );
+      },
+    },
+    {
+      header: 'Action',
+      meta: { cellClassName: cn("w-52") },
+      cell: ({ row }) => (
+        <Button
+          variant="primary"
+          size="sm"
+          onClick={(e) => {
+            e.stopPropagation();
+            setOpenDetail(true);
+          }}
+          className="flex items-center gap-2 w-max"
+        >
+          <SearchOutlined className="text-[16px]" /> Cek Detail
+        </Button>
+      ),
+    },
+  ]
+
+  const table = useReactTable({
+    data: mockData,
+    columns,
+    state: {
+      pagination,
+      rowSelection,
+    },
+    enableRowSelection: true,
+    onRowSelectionChange: setRowSelection,
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    onPaginationChange: setPagination,
+    pageCount: Math.ceil(mockData.length / pagination.pageSize),
+    manualPagination: false,
+  });
+
+  return (
+    <BackofficeWrapper title="Dimentorin.dev">
+      <h1 className="text-p1 font-semibold text-neutral-700 mb-8">Session Management</h1>
+
+      <section className="flex flex-col gap-6 p-8 bg-white rounded-md">
+        <div className="flex justify-between items-center gap-5 mb-2">
+          <div className="relative w-full">
+            <Input
+              placeholder="Cari berdasarkan nama lengkap"
+              className="pl-12 w-full max-h-full"
+            />
+            <div className="absolute left-3 top-1/2 transform -translate-y-1/2 text-[16px]">
+              <SearchOutlined />
+            </div>
+          </div>
+          <Select>
+            <option selected disabled>Rating</option>
+            <option value="4.5">4.5</option>
+            <option value="5">5</option>
+          </Select>
+          <Select>
+            <option selected disabled>Status</option>
+            <option value="finished">Finished</option>
+            <option value="ongoing">On Going</option>
+          </Select>
+        </div>
+
+        <DataTable data={mockData} columns={columns} table={table} />
+      </section>
+
+      <ModalDetailSession open={openDetail} setOpen={setOpenDetail} />
+    </BackofficeWrapper>
+  )
+}

apps/backoffice/src/app/(protected)/settings-dimentorin/_components/general.tsx

@@ -0,0 +1,61 @@
+import { Button, Input, Select, ToggleInput } from "@imphnen-frontend-service/ui/atoms"
+import { cn } from "@imphnen-frontend-service/utils"
+import { FC } from "react"
+
+const labelClass = cn('text-neutral-800 text-[10px] font-medium mb-1.5 inline-block md:text-xs md:mb-2 xl:text-p3')
+
+export const GeneralSettings: FC = () => {
+  return (
+    <div>
+      <h1 className="text-p2 font-semibold text-neutral-700 mb-8">General Settings</h1>
+
+      <div>
+        <ToggleInput label="Mode Maintenance" />
+
+        <h2 className="text-p3 font-semibold text-neutral-700 mb-5">Platform Settings</h2>
+        <div className="grid grid-cols-2 gap-x-8 gap-y-5 mb-8">
+          <div>
+            <label className={labelClass}>Nama Platform</label>
+            <Input type="text" className="min-w-full w-full" />
+          </div>
+          <div>
+            <label className={labelClass}>Bahasa</label>
+            <Select defaultValue="id" className="w-full">
+              <option value="id">Indonesia</option>
+              <option value="en">English</option>
+            </Select>
+          </div>
+          <div>
+            <label className={labelClass}>Logo Platform</label>
+            <Input type="file" className="min-w-full w-full" />
+          </div>
+          <div>
+            <label className={labelClass}>Favicon</label>
+            <Input type="file" className="min-w-full w-full" />
+          </div>
+        </div>
+
+        <h2 className="text-p3 font-semibold text-neutral-700 mb-5">Legal Settings</h2>
+        <div className="grid gap-x-8 gap-y-5 mb-20">
+          <div>
+            <label className={labelClass}>URL Syarat & Ketentuan</label>
+            <Input type="text" className="min-w-full w-full" />
+          </div>
+          <div>
+            <label className={labelClass}>URL Kebijakan Privasi</label>
+            <Input type="text" className="min-w-full w-full" />
+          </div>
+        </div>
+
+        <div className="flex justify-end gap-5">
+          <Button type="button" variant="bordered">
+            Batal
+          </Button>
+          <Button type="button">
+            Simpan
+          </Button>
+        </div>
+      </div>
+    </div>
+  )
+}

apps/backoffice/src/app/(protected)/settings-dimentorin/_components/notification.tsx

@@ -0,0 +1,34 @@
+import { Button, Textarea, ToggleInput } from "@imphnen-frontend-service/ui/atoms"
+import { FC } from "react"
+
+export const NotificationSettings: FC = () => {
+  return (
+    <div>
+      <h1 className="text-p2 font-semibold text-neutral-700 mb-8">Notification Settings</h1>
+
+      <div>
+        <div className="flex items-center gap-8 flex-wrap">
+          <ToggleInput label="Nyalakan Notifikasi Email" />
+          <ToggleInput label="Beritahu mentor ketika ada request" />
+          <ToggleInput label="Beritahu mentee untuk update sesi " />
+        </div>
+
+        <div className="mb-20">
+          <label className="text-neutral-800 font-medium inline-block mb-2 text-p3">
+            API Integrasi Notifikasi (URL)
+          </label>
+          <Textarea placeholder="Masukkan url API notifikasi yang akan digunakan" className="w-full h-40" />
+        </div>
+
+        <div className="flex justify-end gap-5">
+          <Button type="button" variant="bordered">
+            Batal
+          </Button>
+          <Button type="button">
+            Simpan
+          </Button>
+        </div>
+      </div>
+    </div>
+  )
+}

apps/backoffice/src/app/(protected)/settings-dimentorin/_components/payment.tsx

@@ -0,0 +1,50 @@
+import { Button, Input, Select, Textarea } from "@imphnen-frontend-service/ui/atoms"
+import { cn } from "@imphnen-frontend-service/utils"
+import { FC } from "react"
+
+const labelClass = cn('text-neutral-800 text-[10px] font-medium mb-1.5 inline-block md:text-xs md:mb-2 xl:text-p3')
+
+export const PaymentSettings: FC = () => {
+  return (
+    <div>
+      <h1 className="text-p2 font-semibold text-neutral-700 mb-8">Payment</h1>
+
+      <div className="grid grid-cols-2 gap-x-8 gap-y-5 mb-8">
+        <div>
+          <label className={labelClass}>Integrasi Payment Gateway</label>
+          <Textarea className="min-w-full w-full h-20" placeholder="Durasi dalam menit" />
+        </div>
+        <div>
+          <label className={labelClass}>Mata Uang</label>
+          <Select defaultValue="idr">
+            <option value="idr">Rupiah (IDR)</option>
+            <option value="usd">Dollar (USD)</option>
+          </Select>
+        </div>
+        <div>
+          <label className={labelClass}>Harga sesi mentoring <span className="text-neutral-600">(default)</span></label>
+          <Input type="text" className="min-w-full w-full" placeholder="Masukkan harga sesi mentoring" />
+        </div>
+        <div>
+          <label className={labelClass}>Tarif Komisi untuk Platform</label>
+          <Input type="text" className="min-w-full w-full" placeholder="Masukkan persentase komisi" />
+        </div>
+      </div>
+
+      <h2 className="text-p3 font-semibold text-neutral-700 mb-5">Invoice</h2>
+      <div className="mb-32">
+        <label className={labelClass}>Masukkan Format Invoice</label>
+        <Input type="file" className="min-w-full w-full" placeholder="InvoiceDimentorin.png" />
+      </div>
+
+      <div className="flex justify-end gap-5">
+        <Button type="button" variant="bordered">
+          Batal
+        </Button>
+        <Button type="button">
+          Simpan
+        </Button>
+      </div>
+    </div>
+  )
+}

apps/backoffice/src/app/(protected)/settings-dimentorin/_components/security.tsx

@@ -0,0 +1,35 @@
+import { Button, Input } from "@imphnen-frontend-service/ui/atoms";
+import { cn } from "@imphnen-frontend-service/utils";
+import { FC } from "react";
+
+const labelClass = cn('text-neutral-800 text-[10px] font-medium mb-1.5 inline-block md:text-xs md:mb-2 xl:text-p3')
+
+export const SecuritySettings: FC = () => {
+  return (
+    <div>
+      <h1 className="text-p2 font-semibold text-neutral-700 mb-8">Security Settings</h1>
+
+      <div className="grid grid-cols-2 gap-8 mb-20">
+        <div>
+          <label className={labelClass}>Durasi Session Timeout</label>
+          <Input type="text" className="min-w-full w-full" placeholder="Durasi dalam menit" />
+          <p className="text-[10px] text-neutral-800">Auto logout setelah X menit tidak aktif</p>
+        </div>
+        <div>
+          <label className={labelClass}>Blokir Setelah Upaya Gagal</label>
+          <Input type="text" className="min-w-full w-full" placeholder="x kali perobaan login" />
+          <p className="text-[10px] text-neutral-800">Misal: 5 kali salah login = lock akun</p>
+        </div>
+      </div>
+
+      <div className="flex justify-end gap-5">
+        <Button type="button" variant="bordered">
+          Batal
+        </Button>
+        <Button type="button">
+          Simpan
+        </Button>
+      </div>
+    </div>
+  )
+}

apps/backoffice/src/app/(protected)/settings-dimentorin/_components/user-roles-permission.tsx

@@ -0,0 +1,118 @@
+import { DeleteOutlined, UserSwitchOutlined } from "@ant-design/icons";
+import { Button } from "@imphnen-frontend-service/ui/atoms";
+import { DataTable } from "@imphnen-frontend-service/ui/organisms";
+import { cn } from "@imphnen-frontend-service/utils";
+import { ColumnDef, getCoreRowModel, getPaginationRowModel, PaginationState, RowSelectionState, useReactTable } from "@tanstack/react-table";
+import { FC, useState } from "react";
+
+type UserRolesPermissionType = {
+  id: number
+  role: string
+  totalUser: number
+}
+
+const mockData: UserRolesPermissionType[] = Array.from({ length: 90 }, (_, i) => ({
+  id: i + 1,
+  role: ['Admin', 'Super Admin', 'Mentee', 'Mentor'][Math.floor(Math.random() * 4)],
+  totalUser: 10
+}))
+
+export const UserRolesPermission: FC = () => {
+  const [rowSelection, setRowSelection] = useState<RowSelectionState>({})
+  const [pagination, setPagination] = useState<PaginationState>({
+    pageIndex: 0,
+    pageSize: 9,
+  });
+
+  const columns: ColumnDef<UserRolesPermissionType>[] = [
+    {
+      id: 'select',
+      meta: { cellClassName: cn("w-20") },
+      header: ({ table }) => (
+        <input
+          type="checkbox"
+          className="rounded"
+          checked={table.getIsAllRowsSelected()}
+          onChange={table.getToggleAllRowsSelectedHandler()}
+        />
+      ),
+      cell: ({ row }) => (
+        <input
+          type="checkbox"
+          className="rounded"
+          checked={row.getIsSelected()}
+          onChange={row.getToggleSelectedHandler()}
+        />
+      ),
+    },
+    {
+      id: 'role',
+      header: 'Role',
+      accessorKey: 'role',
+    },
+    {
+      id: 'totalUser',
+      header: 'Total User',
+      accessorKey: 'totalUser',
+    },
+    {
+      header: 'Action',
+      meta: { cellClassName: cn("w-96") },
+      cell: ({ row }) => (
+        <div className="flex items-center gap-4">
+          <Button
+            variant="primary"
+            size="sm"
+            onClick={(e) => {
+              e.stopPropagation();
+            }}
+            className="flex items-center gap-2 w-max"
+          >
+            <UserSwitchOutlined className="text-[16px]" /> Manage Permissions
+          </Button>
+          <Button
+            variant="danger"
+            size="sm"
+            onClick={(e) => {
+              e.stopPropagation();
+            }}
+            className="flex items-center gap-2 w-max"
+          >
+            <DeleteOutlined className="text-[16px]" /> Delete Role
+          </Button>
+        </div>
+      ),
+    },
+  ]
+
+  const table = useReactTable({
+    data: mockData,
+    columns,
+    state: {
+      pagination,
+      rowSelection,
+    },
+    enableRowSelection: true,
+    onRowSelectionChange: setRowSelection,
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    onPaginationChange: setPagination,
+    pageCount: Math.ceil(mockData.length / pagination.pageSize),
+    manualPagination: false,
+  });
+
+  return (
+    <div>
+      <div className="mb-8 flex items-center justify-between">
+        <h1 className="text-p2 font-semibold text-neutral-700">User Roles & Permissions</h1>
+        <Button type="button">
+          Add Rols
+        </Button>
+      </div>
+
+      <div className="bg-white shadow p-8 rounded-lg">
+        <DataTable data={mockData} columns={columns} table={table} />
+      </div>
+    </div>
+  )
+}

apps/backoffice/src/app/(protected)/settings-dimentorin/page.tsx

@@ -0,0 +1,53 @@
+import { BackofficeWrapper } from "@imphnen-frontend-service/ui/organisms"
+import { cn, For } from "@imphnen-frontend-service/utils"
+import { useState } from "react"
+import { GeneralSettings } from "./_components/general"
+import { UserRolesPermission } from "./_components/user-roles-permission"
+import { NotificationSettings } from "./_components/notification"
+import { SecuritySettings } from "./_components/security"
+import { PaymentSettings } from "./_components/payment"
+
+const TABS = {
+  general: "General Settings",
+  userRolePermissions: "User Roles & Permissions",
+  notification: "Notification Settings",
+  security: "Security",
+  payment: "Payment",
+} as const
+type Tabs = typeof TABS[keyof typeof TABS]
+
+export default function Components(): React.ReactElement {
+  const [activeTab, setActiveTab] = useState<Tabs>(TABS.general)
+
+  return (
+    <BackofficeWrapper title="Dimentorin.dev">
+      <h1 className="text-p1 font-semibold text-neutral-700 mb-8">Settings</h1>
+
+      <div className="flex items-start gap-x-8">
+        <div className="w-64 bg-white p-2.5 shadow space-y-2 rounded-md">
+          <For data={Object.values(TABS)}>
+            {(tab) => (
+              <button
+                key={tab}
+                className={cn(
+                  "px-4 py-3 w-full text-left font-medium rounded-md text-neutral-400 cursor-pointer select-none hover:bg-primary-100",
+                  activeTab === tab && "bg-primary-500 text-white hover:bg-primary-600"
+                )}
+                onClick={() => setActiveTab(tab)}
+              >
+                {tab}
+              </button>
+            )}
+          </For>
+        </div>
+        <div className="bg-white px-8 py-6 shadow space-y-2 rounded-md flex-1">
+          {activeTab === TABS.general && <GeneralSettings />}
+          {activeTab === TABS.userRolePermissions && <UserRolesPermission />}
+          {activeTab === TABS.notification && <NotificationSettings />}
+          {activeTab === TABS.security && <SecuritySettings />}
+          {activeTab === TABS.payment && <PaymentSettings />}
+        </div>
+      </div>
+    </BackofficeWrapper>
+  )
+}

apps/backoffice/src/app/(protected)/transactions/_components/modal-validate.tsx

@@ -0,0 +1,61 @@
+import { Button } from '@imphnen-frontend-service/ui/atoms';
+import { InputField, Modal } from '@imphnen-frontend-service/ui/molecules';
+
+interface IModalValidate {
+  isOpen: boolean;
+  onClose: () => void;
+  handleValid?: () => void;
+  handleInvalid?: () => void;
+}
+
+const ModalValidate = ({
+  isOpen,
+  onClose,
+  handleValid,
+  handleInvalid,
+}: IModalValidate) => {
+  return (
+    <Modal
+      className="min-w-[400px] bg-primary-50 rounded-lg p-[40px] flex flex-col gap-8 text-center"
+      isOpen={isOpen}
+      onClose={onClose}
+      disableEscapeKeyDown={true}
+    >
+      <Modal.Header className="mb-0 text-center items-center">
+        <h2 className="text-p1 font-semibold text-primary-500 mb-3">
+          Validasi Transaksi
+        </h2>
+      </Modal.Header>
+      <Modal.Content className="flex flex-col gap-8">
+        <InputField
+          label="Nomor Transaksi"
+          type="text"
+          placeholder="Masukkan Nomor Transaksi"
+          value="2502133Y9AFVBO"
+          size="lg"
+          className="w-full"
+        />
+        <div className="flex gap-4">
+          <Button
+            variant="bordered"
+            size="lg"
+            className="w-full border-danger-500 text-danger-500 hover:border-danger-700 hover:text-danger-700"
+            onClick={() => handleInvalid && handleInvalid()}
+          >
+            Tidak Valid
+          </Button>
+          <Button
+            variant="primary"
+            size="lg"
+            className="w-full"
+            onClick={() => handleValid && handleValid()}
+          >
+            Valid
+          </Button>
+        </div>
+      </Modal.Content>
+    </Modal>
+  );
+};
+
+export default ModalValidate;

apps/backoffice/src/app/(protected)/transactions/page.tsx

@@ -0,0 +1,214 @@
+import * as React from 'react';
+import { FC, Fragment, ReactElement, useState } from 'react';
+import {
+  FilterOutlined,
+  SearchOutlined,
+  AuditOutlined,
+} from '@ant-design/icons';
+import { Button, Input } from '@imphnen-frontend-service/ui/atoms';
+import { DataTable, Filter } from '@imphnen-frontend-service/ui/organisms';
+
+import {
+  ColumnDef,
+  getCoreRowModel,
+  getPaginationRowModel,
+  PaginationState,
+  useReactTable,
+  RowSelectionState,
+} from '@tanstack/react-table';
+import ModalValidate from './_components/modal-validate';
+
+type TransactionStatus = 'valid' | 'invalid' | 'unchecked';
+
+interface Transaction {
+  id: number;
+  name: string;
+  transactionNumber: string;
+  status: TransactionStatus;
+}
+
+// Mock data for transactions
+const mockTransactions: Transaction[] = Array.from({ length: 20 }, (_, i) => ({
+  id: i + 1,
+  name: i === 0 ? 'Ahmad Wijuana' : 'Nama Lengkap',
+  transactionNumber: '25D2133Y9AFYBD',
+  status: (i % 3 === 0
+    ? 'invalid'
+    : i % 5 === 0
+    ? 'unchecked'
+    : 'valid') as TransactionStatus,
+}));
+
+export const Components: FC = (): ReactElement => {
+  const [showModalValidate, setShowModalValidate] = useState(false);
+
+  const [pagination, setPagination] = React.useState<PaginationState>({
+    pageIndex: 0,
+    pageSize: 9,
+  });
+
+  const [rowSelection, setRowSelection] = React.useState<RowSelectionState>({});
+  const [showFilter, setShowFilter] = useState(false);
+
+  const validationOptions = [
+    { id: 'option1', value: 'unchecked', label: 'Unchecked' },
+    { id: 'option2', value: 'valid', label: 'Valid' },
+    { id: 'option3', value: 'invalid', label: 'Invalid' },
+  ];
+
+  const columns: ColumnDef<Transaction>[] = [
+    {
+      id: 'select',
+      header: ({ table }) => (
+        <input
+          type="checkbox"
+          className="rounded"
+          checked={table.getIsAllRowsSelected()}
+          onChange={table.getToggleAllRowsSelectedHandler()}
+        />
+      ),
+      cell: ({ row }) => (
+        <input
+          type="checkbox"
+          className="rounded"
+          checked={row.getIsSelected()}
+          onChange={row.getToggleSelectedHandler()}
+        />
+      ),
+    },
+    {
+      header: 'No',
+      accessorKey: 'id',
+    },
+    {
+      header: 'Nama Lengkap',
+      accessorKey: 'name',
+    },
+    {
+      header: 'Nomor Transaksi',
+      accessorKey: 'transactionNumber',
+    },
+    {
+      header: 'Order Valid?',
+      accessorKey: 'status',
+      cell: ({ row }) => {
+        const status = row.original.status;
+        const statusColors: Record<TransactionStatus, string> = {
+          valid: 'bg-success-200 text-success-500',
+          invalid: 'bg-danger-200 text-danger-500',
+          unchecked: 'bg-warning-200 text-warning-900',
+        };
+        const statusText: Record<TransactionStatus, string> = {
+          valid: 'Valid',
+          invalid: 'Invalid',
+          unchecked: 'Unchecked',
+        };
+        return (
+          <div
+            className={`py-2 px-4 rounded-md text-center ${statusColors[status]}`}
+          >
+            {statusText[status]}
+          </div>
+        );
+      },
+    },
+    {
+      header: 'Action',
+      cell: ({ row }) => (
+        <Button
+          variant="primary"
+          size="sm"
+          onClick={(e) => {
+            e.stopPropagation();
+            setShowModalValidate(true);
+          }}
+          className="flex items-center gap-2 w-full"
+        >
+          <AuditOutlined className="text-[16px]" /> Update
+        </Button>
+      ),
+    },
+  ];
+
+  const table = useReactTable({
+    data: mockTransactions,
+    columns,
+    state: {
+      pagination,
+      rowSelection,
+    },
+    enableRowSelection: true,
+    onRowSelectionChange: setRowSelection,
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    onPaginationChange: setPagination,
+    pageCount: Math.ceil(mockTransactions.length / pagination.pageSize),
+    manualPagination: false,
+  });
+
+  return (
+    <Fragment>
+      <main className="w-full px-[48px] py-[40px] flex flex-col gap-8">
+        {/* Header */}
+        <header className="bg-white py-4 px-8 rounded-lg shadow p-4">
+          <h1 className="text-p2 font-semibold">Validasi Transaksi</h1>
+        </header>
+
+        {/* Account Table Section */}
+        <section className="flex flex-col gap-6 p-8 bg-white rounded-md">
+          {/* Search and Filter */}
+          <div className="flex justify-between items-center gap-8 mb-2">
+            <div className="relative w-full">
+              <Input
+                placeholder="Cari berdasarkan nama lengkap, nomor order Shopee"
+                className="pl-12 w-full max-h-full"
+              />
+              <div className="absolute left-3 top-1/2 transform -translate-y-1/2 text-[16px]">
+                <SearchOutlined />
+              </div>
+            </div>
+
+            <div className="relative">
+              <Button
+                variant="primary"
+                size="md"
+                className="flex items-center gap-3"
+                onClick={() => setShowFilter(!showFilter)}
+              >
+                <FilterOutlined />
+                Filters
+              </Button>
+              {showFilter && (
+                <div className="absolute right-0 top-[calc(100%+12px)] z-10 shadow-lg">
+                  <Filter
+                    options={validationOptions}
+                    onClose={() => setShowFilter(false)}
+                    onFilterChange={(value) => {
+                      console.log('Selected filter:', value);
+                      // Filter logic di sini
+                    }}
+                  />
+                </div>
+              )}
+            </div>
+          </div>
+
+          {/* Table */}
+          <DataTable data={mockTransactions} columns={columns} table={table} />
+        </section>
+      </main>
+      <ModalValidate
+        isOpen={showModalValidate}
+        onClose={() => setShowModalValidate(false)}
+        handleValid={() => {
+          console.log('Action ketika user klik Valid');
+        }}
+        handleInvalid={() => {
+          console.log('Action ketika user klik Tidak Valid');
+        }}
+      />
+    </Fragment>
+  );
+};
+
+export default Components;

apps/backoffice/src/app/(protected)/users-dimentorin/_components/modal/delete/index.tsx

@@ -0,0 +1,55 @@
+import { Button } from "@imphnen-frontend-service/ui/atoms";
+import { Modal } from "@imphnen-frontend-service/ui/molecules";
+import { FC } from "react";
+
+type ModalDeleteProps = {
+  open: boolean
+  setOpen: (open: boolean) => void
+  hadnleDelete?: () => void
+}
+
+export const ModalDelete: FC<ModalDeleteProps> = ({ open, setOpen, hadnleDelete }) => {
+  return (
+    <Modal
+      className="min-w-[400px] bg-primary-50 rounded-lg p-[40px] flex flex-col gap-8 text-center"
+      isOpen={open}
+      onClose={() => setOpen(false)}
+      closeButtonClassName="hidden"
+    >
+      <Modal.Header className="gap-8">
+        <img
+          src="/chibi-delete.webp"
+          alt="Delete item?"
+          width={148}
+          className="self-center"
+        />
+        <div className="text-center">
+          <h2 className="text-p1 font-semibold text-danger-500 mb-3">
+            Hapus Akun
+          </h2>
+          <p className="text-p3 text-neutral-400">
+            Apakah kamu yakin untuk menghapus akun ini?
+          </p>
+        </div>
+      </Modal.Header>
+      <Modal.Content className="flex gap-4">
+        <Button
+          variant="bordered"
+          size="lg"
+          className="w-full border-danger-500 text-danger-500 hover:bg-danger-50 hover:text-danger-600 hover:border-danger-600"
+          onClick={() => setOpen(false)}
+        >
+          Batal
+        </Button>
+        <Button
+          variant="danger"
+          size="lg"
+          className="w-full"
+          onClick={() => hadnleDelete?.()}
+        >
+          Hapus Akun
+        </Button>
+      </Modal.Content>
+    </Modal>
+  )
+}

apps/backoffice/src/app/(protected)/users-dimentorin/_components/modal/detail/account-profile.tsx

@@ -0,0 +1,86 @@
+import { Button, Input } from "@imphnen-frontend-service/ui/atoms";
+import { cn } from "@imphnen-frontend-service/utils";
+import { FC, useState } from "react";
+import { ModalDelete } from "../delete";
+import { ModalProps } from "../type";
+import { ModalSuspendOrBan } from "../suspend-or-ban";
+
+const labelClass = cn('text-neutral-800 text-[10px] font-semibold mb-1.5 inline-block md:text-xs md:mb-2 xl:text-[15px]')
+
+export const AccountProfile: FC<ModalProps> = ({ setOpen }) => {
+  const [openDelete, setOpenDelete] = useState(false)
+  const [openSuspendOrBan, setOpenSuspendOrBan] = useState(false)
+
+  return (
+    <div>
+      <div className="flex items-center gap-x-8 mb-8">
+        <div className="size-[100px] rounded-full overflow-hidden">
+          <img src="/images/asd687hwq6nds4dfjj2983.webp" alt="Profile" className="w-full object-cover" />
+        </div>
+        <div>
+          <Button type="button" size="sm" variant="bordered" className="mb-4">
+            Upload Foto
+          </Button>
+          <p className="text-neutral-400 font-medium">
+            Setidaknya rekomendasi ukuran 240x240 px. <br />
+            .jpg, .jpeg, .png diperbolehkan
+          </p>
+        </div>
+      </div>
+
+      <div>
+        <div className="mb-8">
+          <h1 className="mb-7 text-p2 font-semibold">Informasi Pribadi</h1>
+          <div className="grid grid-cols-2 gap-8">
+            <div>
+              <label className={labelClass}>Nama Depan</label>
+              <Input type="text" className="min-w-full w-full" placeholder="Nama Depan" />
+            </div>
+            <div>
+              <label className={labelClass}>Nama Belakang</label>
+              <Input type="text" className="min-w-full w-full" placeholder="Nama Belakang" />
+            </div>
+            <div>
+              <label className={labelClass}>Email</label>
+              <Input type="email" className="min-w-full w-full" placeholder="Email" />
+            </div>
+            <div>
+              <label className={labelClass}>Nomor Telepon</label>
+              <Input type="text" className="min-w-full w-full" placeholder="+62 81234567890" />
+            </div>
+          </div>
+        </div>
+
+        <div>
+          <h1 className="mb-7 text-p2 font-semibold">Status Akun</h1>
+          <div className="flex items-center gap-5">
+            <Button
+              type="button"
+              size="sm"
+              variant="bordered"
+              className="border-danger-500 text-danger-500"
+              onClick={() => setOpenSuspendOrBan(true)}
+            >
+              Suspend/Ban
+            </Button>
+            <Button type="button" size="sm" variant="danger" onClick={() => setOpenDelete(true)}>
+              Delete Akun
+            </Button>
+          </div>
+        </div>
+
+        <div className="flex justify-end gap-x-5">
+          <Button type="button" variant="bordered" onClick={() => setOpen(false)}>
+            Batal
+          </Button>
+          <Button type="button" disabled>
+            Simpan
+          </Button>
+        </div>
+      </div>
+
+      <ModalDelete open={openDelete} setOpen={setOpenDelete} />
+      <ModalSuspendOrBan open={openSuspendOrBan} setOpen={setOpenSuspendOrBan} />
+    </div>
+  )
+}

apps/backoffice/src/app/(protected)/users-dimentorin/_components/modal/detail/activity-log.tsx

@@ -0,0 +1,110 @@
+import { SearchOutlined } from "@ant-design/icons"
+import { Input, Select } from "@imphnen-frontend-service/ui/atoms"
+import { DataTable } from "@imphnen-frontend-service/ui/organisms"
+import { cn } from "@imphnen-frontend-service/utils"
+import { ColumnDef, getCoreRowModel, getPaginationRowModel, PaginationState, RowSelectionState, useReactTable } from "@tanstack/react-table"
+import { FC, useState } from "react"
+import dayjs from "dayjs"
+
+interface ActivityLogType {
+  id: number
+  date: string
+  menu: string
+  activity: string
+}
+
+const mockData: ActivityLogType[] = Array.from({ length: 90 }, (_, i) => ({
+  id: i + 1,
+  date: new Date().toISOString(),
+  menu: 'Mentoring',
+  activity: 'Mentoring Session',
+}))
+
+export const ActivityLog: FC = () => {
+  const [rowSelection, setRowSelection] = useState<RowSelectionState>({})
+  const [pagination, setPagination] = useState<PaginationState>({
+    pageIndex: 0,
+    pageSize: 9,
+  })
+
+  const columns: ColumnDef<ActivityLogType>[] = [
+    {
+      id: 'select',
+      meta: { cellClassName: cn("w-16") },
+      header: ({ table }) => (
+        <input
+          type="checkbox"
+          className="rounded"
+          checked={table.getIsAllRowsSelected()}
+          onChange={table.getToggleAllRowsSelectedHandler()}
+        />
+      ),
+      cell: ({ row }) => (
+        <input
+          type="checkbox"
+          className="rounded"
+          checked={row.getIsSelected()}
+          onChange={row.getToggleSelectedHandler()}
+        />
+      ),
+    },
+    {
+      id: 'date',
+      header: 'Waktu',
+      accessorKey: 'date',
+      cell: (info) => dayjs(info.row.original.date).format('DD MMMM YYYY, HH:mm WIB'),
+    },
+    {
+      id: 'menu',
+      header: 'Menu',
+      accessorKey: 'menu',
+    },
+    {
+      id: 'activity',
+      header: 'Activity',
+      accessorKey: 'activity',
+    }
+  ]
+
+  const table = useReactTable({
+    data: mockData,
+    columns,
+    state: {
+      pagination,
+      rowSelection,
+    },
+    enableRowSelection: true,
+    onRowSelectionChange: setRowSelection,
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    onPaginationChange: setPagination,
+    pageCount: Math.ceil(mockData.length / pagination.pageSize),
+    manualPagination: false,
+  });
+
+  return (
+    <div className="p-8 shadow rounded-lg">
+      <div className="flex justify-between items-center gap-5 mb-9">
+        <div className="relative w-1/2">
+          <Input
+            placeholder="Cari aktivitas"
+            className="pl-12 w-full max-h-full"
+          />
+          <div className="absolute left-3 top-1/2 transform -translate-y-1/2 text-[16px]">
+            <SearchOutlined />
+          </div>
+        </div>
+        <div className="w-1/4">
+          <Input type="date" className="min-w-full w-full" />
+        </div>
+        <Select>
+          <option selected disabled>Menu</option>
+          <option value="profle">Profile</option>
+          <option value="profle-2">Profile</option>
+        </Select>
+      </div>
+
+      <DataTable data={mockData} columns={columns} table={table} />
+    </div>
+  )
+}

apps/backoffice/src/app/(protected)/users-dimentorin/_components/modal/detail/detail-profile.tsx

@@ -0,0 +1,89 @@
+import { Icon } from "@iconify/react"
+import { Button } from "@imphnen-frontend-service/ui/atoms"
+import { For } from "@imphnen-frontend-service/utils"
+import { FC } from "react"
+
+const SOCIAL_LINKS = [
+  { icon: <Icon icon="mdi:linkedin" className="text-2xl" />, url: "https://linkedin.com", label: "LinkedIn" },
+  { icon: <Icon icon="mdi:github" className="text-2xl" />, url: "https://github.com", label: "Github" },
+  { icon: <Icon icon="mingcute:meta-line" className="text-2xl" />, url: "https://facebook.com", label: "Facebook (Meta)" },
+  { icon: <Icon icon="mdi:stack-overflow" className="text-2xl" />, url: "https://stackoverflow.com", label: "Stack Overflow" }
+]
+
+export const DetailProfile: FC = () => {
+  return (
+    <div>
+      <div className="shadow rounded-lg p-8 mb-7">
+        <div className="flex justify-between items-start mb-6">
+          <div className="flex items-center gap-x-6">
+            <div className="size-[54px] rounded-full overflow-hidden">
+              <img src="/images/asd687hwq6nds4dfjj2983.webp" alt="Profile" className="w-full object-cover" />
+            </div>
+            <div>
+              <h1 className="text-p2 font-semibold text-neutral-800">Muhammad Firdaus Oiwobo</h1>
+              <p className="text-p3 font-medium text-neutral-600">Mentor</p>
+            </div>
+          </div>
+          <Button type="button" variant="text" className="bg-primary-100">
+            Actively Seeking Job
+          </Button>
+        </div>
+        
+        <div className="flex items-center gap-5">
+          <For data={SOCIAL_LINKS}>
+            {({ icon, url, label }) => (
+              <a key={url} href={url} target="_blank" rel="noreferrer">
+                <Button type="button" size="sm" className="flex items-center gap-x-2">
+                  {icon}
+                  {label}
+                </Button>
+              </a>
+            )}
+          </For>
+        </div>
+
+      </div>
+
+      <div className="grid grid-cols-2 gap-7">
+        <div className="text-pretty px-8 py-10 rounded-lg shadow h-max">
+          <h1 className="text-p2 font-semibold text-neutral-800 mb-6">Description</h1>
+          <p className="text-p3 font-medium text-neutral-600">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi. Aliquam in hendrerit urna. Pellentesque sit amet sapien fringilla, mattis ligula consectetur, ultrices mauris. Maecenas vitae mattis tellus. Nullam quis imperdiet augue. Vestibulum auctor ornare leo, non suscipit magna interdum eu. Curabitur pellentesque nibh nibh, at maximus ante fermentum sit amet. Pellentesque commodo lacus at sodales sodales. Quisque sagittis orci ut diam condimentum, vel euismod erat placerat. In iaculis arcu eros, eget tempus orci facilisis id.
+          </p>
+        </div>
+        <div className="px-8 py-10 rounded-lg shadow h-max">
+          <h1 className="text-p2 font-semibold text-neutral-800 mb-6">Personal Informations</h1>
+          <div className="grid gap-6">
+            <div className="flex items-center gap-x-5">
+              <div className="bg-primary-50 rounded-full p-2.5 flex items-center justify-center text-primary-500">
+                <Icon icon="ic:outline-mail" className="text-3xl" />
+              </div>
+              <div className="text-p3">
+                <p className="text-neutral-800 font-semibold">rzalaxib23@gmail.com</p>
+                <p className="text-neutral-600 font-medium">Email Address</p>
+              </div>
+            </div>
+            <div className="flex items-center gap-x-5">
+              <div className="bg-primary-50 rounded-full p-2.5 flex items-center justify-center text-primary-500">
+                <Icon icon="cil:phone" className="text-3xl" />
+              </div>
+              <div className="text-p3">
+                <p className="text-neutral-800 font-semibold">+62 888 8888 8888</p>
+                <p className="text-neutral-600 font-medium">Phone Number</p>
+              </div>
+            </div>
+            <div className="flex items-center gap-x-5">
+              <div className="bg-primary-50 rounded-full p-2.5 flex items-center justify-center text-primary-500">
+                <Icon icon="ion:location-outline" className="text-3xl" />
+              </div>
+              <div className="text-p3">
+                <p className="text-neutral-800 font-semibold">Jl. Mergosari, Kec. Suryakencana, Banjaran</p>
+                <p className="text-neutral-600 font-medium">Location</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

apps/backoffice/src/app/(protected)/users-dimentorin/_components/modal/detail/index.tsx

@@ -0,0 +1,68 @@
+import { Button } from "@imphnen-frontend-service/ui/atoms"
+import { Modal } from "@imphnen-frontend-service/ui/molecules"
+import { cn, For, Show } from "@imphnen-frontend-service/utils"
+import { FC, useEffect, useState } from "react"
+import { AccountProfile } from "./account-profile"
+import { DetailProfile } from "./detail-profile"
+import { ActivityLog } from "./activity-log"
+import { ModalDetailUserProps } from "./type"
+
+const TABS = {
+  account: 'account profile',
+  detail: 'detail profile',
+  activity: 'activity logs',
+} as const
+type TabType = typeof TABS[keyof typeof TABS]
+
+export const ModalDetailUser: FC<ModalDetailUserProps> = ({
+  open,
+  setOpen,
+}) => {
+  const [activeTab, setActiveTab] = useState<TabType>(TABS.account)
+
+  useEffect(() => {
+    if (!open) setActiveTab(TABS.account)
+  }, [open])
+
+  return (
+    <Modal
+      isOpen={open}
+      onClose={() => setOpen(false)}
+      className="xl:max-w-[84rem] bg-white px-10 py-9"
+      closeButtonClassName="hidden"
+    >
+      <div>
+        <h1 className="bg-primary-50 px-6 py-3 text-neutral-800 text-p2 font-semibold mb-8">
+          Detail - Muhammad Firdaus Oiwobo
+        </h1>
+
+        <div className="flex gap-2 bg-primary-100 p-1.5 rounded-md w-max mb-8">
+          <For data={Object.values(TABS)}>
+            {(tab) => (
+              <Button
+                key={tab}
+                variant="text"
+                className={cn("px-3 py-2 capitalize", activeTab === tab && "bg-white")}
+                onClick={() => setActiveTab(tab)}
+              >
+                {tab}
+              </Button>
+            )}
+          </For>
+        </div>
+
+        <div>
+          <Show condition={activeTab === TABS.account}>
+            <AccountProfile open={open} setOpen={setOpen} />
+          </Show>
+          <Show condition={activeTab === TABS.detail}>
+            <DetailProfile />
+          </Show>
+          <Show condition={activeTab === TABS.activity}>
+            <ActivityLog />
+          </Show>
+        </div>
+      </div>
+    </Modal>
+  )
+}

apps/backoffice/src/app/(protected)/users-dimentorin/_components/modal/detail/type.d.ts

@@ -0,0 +1,5 @@
+import { ModalProps } from "../type";
+
+export interface ModalDetailUserProps extends ModalProps {
+  userId?: number | null
+}

apps/backoffice/src/app/(protected)/users-dimentorin/_components/modal/suspend-or-ban/index.tsx

@@ -0,0 +1,42 @@
+import { FC } from "react";
+import { ModalProps } from "../type";
+import { Modal } from "@imphnen-frontend-service/ui/molecules";
+import { cn } from "@imphnen-frontend-service/utils";
+import { Button, Select, Textarea } from "@imphnen-frontend-service/ui/atoms";
+
+const labelClass = cn('text-neutral-800 text-[10px] font-semibold mb-1.5 inline-block md:text-xs md:mb-2 xl:text-[15px]')
+
+export const ModalSuspendOrBan: FC<ModalProps> = ({ open, setOpen }) => {
+  return (
+    <Modal
+      isOpen={open}
+      onClose={() => setOpen(false)}
+      className="bg-white px-10 py-9 xl:max-w-[32rem]"
+      closeButtonClassName="hidden"
+    >
+      <div>
+        <h1 className="bg-primary-50 px-6 py-3 text-neutral-800 text-p2 font-semibold mb-8">
+          Suspend/Ban
+        </h1>
+
+        <div className="space-y-6">
+          <div>
+            <label className={labelClass}>Suspend/Ban</label>
+            <Select defaultValue="suspend" className="w-full">
+              <option value="suspend">Suspend</option>
+              <option value="banned">Banned</option>
+            </Select>
+          </div>
+          <div>
+            <label className={labelClass}>Alasan</label>
+            <Textarea placeholder="Masukkan alasan suspend/ban" className="w-full h-40" />
+          </div>
+
+          <Button type="button" className="w-full">
+            Selesai
+          </Button>
+        </div>
+      </div>
+    </Modal>
+  )
+}

apps/backoffice/src/app/(protected)/users-dimentorin/_components/modal/type.d.ts

@@ -0,0 +1,4 @@
+export interface ModalProps {
+  open: boolean
+  setOpen: (open: boolean) => void
+}

apps/backoffice/src/app/(protected)/users-dimentorin/page.tsx

@@ -0,0 +1,206 @@
+import { SearchOutlined } from '@ant-design/icons';
+import { Button, Input, Select } from '@imphnen-frontend-service/ui/atoms';
+import {
+  BackofficeWrapper,
+  DataTable,
+} from '@imphnen-frontend-service/ui/organisms';
+import { cn, For } from '@imphnen-frontend-service/utils';
+import {
+  ColumnDef,
+  getCoreRowModel,
+  getPaginationRowModel,
+  PaginationState,
+  RowSelectionState,
+  useReactTable,
+} from '@tanstack/react-table';
+import { ReactElement, useState } from 'react';
+import { ModalDetailUser } from './_components/modal/detail';
+
+type UserStatus = 'active' | 'inactive';
+
+interface UserType {
+  id: number;
+  name: string;
+  email: string;
+  rating: number;
+  status: UserStatus;
+}
+
+const mockData: UserType[] = Array.from({ length: 90 }, (_, i) => ({
+  id: i + 1,
+  name: i % 3 === 0 ? 'Ahmad Wijuana' : 'Sofia Wijuana',
+  email: 'fullname23@gmail.com',
+  rating: 4.5,
+  status: i % 2 === 0 ? 'active' : 'inactive',
+}));
+
+export default function Components(): ReactElement {
+  const TABS = ['mentor', 'mentee'] as const;
+  const [activeTab, setActiveTab] = useState<'mentor' | 'mentee'>('mentor');
+  const [showDetail, setShowDetail] = useState(false);
+  const [selectedUserId, setSelectedUserId] = useState<number | null>(null);
+
+  const [rowSelection, setRowSelection] = useState<RowSelectionState>({});
+  const [pagination, setPagination] = useState<PaginationState>({
+    pageIndex: 0,
+    pageSize: 9,
+  });
+
+  const columns: ColumnDef<UserType>[] = [
+    {
+      id: 'select',
+      meta: { cellClassName: cn('w-20') },
+      header: ({ table }) => (
+        <input
+          type="checkbox"
+          className="rounded"
+          checked={table.getIsAllRowsSelected()}
+          onChange={table.getToggleAllRowsSelectedHandler()}
+        />
+      ),
+      cell: ({ row }) => (
+        <input
+          type="checkbox"
+          className="rounded"
+          checked={row.getIsSelected()}
+          onChange={row.getToggleSelectedHandler()}
+        />
+      ),
+    },
+    {
+      id: 'name',
+      header: 'Name',
+      accessorKey: 'name',
+    },
+    {
+      id: 'email',
+      header: 'Email',
+      accessorKey: 'email',
+    },
+    {
+      id: 'rating',
+      header: 'Rating',
+      accessorKey: 'rating',
+    },
+    {
+      id: 'status',
+      header: 'Status',
+      accessorKey: 'status',
+      cell: ({ row }) => {
+        const status = row.original.status;
+        const statusColors: Record<UserStatus, string> = {
+          active: 'bg-success-200 text-success-500',
+          inactive: 'bg-danger-200 text-danger-500',
+        };
+        const statusText: Record<UserStatus, string> = {
+          active: 'Active',
+          inactive: 'Inactive',
+        };
+        return (
+          <div
+            className={`py-2 px-4 rounded-md text-center ${statusColors[status]}`}
+          >
+            {statusText[status]}
+          </div>
+        );
+      },
+    },
+    {
+      header: 'Action',
+      meta: { cellClassName: cn('w-72') },
+      cell: ({ row }) => (
+        <Button
+          variant="primary"
+          size="sm"
+          onClick={(e) => {
+            e.stopPropagation();
+            setSelectedUserId(row.original.id);
+            setShowDetail(true);
+          }}
+          className="flex items-center gap-2 w-max"
+        >
+          <SearchOutlined className="text-[16px]" /> Lihat Detail & Action
+        </Button>
+      ),
+    },
+  ];
+
+  const table = useReactTable({
+    data: mockData,
+    columns,
+    state: {
+      pagination,
+      rowSelection,
+    },
+    enableRowSelection: true,
+    onRowSelectionChange: setRowSelection,
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    onPaginationChange: setPagination,
+    pageCount: Math.ceil(mockData.length / pagination.pageSize),
+    manualPagination: false,
+  });
+
+  return (
+    <BackofficeWrapper title="Dimentorin.dev">
+      <div className="mb-8 flex justify-between items-center">
+        <h1 className="text-p1 font-semibold text-neutral-700 mb-8">
+          User Management
+        </h1>
+        <div className="flex gap-2 bg-primary-100 p-1.5 rounded-md">
+          <For data={TABS}>
+            {(tab) => (
+              <Button
+                key={tab}
+                variant="text"
+                className={cn(
+                  'px-3 py-2 capitalize',
+                  activeTab === tab && 'bg-white'
+                )}
+                onClick={() => setActiveTab(tab)}
+              >
+                {tab}
+              </Button>
+            )}
+          </For>
+        </div>
+      </div>
+
+      <section className="flex flex-col gap-6 p-8 bg-white rounded-md">
+        <div className="flex justify-between items-center gap-5 mb-2">
+          <div className="relative w-full">
+            <Input
+              placeholder="Cari berdasarkan nama lengkap"
+              className="pl-12 w-full max-h-full"
+            />
+            <div className="absolute left-3 top-1/2 transform -translate-y-1/2 text-[16px]">
+              <SearchOutlined />
+            </div>
+          </div>
+          <Select>
+            <option selected disabled>
+              Rating
+            </option>
+            <option value="4.5">4.5</option>
+            <option value="5">5</option>
+          </Select>
+          <Select>
+            <option selected disabled>
+              Status
+            </option>
+            <option value="active">Active</option>
+            <option value="inactive">Inactive</option>
+          </Select>
+        </div>
+
+        <DataTable data={mockData} columns={columns} table={table} />
+      </section>
+
+      <ModalDetailUser
+        open={showDetail}
+        setOpen={setShowDetail}
+        userId={selectedUserId}
+      />
+    </BackofficeWrapper>
+  );
+}

apps/backoffice/src/app/(public)/auth/login/_hooks/use-login.ts

@@ -0,0 +1,23 @@
+import { useForm } from 'react-hook-form';
+import {
+  authLoginSchema,
+  TLoginRequest,
+} from '@imphnen-frontend-service/service';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useSession } from '@imphnen-frontend-service/utils';
+
+export const useLogin = () => {
+  const form = useForm<TLoginRequest>({
+    resolver: zodResolver(authLoginSchema),
+    mode: 'all',
+  });
+
+  const { signIn } = useSession();
+
+  const onSubmit = form.handleSubmit((data) => signIn(data));
+
+  return {
+    form,
+    onSubmit,
+  };
+};

apps/backoffice/src/app/(public)/auth/login/page.tsx

@@ -0,0 +1,53 @@
+import { FC, ReactElement } from 'react';
+import { Button } from '@imphnen-frontend-service/ui/atoms';
+import { useLogin } from './_hooks/use-login';
+import { ControlledInputField } from '@imphnen-frontend-service/ui/organisms';
+
+export const Components: FC = (): ReactElement => {
+  const { form, onSubmit } = useLogin();
+
+  return (
+    <div className="flex justify-center items-center min-h-screen">
+      <div className="bg-white border border-primary-200 shadow-lg p-[60px] text-center flex flex-col justify-items-stretch gap-8 rounded-2xl">
+        <img src="/logos/logo.svg" alt="" className="h-[70px] w-auto" />
+        <h1 className="text-primary-500 text-p1 font-semibold">
+          Welcome to IMPHNEN Backoffice
+        </h1>
+        <form onSubmit={onSubmit} className="flex flex-col gap-8">
+          <ControlledInputField
+            control={form.control}
+            label="Email"
+            placeholder="Masukkan Email"
+            type="email"
+            name="email"
+            size="lg"
+            className="w-full"
+          />
+          <ControlledInputField
+            control={form.control}
+            label="Password"
+            placeholder="Masukkan Password"
+            type="password"
+            name="password"
+            size="lg"
+            className="w-full"
+          />
+          <Button
+            disabled={
+              form.formState.isSubmitting ||
+              form.formState.isValidating ||
+              !form.formState.isValid
+            }
+            type="submit"
+            size="md"
+            className="w-full"
+          >
+            Login
+          </Button>
+        </form>
+      </div>
+    </div>
+  );
+};
+
+export default Components;

apps/backoffice/src/app/(public)/layout.tsx

@@ -0,0 +1,12 @@
+import { FC, ReactElement } from 'react';
+import { Outlet } from 'react-router-dom';
+
+export const AppLayout: FC = (): ReactElement => {
+  return (
+    <main className="bg-primary-50 min-h-screen">
+      <Outlet />
+    </main>
+  );
+};
+
+export default AppLayout;

apps/backoffice/src/hook/use-query-state.tsx

@@ -0,0 +1,71 @@
+import { useCallback, useEffect, useState } from 'react';
+
+interface UseQueryStateOptions {
+  defaultValue: number;
+  maxValue?: number;
+  minValue?: number;
+}
+
+export const useQueryState = (key: string, options: UseQueryStateOptions) => {
+  const { defaultValue, maxValue = Infinity, minValue = 1 } = options;
+
+  const getQueryParam = (param: string): string | null => {
+    if (typeof window === 'undefined') return null;
+    const searchParams = new URLSearchParams(window.location.search);
+    return searchParams.get(param);
+  };
+
+  const setQueryParam = (param: string, value: string) => {
+    const searchParams = new URLSearchParams(window.location.search);
+    searchParams.set(param, value);
+    const newUrl = `${window.location.pathname}?${searchParams.toString()}`;
+    window.history.replaceState(null, '', newUrl);
+  };
+
+  const initialValue = () => {
+    const queryValue = getQueryParam(key);
+    const parsedValue = queryValue ? parseInt(queryValue, 10) : defaultValue;
+    return Math.max(minValue, Math.min(maxValue, parsedValue));
+  };
+
+  const [value, setValue] = useState<number>(initialValue);
+
+  useEffect(() => {
+    const handlePopState = () => {
+      const queryValue = getQueryParam(key);
+      const newValue = queryValue ? parseInt(queryValue, 10) : defaultValue;
+      setValue(Math.max(minValue, Math.min(maxValue, newValue)));
+    };
+
+    window.addEventListener('popstate', handlePopState);
+    return () => window.removeEventListener('popstate', handlePopState);
+  }, [key, defaultValue, minValue, maxValue]);
+
+  const updateValue = useCallback(
+    (newValue: number) => {
+      const constrainedValue = Math.max(minValue, Math.min(maxValue, newValue));
+      setValue(constrainedValue);
+      setQueryParam(key, constrainedValue.toString());
+    },
+    [key, minValue, maxValue]
+  );
+
+  const nextStep = useCallback(() => {
+    updateValue(value + 1);
+  }, [value, updateValue]);
+
+  const prevStep = useCallback(() => {
+    updateValue(value - 1);
+  }, [value, updateValue]);
+
+  const resetStep = useCallback(() => {
+    updateValue(defaultValue);
+  }, [defaultValue, updateValue]);
+
+  return {
+    step: value,
+    nextStep,
+    prevStep,
+    resetStep,
+  };
+};

apps/backoffice/src/index.css

@@ -0,0 +1,136 @@
+@import url('https://fonts.googleapis.com/css2?family=Bai+Jamjuree:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');
+@import 'tailwindcss';
+@source "../../../libs/ui/**/*.{ts,tsx}";
+
+@theme {
+  --color-primary-50: #f0f8ff;
+  --color-primary-100: #e1f0fd;
+  --color-primary-200: #bce1fb;
+  --color-primary-300: #81cbf8;
+  --color-primary-400: #3eb0f2;
+  --color-primary-500: #23a1eb;
+  --color-primary-600: #0877c1;
+  --color-primary-700: #085f9c;
+  --color-primary-800: #0b5181;
+  --color-primary-900: #0f446b;
+  --color-primary-950: #0a2b47;
+
+  --color-neutral-50: #f6f6f6;
+  --color-neutral-100: #e7e7e7;
+  --color-neutral-200: #d1d1d1;
+  --color-neutral-300: #b0b0b0;
+  --color-neutral-400: #888888;
+  --color-neutral-500: #6d6d6d;
+  --color-neutral-600: #5d5d5d;
+  --color-neutral-700: #4f4f4f;
+  --color-neutral-800: #454545;
+  --color-neutral-900: #3d3d3d;
+  --color-neutral-950: #2b2b2b;
+
+  --color-success-100: #e0fbd8;
+  --color-success-200: #bcf8b0;
+  --color-success-300: #8eea85;
+  --color-success-400: #63d564;
+  --color-success-500: #35ba43;
+  --color-success-600: #269f3e;
+  --color-success-700: #1a8439;
+  --color-success-800: #106b32;
+  --color-success-900: #0b592f;
+
+  --color-info-100: #ccfcfe;
+  --color-info-200: #9bf3fd;
+  --color-info-300: #67e3fb;
+  --color-info-400: #42cdf8;
+  --color-info-500: #04acf3;
+  --color-info-600: #0185d0;
+  --color-info-700: #0264af;
+  --color-info-800: #01478d;
+  --color-info-900: #003375;
+
+  --color-warning-100: #fffcd3;
+  --color-warning-200: #fffaa9;
+  --color-warning-300: #fff67d;
+  --color-warning-400: #fff25d;
+  --color-warning-500: #ffed27;
+  --color-warning-600: #dbc91d;
+  --color-warning-700: #b7a714;
+  --color-warning-800: #93850b;
+  --color-warning-900: #7a6d07;
+
+  --color-danger-100: #ffe8da;
+  --color-danger-200: #ffcbb3;
+  --color-danger-300: #ffaa8d;
+  --color-danger-400: #ff8870;
+  --color-danger-500: #ff5242;
+  --color-danger-600: #da3030;
+  --color-danger-700: #b7212d;
+  --color-danger-800: #93152a;
+  --color-danger-900: #7a0c27;
+
+  --radius-none: 0px;
+  --radius-sm: 2px;
+  --radius-md: 4px;
+  --radius-lg: 8px;
+  --radius-xl: 12px;
+  --radius-2xl: 16px;
+  --radius-3xl: 24px;
+  --radius-full: 50%;
+
+  --font-bai-jamjuree: 'Bai Jamjuree', sans-serif;
+
+  --text-h1: 3.833rem;
+  /* ~46px */
+  --text-h2: 3.083rem;
+  /* ~37px */
+  --text-h3: 2.417rem;
+  /* ~29px */
+  --text-p1: 1.917rem;
+  /* ~23px */
+  --text-p2: 1.583rem;
+  /* ~19px */
+  --text-p3: 1.25rem;
+  /* 15px */
+  --text-label1: 1rem;
+  /* 12px */
+  --text-label2: 0.833rem;
+  /* ~10px */
+  --text-label3: 0.677rem;
+  /* ~8px */
+}
+
+@layer base {
+
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-neutral-200, currentColor);
+  }
+
+  /* Custom scrollbar */
+  ::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+
+  ::-webkit-scrollbar-track {
+    background: var(--color-neutral-50);
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background: #cccccc;
+    border-radius: 3px;
+  }
+
+  ::-webkit-scrollbar-thumb:hover {
+    background: var(--color-neutral-300);
+  }
+
+  html {
+    font-family: 'Bai Jamjuree', sans-serif;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 1.2;
+  }
+}

apps/backoffice/src/main.tsx

@@ -0,0 +1,42 @@
+import { createRoot } from 'react-dom/client';
+import { middleware } from './middleware';
+import { StrictMode } from 'react';
+import { createBrowserRouter, RouteObject, RouterProvider } from 'react-router';
+import {
+  add404PageToRoutesChildren,
+  addErrorElementToRoutes,
+  convertPagesToRoute,
+  QueryProvider,
+} from '@imphnen-frontend-service/utils';
+import { Toaster } from 'sonner';
+import './index.css';
+
+const files = import.meta.glob('./app/**/*(page|layout).tsx');
+const errorFiles = import.meta.glob('./app/**/*error.tsx');
+const notFoundFiles = import.meta.glob('./app/**/*404.tsx');
+const loadingFiles = import.meta.glob('./app/**/*loading.tsx');
+
+const routes = convertPagesToRoute(files, loadingFiles) as RouteObject;
+addErrorElementToRoutes(errorFiles, routes);
+add404PageToRoutesChildren(notFoundFiles, routes);
+
+const router = createBrowserRouter([
+  {
+    ...routes,
+    loader: middleware,
+    shouldRevalidate: () => true,
+  },
+]);
+
+const rootElement = document.getElementById('root');
+
+if (!rootElement) throw new Error('Failed to find the root element');
+
+createRoot(rootElement).render(
+  <StrictMode>
+    <QueryProvider>
+      <Toaster position="top-right" />
+      <RouterProvider router={router} />
+    </QueryProvider>
+  </StrictMode>
+);

apps/backoffice/src/middleware.ts

@@ -0,0 +1,108 @@
+import {
+  PERMISSIONS,
+  SessionToken,
+  SessionUser,
+} from '@imphnen-frontend-service/utils';
+import { LoaderFunctionArgs, redirect } from 'react-router';
+
+const mappingPublicRoutes = [
+  '/auth/login',
+  '/auth/forgot',
+  '/auth/new-password',
+];
+
+const mappingRoutePermissions = [
+  {
+    path: '/dashboard',
+    permissions: [],
+  },
+  {
+    path: '/users',
+    permissions: [PERMISSIONS.USERS.READ_LIST],
+  },
+  {
+    path: '/users/create',
+    permissions: [PERMISSIONS.USERS.CREATE],
+  },
+  {
+    path: '/users/update',
+    permissions: [PERMISSIONS.USERS.UPDATE],
+  },
+  {
+    path: '/users/detail',
+    permissions: [PERMISSIONS.USERS.READ_DETAIL],
+  },
+  {
+    path: '/roles',
+    permissions: [PERMISSIONS.ROLES.READ_LIST],
+  },
+  {
+    path: '/roles/create',
+    permissions: [PERMISSIONS.ROLES.CREATE],
+  },
+  {
+    path: '/roles/update',
+    permissions: [PERMISSIONS.ROLES.UPDATE],
+  },
+  {
+    path: '/roles/detail',
+    permissions: [PERMISSIONS.ROLES.READ_DETAIL],
+  },
+  {
+    path: '/permissions',
+    permissions: [PERMISSIONS.PERMISSIONS.READ_LIST],
+  },
+  {
+    path: '/permissions/create',
+    permissions: [PERMISSIONS.PERMISSIONS.CREATE],
+  },
+  {
+    path: '/permissions/update',
+    permissions: [PERMISSIONS.PERMISSIONS.UPDATE],
+  },
+  {
+    path: '/permissions/detail',
+    permissions: [PERMISSIONS.PERMISSIONS.READ_DETAIL],
+  },
+];
+
+//TODO : Fix this later
+// const redirectToFirstAccessibleRoute = (userPermissions: string[]) => {
+//   const fallback = mappingRoutePermissions.find((route) =>
+//     route.permissions.some((perm) => userPermissions.includes(perm))
+//   );
+//   return redirect(fallback?.path ?? '/auth/login');
+// };
+
+export const middleware = async ({ request }: LoaderFunctionArgs) => {
+  const url = new URL(request.url);
+  const pathname = url.pathname;
+  const session = SessionUser.get();
+  const session_token = SessionToken.get();
+  const token = session_token?.token?.access_token;
+  const userPermissions =
+    session?.role?.permissions?.map?.((perm) => perm?.name) ?? [];
+
+  if (mappingPublicRoutes.includes(pathname)) {
+    if (token) return redirect('/dashboard');
+    return null;
+  }
+
+  // if (!session) return redirect('/auth/login');
+
+  const matchedRoute = mappingRoutePermissions.find(
+    (route) => route.path === pathname
+  );
+
+  if (matchedRoute) {
+    const hasPermission =
+      !matchedRoute.permissions ||
+      matchedRoute.permissions.some((perm) => userPermissions.includes(perm));
+
+    if (!hasPermission) {
+      return '/dashboard';
+    }
+  }
+
+  return null;
+};

apps/backoffice/tsconfig.app.json

@@ -0,0 +1,27 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "types": [
+      "node",
+      "@nx/react/typings/cssmodule.d.ts",
+      "@nx/react/typings/image.d.ts",
+      "vite/client"
+    ]
+  },
+  "exclude": [
+    "src/**/*.spec.ts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.tsx",
+    "src/**/*.test.tsx",
+    "src/**/*.spec.js",
+    "src/**/*.test.js",
+    "src/**/*.spec.jsx",
+    "src/**/*.test.jsx",
+    "vite.config.ts",
+    "vite.config.mts",
+    "vitest.config.ts",
+    "vitest.config.mts"
+  ],
+  "include": ["src/**/*.js", "src/**/*.jsx", "src/**/*.ts", "src/**/*.tsx"]
+}

apps/backoffice/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "allowJs": false,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "types": ["vite/client", "vitest"]
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.app.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ],
+  "extends": "../../tsconfig.base.json"
+}

apps/backoffice/tsconfig.spec.json

@@ -0,0 +1,30 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "types": [
+      "vitest/globals",
+      "vitest/importMeta",
+      "vite/client",
+      "node",
+      "vitest",
+      "@nx/react/typings/cssmodule.d.ts",
+      "@nx/react/typings/image.d.ts"
+    ]
+  },
+  "include": [
+    "vite.config.ts",
+    "vite.config.mts",
+    "vitest.config.ts",
+    "vitest.config.mts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.test.tsx",
+    "src/**/*.spec.tsx",
+    "src/**/*.test.js",
+    "src/**/*.spec.js",
+    "src/**/*.test.jsx",
+    "src/**/*.spec.jsx",
+    "src/**/*.d.ts"
+  ]
+}

apps/backoffice/vite.config.ts

@@ -0,0 +1,42 @@
+/// <reference types='vitest' />
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin';
+import { nxCopyAssetsPlugin } from '@nx/vite/plugins/nx-copy-assets.plugin';
+
+export default defineConfig(() => ({
+  root: __dirname,
+  cacheDir: '../../node_modules/.vite/apps/backoffice',
+  server: {
+    port: 3000,
+    host: 'localhost',
+  },
+  preview: {
+    port: 3001,
+    host: 'localhost',
+  },
+  plugins: [react(), nxViteTsPaths(), nxCopyAssetsPlugin(['*.md'])],
+  // Uncomment this if you are using workers.
+  // worker: {
+  //  plugins: [ nxViteTsPaths() ],
+  // },
+  build: {
+    outDir: '../../dist/apps/backoffice',
+    emptyOutDir: true,
+    reportCompressedSize: true,
+    commonjsOptions: {
+      transformMixedEsModules: true,
+    },
+  },
+  test: {
+    watch: false,
+    globals: true,
+    environment: 'jsdom',
+    include: ['src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
+    reporters: ['default'],
+    coverage: {
+      reportsDirectory: '../../coverage/apps/backoffice',
+      provider: 'v8' as const,
+    },
+  },
+}));

apps/dimentorin/.deploy

@@ -0,0 +1 @@
+Tue, Nov 25, 2025  4:21:27 PM

apps/dimentorin/.deploy-trigger

@@ -0,0 +1,2 @@
+# Deployment trigger
+# Updated to deploy circular dependency fixes and auth hooks

apps/dimentorin/.env.example

@@ -0,0 +1 @@
+VITE_API_URL=

apps/dimentorin/index.html

@@ -6,8 +6,8 @@
     <base href="/" />
 
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <link rel="icon" type="image/x-icon" href="/favicon.ico" />
-    <link rel="stylesheet" href="/src/styles.css" />
+    <link rel="icon" type="image/x-icon" href="/logos/simple.svg" />
+    <link rel="stylesheet" href="/src/index.css" />
   </head>
   <body>
     <div id="root"></div>