add maintenance page

.claude/settings.local.json

@@ -0,0 +1,18 @@
+{
+  "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)"
+    ],
+    "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,3 @@
+
+VITE_SUPABASE_URL=https://your-project-id.supabase.co
+VITE_SUPABASE_ANON_KEY=your-anon-key-here

.envrc

@@ -1 +0,0 @@
-use flake

.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/nix-build.yml

@@ -1,109 +0,0 @@
-name: Nix Build & Deploy
-
-on:
-  push:
-    branches: ['develop']
-  pull_request:
-    branches: ['develop']
-
-jobs:
-  detect:
-    runs-on: ubuntu-latest
-    outputs:
-      affected: ${{ steps.affected.outputs.apps }}
-    steps:
-      - uses: actions/checkout@v4
-        with:
-          fetch-depth: 0
-
-      - name: Setup Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version: 22
-
-      - name: Install dependencies
-        run: npm ci --legacy-peer-deps
-
-      - name: Detect affected apps
-        id: affected
-        run: |
-          AFFECTED=$(npx nx show projects --affected --base=HEAD~1 --type=app 2>/dev/null | tr '\n' ' ')
-          echo "Affected apps: $AFFECTED"
-          APPS="[]"
-          for app in landing backoffice gacha dimentorin hackathon infra qrcampaign; do
-            if echo "$AFFECTED" | grep -qw "$app"; then
-              APPS=$(echo "$APPS" | jq -c ". + [\"$app\"]")
-            fi
-          done
-          echo "apps=$APPS" >> "$GITHUB_OUTPUT"
-          echo "Matrix: $APPS"
-
-  build:
-    needs: detect
-    if: needs.detect.outputs.affected != '[]'
-    runs-on: ubuntu-latest
-    strategy:
-      matrix:
-        app: ${{ fromJson(needs.detect.outputs.affected) }}
-    steps:
-      - uses: actions/checkout@v4
-
-      - name: Install Nix
-        uses: DeterminateSystems/nix-installer-action@main
-
-      - name: Setup Cachix
-        uses: cachix/cachix-action@v15
-        with:
-          name: msdqn
-          authToken: '${{ secrets.CACHIX_AUTH_TOKEN }}'
-
-      - name: Build ${{ matrix.app }}
-        run: nix build .#${{ matrix.app }} -o result-${{ matrix.app }}
-
-      - name: Push to Cachix
-        if: github.event_name == 'push' && github.ref == 'refs/heads/develop'
-        run: cachix push msdqn result-${{ matrix.app }}
-
-  deploy:
-    needs: build
-    if: github.event_name == 'push' && github.ref == 'refs/heads/develop'
-    runs-on: ubuntu-latest
-    steps:
-      - name: Install Nix
-        uses: DeterminateSystems/nix-installer-action@main
-
-      - name: Setup SSH
-        env:
-          INFRA_DEPLOY_KEY: ${{ secrets.INFRA_DEPLOY_KEY }}
-        run: |
-          mkdir -p ~/.ssh
-          echo "${INFRA_DEPLOY_KEY}" > ~/.ssh/deploy_key
-          chmod 600 ~/.ssh/deploy_key
-          ssh-keyscan github.com >> ~/.ssh/known_hosts 2>/dev/null
-          ssh-keyscan 167.235.70.37 >> ~/.ssh/known_hosts 2>/dev/null
-
-      - name: Update infra flake.lock
-        run: |
-          export GIT_SSH_COMMAND="ssh -i ~/.ssh/deploy_key -o IdentitiesOnly=yes"
-          git clone git@github.com:IMPHNEN/imphnen-infrastructure.git /tmp/infra
-          cd /tmp/infra
-          nix flake update imphnen-frontend
-          if git diff --quiet flake.lock; then
-            echo "flake.lock unchanged, skipping"
-          else
-            git config user.name "github-actions[bot]"
-            git config user.email "github-actions[bot]@users.noreply.github.com"
-            git add flake.lock
-            git commit -m "chore: update imphnen-frontend-service to ${GITHUB_SHA::7}"
-            git push
-          fi
-
-      - name: Deploy to server
-        continue-on-error: true
-        run: |
-          ssh -i ~/.ssh/deploy_key -o ConnectTimeout=15 -o StrictHostKeyChecking=accept-new root@167.235.70.37 \
-            'nixos-rebuild switch --flake github:IMPHNEN/imphnen-infrastructure#hetzner --refresh 2>&1 | tail -30'
-
-      - name: Cleanup
-        if: always()
-        run: rm -f ~/.ssh/deploy_key

.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

@@ -4,7 +4,7 @@
 dist
 tmp
 out-tsc
-docs/FigmaImage/
+
 # dependencies
 node_modules
 
@@ -66,17 +66,3 @@ out
 .github/instructions/nx.instructions.md
 
 .env.local
-
-# Nix
-.direnv
-result
-
-.claude/worktrees
-.claude/settings.local.json
-
-# Screenshots and Test Reports
-**/screenshots
-/test-results/
-/playwright-report/
-/blob-report/
-/playwright/.cache

.verdaccio/config.yml

@@ -0,0 +1,28 @@
+# path to a directory with all packages
+storage: ../tmp/local-registry/storage
+
+# a list of other known repositories we can talk to
+uplinks:
+  npmjs:
+    url: https://registry.npmjs.org/
+    maxage: 60m
+
+packages:
+  '**':
+    # give all users (including non-authenticated users) full access
+    # because it is a local registry
+    access: $all
+    publish: $all
+    unpublish: $all
+
+    # if package is not available locally, proxy requests to npm registry
+    proxy: npmjs
+
+# log settings
+log:
+  type: stdout
+  format: pretty
+  level: warn
+
+publish:
+  allow_offline: true # set offline to true to allow publish offline

.vscode/extensions.json

@@ -0,0 +1,8 @@
+{
+  "recommendations": [
+    "nrwl.angular-console",
+    "esbenp.prettier-vscode",
+    "dbaeumer.vscode-eslint",
+    "ms-playwright.playwright"
+  ]
+}

CLAUDE.md

@@ -1,93 +0,0 @@
-# IMPHNEN Frontend Service
-
-Nx monorepo for IMPHNEN (Ingin Menjadi Programmer Handal Namun Enggan Ngoding) — Indonesia's largest programmer community.
-
-## Tech Stack
-
-- **Monorepo**: Nx 22.6
-- **Framework**: Next.js 16 (landing), Vite + React 19 (all other apps)
-- **Routing**: react-router v7 (Vite apps), Next.js App Router (landing)
-- **Styling**: Tailwind CSS v4, class-variance-authority (CVA)
-- **State**: Zustand, TanStack React Query
-- **Forms**: react-hook-form + zod
-- **Build/Deploy**: Nix flakes, Cachix binary cache, NixOS modules
-- **CI/CD**: GitHub Actions with `nx affected` + matrix strategy
-- **Node**: v22
-
-## Project Structure
-
-### Apps
-| App | Framework | Description |
-|-----|-----------|-------------|
-| `landing` | Next.js 16 | Public website |
-| `backoffice` | Vite + React | Admin dashboard |
-| `hackathon` | Vite + React | Hackathon platform |
-| `dimentorin` | Vite + React | Mentoring platform |
-| `gacha` | Vite + React | Merch gacha system |
-| `qrcampaign` | Vite + React | QR campaign tool |
-| `infra` | Vite + React | Infrastructure dashboard |
-
-### Shared Libraries
-| Lib | Purpose | Depends on |
-|-----|---------|------------|
-| `utils` | Pure utilities only: `cn`, `For`, `Show`, `useQueryState`, `useModalLogin`, react-query helpers, react-router file-based routing | nothing |
-| `service` | Business logic: API clients, auth hooks, storage (SessionToken/SessionUser), constants (PERMISSIONS, cities) | `utils` |
-| `ui` | UI components: atoms (Button, Input, Card, Dialog, Drawer, Form, Label), molecules, organisms (Navbar, Sidebar, Datatable) | `utils`, `service` |
-
-**Dependency rule**: `ui` → `service` → `utils` (never the reverse)
-
-## Common Commands
-
-```bash
-# Dev
-nx dev <app>              # Start dev server
-nx build <app>            # Build single app
-nx run-many -t build --all # Build everything
-
-# Test
-nx test <lib>             # Run unit tests (vitest)
-nx e2e <app>-e2e          # Run e2e tests (playwright)
-nx lint <project>         # Lint
-
-# Build all affected
-nx affected -t build      # Only build what changed
-nx affected -t test       # Only test what changed
-
-# Nix
-nix build .#<app>         # Build Nix package for an app
-nix develop               # Enter dev shell (node 22, bun, git, jq)
-```
-
-## Nix / Deployment
-
-All Nix config is in a single `flake.nix`:
-- `mkViteApp`: Builds Vite apps as Nix packages
-- `mkLandingApp`: Builds the Next.js landing app
-- `mkLandingModule`: NixOS module (systemd service for Next.js)
-- `mkStaticAppModule`: NixOS module (nginx for static Vite apps)
-- `npmDepsHash`: Must be updated when `package-lock.json` changes. Use `lib.fakeHash` to get the new hash from a failed build.
-
-## CI/CD Pipeline (.github/workflows/nix-build.yml)
-
-1. **detect**: Uses `nx affected` to find changed apps
-2. **build**: Matrix strategy builds only affected apps with Nix, pushes to Cachix
-3. **deploy**: Clones `imphnen-infrastructure`, updates `flake.lock`, pushes, then runs `clan machines update hetzner` to deploy to the Hetzner server
-
-Required GitHub secrets: `CACHIX_AUTH_TOKEN`, `INFRA_DEPLOY_KEY` (SSH key for both GitHub and server access)
-
-The server (167.235.70.37) pulls pre-built packages from Cachix during `nixos-rebuild`.
-
-## Environment Variables
-
-- Vite apps: `VITE_API_URL`, `VITE_GITHUB_CLIENT_ID`
-- Next.js (landing): `NEXT_PUBLIC_API_URL`, `NEXT_PUBLIC_GITHUB_CLIENT_ID`
-- The `getBaseURL()` function in `libs/service/src/api/index.ts` handles both environments
-
-## Key Conventions
-
-- Atomic design: atoms → molecules → organisms
-- Components have their own folder with `component.tsx`, `index.ts`, `spec.tsx`, `stories.tsx`
-- Use `cn()` from `@imphnen-frontend-service/utils` for className merging
-- Use `'use client'` directive on any component using React hooks (for Next.js compatibility)
-- Button variants via CVA: `primary`, `secondary`, `text`, `bordered`, `success`, `danger`
-- Landing app uses `container` class — Tailwind v4 requires explicit `margin-inline: auto` (defined in globals.css)

README.md

@@ -4,117 +4,135 @@
   <img src="docs/logo.svg" alt="IMPHNEN">
 </p>
 
-Monorepo for all frontend services of [IMPHNEN](https://imphnen.dev) (Ingin Menjadi Programmer Handal Namun Enggan Ngoding) — Indonesia's largest programmer community.
+This repository is a **monorepo** for all frontend services of IMPHNEN. The monorepo includes three main applications:
 
-## Apps
+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>.
 
-| App | Framework | URL |
-|-----|-----------|-----|
-| **Landing** | Next.js 16 | [imphnen.dev](https://imphnen.dev) |
-| **Backoffice** | Vite + React | [backoffice.imphnen.dev](https://backoffice.imphnen.dev) |
-| **Hackathon** | Vite + React | [hackathon.imphnen.dev](https://dimentorin.imphnen.dev) |
-| **Dimentorin** | Vite + React | [dimentorin.imphnen.dev](https://dimentorin.imphnen.dev) |
-| **Gacha** | Vite + React | [gacha.imphnen.dev](https://gacha.imphnen.dev) |
-| **QR Campaign** | Vite + React | [qr.imphnen.dev](https://qr.imphnen.dev) |
-| **Infra** | Vite + React | [infra.imphnen.dev](https://infra.imphnen.dev) |
+## How to install
 
-## Shared Libraries
+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
+   ```
 
-| Lib | Purpose |
-|-----|---------|
-| `utils` | Pure utilities — `cn()`, `For`, `Show`, `useQueryState`, `useModalLogin` |
-| `service` | Business logic — API clients, auth hooks, storage, constants |
-| `ui` | UI components — atoms, molecules, organisms (atomic design) |
+## How to run
 
-## Getting Started
+### Setup Environment Variables
 
-### Prerequisites
-
-- Node.js 22
-- [Nix](https://nixos.org/download/) (optional, for reproducible builds)
-
-### Setup
+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
-git clone https://github.com/IMPHNEN/imphnen-frontend-service.git
-cd imphnen-frontend-service
-npm install
-```
-
-Or with Nix:
-
-```sh
-nix develop  # enters dev shell with node 22, bun, git, jq
-```
-
-### Environment Variables
-
-Copy `.env.example` to `.env` in the app directory:
-
-```sh
-cp apps/<app>/.env.example apps/<app>/.env
+cd apps/{appname}
+cp .env.example .env
 ```
 
 ### Development
 
-```sh
-nx dev <app>        # e.g. nx dev landing, nx dev backoffice
-```
+Use the following commands to run in development mode:
+
+- **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
+  ```
 
 ### Build
 
-```sh
-nx build <app>            # build single app
-nx run-many -t build --all # build everything
-nx affected -t build       # build only what changed
-```
+Use the following commands to build the applications:
 
-### Nix Build
+- **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
+  ```
 
-```sh
-nix build .#<app>    # e.g. nix build .#landing, .#dimentorin
-```
+### Production
 
-All Nix config lives in `flake.nix`. When `package-lock.json` changes, update `npmDepsHash` using `lib.fakeHash`.
+Use the following commands to run the applications in production mode:
 
-### Testing
-
-```sh
-nx test <project>    # unit tests (vitest)
-nx e2e <app>-e2e     # e2e tests (playwright)
-nx lint <project>    # eslint
-```
+- **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
+  ```
 
 ### Storybook
 
-```sh
-nx storybook ui      # run storybook for ui lib
-nx build-storybook ui # build static storybook
-```
+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:
 
-## CI/CD
+- **Run Storybook**
 
-GitHub Actions pipeline (`.github/workflows/nix-build.yml`):
+  This command starts Storybook in development mode, allowing you to view and test UI components interactively.
 
-1. **detect** — uses `nx affected` to find changed apps
-2. **build** — matrix strategy builds only affected apps with Nix, pushes to [Cachix](https://app.cachix.org/cache/msdqn)
-3. **deploy** — updates `flake.lock` in [imphnen-infrastructure](https://github.com/IMPHNEN/imphnen-infrastructure) and deploys to the server using [clan](https://clan.lol)
+  ```sh
+  npm run ui:storybook
+  ```
 
-## Tech Stack
+- **Run Unit Test**
 
-- **Monorepo**: Nx 22.6
-- **Frontend**: React 19, TypeScript
-- **Styling**: Tailwind CSS v4, CVA
-- **State**: Zustand, TanStack React Query
-- **Forms**: react-hook-form + zod
-- **Build**: Nix flakes, Cachix
-- **CI**: GitHub Actions
+  This command runs unit tests for the UI components to ensure they function as expected.
 
-## Contributing
+  ```sh
+  npm run ui:test
+  ```
 
-1. Fork and clone the repository
-2. Create a branch: `git checkout -b feat/feature-name`
-3. Make changes, commit, and push
-4. Open a pull request to the `develop` branch
+- **Build Components**
 
-Issues and feedback welcome via [GitHub Issues](https://github.com/IMPHNEN/imphnen-frontend-service/issues).
+  This command generates a static build of Storybook, which can be deployed for sharing and documentation purposes.
+
+  ```sh
+  npm run ui:build
+  ```
+
+## How to contribute
+
+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.
+
+If you encounter any issues or problems, feel free to create a new Issue.

SECURITY.md

@@ -1,21 +0,0 @@
-# Security Policy
-
-## Supported Versions
-
-Use this section to tell people about which versions of your project are
-currently being supported with security updates.
-
-| Version | Supported          |
-| ------- | ------------------ |
-| 5.1.x   | :white_check_mark: |
-| 5.0.x   | :x:                |
-| 4.0.x   | :white_check_mark: |
-| < 4.0   | :x:                |
-
-## Reporting a Vulnerability
-
-Use this section to tell people how to report a vulnerability.
-
-Tell them where to go, how often they can expect to get an update on a
-reported vulnerability, what to expect if the vulnerability is accepted or
-declined, etc.

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

@@ -1,2 +1 @@
 VITE_API_URL=
-VITE_GITHUB_CLIENT_ID=

apps/backoffice/index.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" data-theme="light">
+<html lang="en">
   <head>
     <meta charset="utf-8" />
     <title>Backoffice</title>
@@ -7,9 +7,10 @@
 
     <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 style="display:flex;align-items:center;justify-content:center;min-height:100vh;background:#f9fafb"><div style="width:40px;height:40px;border:3px solid #e5e7eb;border-top-color:#3b82f6;border-radius:50%;animation:spin .8s linear infinite"></div></div><style>@keyframes spin{to{transform:rotate(360deg)}}</style></div>
+    <div id="root"></div>
     <script type="module" src="/src/main.tsx"></script>
   </body>
 </html>

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

@@ -1,4 +1,5 @@
 import { Cell, Pie, PieChart, ResponsiveContainer, Tooltip } from "recharts"
+import { PieLabelProps } from "recharts/types/polar/Pie"
 
 type ChartProps = {
   name: string
@@ -13,20 +14,14 @@ const chartData: ChartProps[] = [
 ]
 
 const RADIAN = Math.PI / 180;
-const renderCustomizedLabel = (props: any) => {
-  const cx = props.cx ?? 0
-  const cy = props.cy ?? 0
-  const midAngle = props.midAngle ?? 0
-  const innerRadius = props.innerRadius ?? 0
-  const outerRadius = props.outerRadius ?? 0
-  const percent = props.percent ?? 0
+const renderCustomizedLabel = ({ cx, cy, midAngle, innerRadius, outerRadius, percent }: PieLabelProps) => {
   const radius = innerRadius + (outerRadius - innerRadius) * 0.5;
-  const x = cx + radius * Math.cos(-midAngle * RADIAN);
-  const y = cy + radius * Math.sin(-midAngle * RADIAN);
+  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 * 100).toFixed(0)}%`}
+      {`${((percent ?? 1) * 100).toFixed(0)}%`}
     </text>
   );
 };

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

@@ -8,17 +8,16 @@ import { toast } from 'sonner';
 
 export const useItem = (
   nextStep: () => void,
-  initialValues?: Partial<TGachaItem>,
-  onDataCapture?: (data: any) => void,
+  initialValues?: TGachaItem
 ) => {
-  const form = useForm<any>({
+  const form = useForm<TGachaItem>({
     resolver: zodResolver(gachaItemSchema),
     mode: 'all',
     defaultValues: initialValues,
   });
 
   const onSubmit = form.handleSubmit((data) => {
-    onDataCapture?.(data);
+    console.log('Form data:', data);
     nextStep();
   });
 
@@ -39,9 +38,8 @@ export const useConfirmItem = (
 ) => {
   const onConfirm = async () => {
     try {
-      if (actionFunction) {
-        await actionFunction();
-      }
+      // const result = await actionFunction?.();
+      // result ? toast.success(messages?.success) : toast.error(messages?.error);
       toast.success(messages?.success);
       onClose();
       resetStep();

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

@@ -8,17 +8,16 @@ import { toast } from 'sonner';
 
 export const useItem = (
   nextStep: () => void,
-  initialValues?: Partial<TGachaRollItem>,
-  onDataCapture?: (data: any) => void,
+  initialValues?: TGachaRollItem
 ) => {
-  const form = useForm<any>({
+  const form = useForm<TGachaRollItem>({
     resolver: zodResolver(gachaRollItemSchema),
     mode: 'all',
     defaultValues: initialValues,
   });
 
   const onSubmit = form.handleSubmit((data) => {
-    onDataCapture?.(data);
+    console.log('Form data:', data);
     nextStep();
   });
 
@@ -39,9 +38,8 @@ export const useConfirmItem = (
 ) => {
   const onConfirm = async () => {
     try {
-      if (actionFunction) {
-        await actionFunction();
-      }
+      // const result = await actionFunction?.();
+      // result ? toast.success(messages?.success) : toast.error(messages?.error);
       toast.success(messages?.success);
       onClose();
       resetStep();

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)/layout.tsx

@@ -0,0 +1,18 @@
+import { FC, ReactElement } from 'react';
+import { Outlet } from 'react-router-dom';
+import { BackofficeSidebar } from '@imphnen-frontend-service/ui/organisms';
+
+export const AppLayout: FC = (): ReactElement => {
+  return (
+    <div className="bg-primary-50 min-h-screen flex justify-center">
+      <div className="bg-primary-50 min-h-screen w-full flex">
+        <BackofficeSidebar />
+        <div className="flex-1 overflow-auto">
+          <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

@@ -1,18 +1,23 @@
 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,
-  onDataCapture?: (data: any) => void,
+  initialValues?: any
 ) => {
   const form = useForm<any>({
+    // resolver: zodResolver(),
     mode: 'all',
     defaultValues: initialValues,
   });
 
   const onSubmit = form.handleSubmit((data) => {
-    onDataCapture?.(data);
+    console.log('Form data:', data);
     nextStep();
   });
 
@@ -33,9 +38,8 @@ export const useConfirmItem = (
 ) => {
   const onConfirm = async () => {
     try {
-      if (actionFunction) {
-        await actionFunction();
-      }
+      // const result = await actionFunction?.();
+      // result ? toast.success(messages?.success) : toast.error(messages?.error);
       toast.success(messages?.success);
       onClose();
       resetStep();

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/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

@@ -1,18 +1,23 @@
 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,
-  onDataCapture?: (data: any) => void,
+  initialValues?: any
 ) => {
   const form = useForm<any>({
+    // resolver: zodResolver(),
     mode: 'all',
     defaultValues: initialValues,
   });
 
   const onSubmit = form.handleSubmit((data) => {
-    onDataCapture?.(data);
+    console.log('Form data:', data);
     nextStep();
   });
 
@@ -33,9 +38,8 @@ export const useConfirmItem = (
 ) => {
   const onConfirm = async () => {
     try {
-      if (actionFunction) {
-        await actionFunction();
-      }
+      // const result = await actionFunction?.();
+      // result ? toast.success(messages?.success) : toast.error(messages?.error);
       toast.success(messages?.success);
       onClose();
       resetStep();

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

@@ -1,4 +1,4 @@
-import { Button, Input, NativeSelect as Select, ToggleInput } from "@imphnen-frontend-service/ui/atoms"
+import { Button, Input, Select, ToggleInput } from "@imphnen-frontend-service/ui/atoms"
 import { cn } from "@imphnen-frontend-service/utils"
 import { FC } from "react"
 

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

@@ -1,4 +1,4 @@
-import { Button, Input, NativeSelect as Select, Textarea } from "@imphnen-frontend-service/ui/atoms"
+import { Button, Input, Select, Textarea } from "@imphnen-frontend-service/ui/atoms"
 import { cn } from "@imphnen-frontend-service/utils"
 import { FC } from "react"
 

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

@@ -4,8 +4,18 @@ 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 { useRoleList, useDeleteRole, TRolesListItem } from "@imphnen-frontend-service/service";
-import { toast } from "sonner";
+
+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>({})
@@ -14,25 +24,7 @@ export const UserRolesPermission: FC = () => {
     pageSize: 9,
   });
 
-  const { data: rolesData, isLoading } = useRoleList({
-    page: pagination.pageIndex + 1,
-    per_page: pagination.pageSize,
-  });
-  const deleteRole = useDeleteRole();
-
-  const roles: TRolesListItem[] = rolesData?.data ?? [];
-  const totalItems = rolesData?.meta?.total ?? roles.length;
-
-  const handleDelete = async (id: string) => {
-    try {
-      await deleteRole.mutateAsync(id);
-      toast.success('Role berhasil dihapus');
-    } catch {
-      toast.error('Role gagal dihapus');
-    }
-  };
-
-  const columns: ColumnDef<TRolesListItem>[] = [
+  const columns: ColumnDef<UserRolesPermissionType>[] = [
     {
       id: 'select',
       meta: { cellClassName: cn("w-20") },
@@ -56,12 +48,12 @@ export const UserRolesPermission: FC = () => {
     {
       id: 'role',
       header: 'Role',
-      accessorKey: 'name',
+      accessorKey: 'role',
     },
     {
       id: 'totalUser',
-      header: 'Total Permissions',
-      accessorKey: 'permissions_count',
+      header: 'Total User',
+      accessorKey: 'totalUser',
     },
     {
       header: 'Action',
@@ -83,7 +75,6 @@ export const UserRolesPermission: FC = () => {
             size="sm"
             onClick={(e) => {
               e.stopPropagation();
-              handleDelete(row.original.id);
             }}
             className="flex items-center gap-2 w-max"
           >
@@ -95,7 +86,7 @@ export const UserRolesPermission: FC = () => {
   ]
 
   const table = useReactTable({
-    data: roles,
+    data: mockData,
     columns,
     state: {
       pagination,
@@ -106,8 +97,8 @@ export const UserRolesPermission: FC = () => {
     getCoreRowModel: getCoreRowModel(),
     getPaginationRowModel: getPaginationRowModel(),
     onPaginationChange: setPagination,
-    pageCount: Math.ceil(totalItems / pagination.pageSize),
-    manualPagination: true,
+    pageCount: Math.ceil(mockData.length / pagination.pageSize),
+    manualPagination: false,
   });
 
   return (
@@ -115,16 +106,12 @@ export const UserRolesPermission: FC = () => {
       <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 Role
+          Add Rols
         </Button>
       </div>
 
       <div className="bg-white shadow p-8 rounded-lg">
-        {isLoading ? (
-          <div className="text-center py-8 text-neutral-400">Loading...</div>
-        ) : (
-          <DataTable data={roles} columns={columns} table={table} />
-        )}
+        <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/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,187 @@
+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">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

@@ -2,9 +2,9 @@ import { useForm } from 'react-hook-form';
 import {
   authLoginSchema,
   TLoginRequest,
-  usePostLogin,
 } 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>({
@@ -12,13 +12,12 @@ export const useLogin = () => {
     mode: 'all',
   });
 
-  const loginMutation = usePostLogin();
+  const { signIn } = useSession();
 
-  const onSubmit = form.handleSubmit((data) => loginMutation.mutate(data));
+  const onSubmit = form.handleSubmit((data) => signIn(data));
 
   return {
     form,
     onSubmit,
-    isLoading: loginMutation.isPending,
   };
 };

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/components/city-filter-select.tsx

@@ -1,144 +0,0 @@
-import { FC, useState, useRef, useEffect } from 'react';
-import { FilterOutlined } from '@ant-design/icons';
-import INDONESIAN_CITIES from '../constants/cities';
-
-interface CityFilterSelectProps {
-  value: string;
-  onChange: (value: string) => void;
-  className?: string;
-  placeholder?: string;
-  allOptionLabel?: string;
-  filterIcon?: boolean;
-}
-
-export const CityFilterSelect: FC<CityFilterSelectProps> = ({
-  value,
-  onChange,
-  className = '',
-  placeholder = 'Search cities...',
-  allOptionLabel = 'All Cities',
-  filterIcon = true,
-}) => {
-  const [isOpen, setIsOpen] = useState(false);
-  const [searchQuery, setSearchQuery] = useState('');
-  const dropdownRef = useRef<HTMLDivElement>(null);
-  const inputRef = useRef<HTMLInputElement>(null);
-
-  const filteredCities = INDONESIAN_CITIES.filter((city) =>
-    city.toLowerCase().includes(searchQuery.toLowerCase())
-  );
-
-  useEffect(() => {
-    const handleClickOutside = (event: MouseEvent) => {
-      if (
-        dropdownRef.current &&
-        !dropdownRef.current.contains(event.target as Node)
-      ) {
-        setIsOpen(false);
-        setSearchQuery('');
-      }
-    };
-
-    document.addEventListener('mousedown', handleClickOutside);
-    return () => document.removeEventListener('mousedown', handleClickOutside);
-  }, []);
-
-  const handleSelectCity = (city: string) => {
-    onChange(city);
-    setSearchQuery('');
-    setIsOpen(false);
-  };
-
-  const handleInputClick = () => {
-    setIsOpen(true);
-    setSearchQuery('');
-  };
-
-  const handleClearSelection = () => {
-    onChange('all');
-    setSearchQuery('');
-    setIsOpen(false);
-  };
-
-  const displayValue = value === 'all' ? allOptionLabel : value;
-  const showClearButton = value !== 'all' && !isOpen;
-
-  return (
-    <div className={`relative ${className}`} ref={dropdownRef}>
-      <div className="relative">
-        {filterIcon && (
-          <FilterOutlined className="absolute left-3 top-1/2 transform -translate-y-1/2 text-neutral-400 text-sm pointer-events-none z-10" />
-        )}
-        <input
-          ref={inputRef}
-          type="text"
-          value={isOpen ? searchQuery : displayValue}
-          onChange={(e) => {
-            setSearchQuery(e.target.value);
-            if (!isOpen) setIsOpen(true);
-          }}
-          onClick={handleInputClick}
-          onFocus={handleInputClick}
-          placeholder={isOpen ? placeholder : displayValue}
-          className={`border border-neutral-200 rounded-lg pr-10 py-2.5 text-sm w-full focus:border-primary-500 focus:outline-none appearance-none bg-white cursor-pointer ${
-            filterIcon ? ' pl-10' : 'pl-3'
-          }`}
-        />
-        {showClearButton && (
-          <button
-            type="button"
-            onClick={(e) => {
-              e.stopPropagation();
-              handleClearSelection();
-            }}
-            className="absolute right-3 top-1/2 -translate-y-1/2 text-neutral-400 hover:text-neutral-600 text-xs cursor-pointer z-20"
-          >
-            ✕
-          </button>
-        )}
-      </div>
-
-      {isOpen && (
-        <div className="absolute z-50 w-full mt-1 bg-white border border-neutral-200 rounded-lg shadow-lg max-h-60 overflow-y-auto">
-          <div
-            onClick={() => handleSelectCity('all')}
-            className={`px-3 py-2 cursor-pointer hover:bg-neutral-50 border-b border-neutral-100 ${
-              value === 'all'
-                ? 'bg-primary-50 text-primary-700 font-medium'
-                : 'text-neutral-900'
-            }`}
-          >
-            {allOptionLabel}
-          </div>
-
-          {filteredCities.length > 0 ? (
-            <div className="py-1">
-              {filteredCities.slice(0, 100).map((city) => (
-                <div
-                  key={city}
-                  onClick={() => handleSelectCity(city)}
-                  className={`px-3 py-2 cursor-pointer hover:bg-neutral-50 text-sm ${
-                    value === city
-                      ? 'bg-primary-50 text-primary-700 font-medium'
-                      : 'text-neutral-700'
-                  }`}
-                >
-                  {city}
-                </div>
-              ))}
-              {filteredCities.length > 100 && (
-                <div className="px-3 py-2 text-xs text-neutral-500 border-t border-neutral-100">
-                  Showing first 100 results. Continue typing to refine...
-                </div>
-              )}
-            </div>
-          ) : searchQuery ? (
-            <div className="px-3 py-2 text-neutral-500 text-sm">
-              No cities found matching "{searchQuery}"
-            </div>
-          ) : null}
-        </div>
-      )}
-    </div>
-  );
-};

apps/backoffice/src/components/list-helpers.tsx

@@ -1,79 +0,0 @@
-import * as React from 'react';
-import type { Row, Table } from '@tanstack/react-table';
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-  Checkbox,
-} from '@imphnen-frontend-service/ui/atoms';
-
-/** Renders a header checkbox that toggles all rows (with indeterminate support). */
-export function SelectAllCheckbox<T>({ table }: { table: Table<T> }) {
-  return (
-    <Checkbox
-      checked={
-        table.getIsAllRowsSelected()
-          ? true
-          : table.getIsSomeRowsSelected()
-            ? 'indeterminate'
-            : false
-      }
-      onCheckedChange={(v) =>
-        table.toggleAllRowsSelected(!!v && v !== 'indeterminate')
-      }
-      aria-label="Select all"
-    />
-  );
-}
-
-/** Per-row checkbox. */
-export function RowSelectCheckbox<T>({ row }: { row: Row<T> }) {
-  return (
-    <Checkbox
-      checked={row.getIsSelected()}
-      onCheckedChange={(v) => row.toggleSelected(!!v)}
-      aria-label="Select row"
-    />
-  );
-}
-
-type DeleteConfirmProps = {
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-  onConfirm: () => void;
-  title?: string;
-  description?: string;
-};
-
-export function DeleteConfirmDialog({
-  open,
-  onOpenChange,
-  onConfirm,
-  title = 'Hapus data ini?',
-  description = 'Tindakan ini tidak dapat dibatalkan. Data akan dihapus permanen.',
-}: DeleteConfirmProps) {
-  return (
-    <AlertDialog open={open} onOpenChange={onOpenChange}>
-      <AlertDialogContent>
-        <AlertDialogHeader>
-          <AlertDialogTitle>{title}</AlertDialogTitle>
-          <AlertDialogDescription>{description}</AlertDialogDescription>
-        </AlertDialogHeader>
-        <AlertDialogFooter>
-          <AlertDialogCancel>Batal</AlertDialogCancel>
-          <AlertDialogAction
-            onClick={onConfirm}
-            className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
-          >
-            Hapus
-          </AlertDialogAction>
-        </AlertDialogFooter>
-      </AlertDialogContent>
-    </AlertDialog>
-  );
-}

apps/backoffice/src/components/sidebar.tsx

@@ -1,233 +0,0 @@
-'use client';
-
-import { FC, ReactElement, useState } from 'react';
-import { useLocation, useNavigate } from '@tanstack/react-router';
-import {
-  LayoutDashboard,
-  Users,
-  UsersRound,
-  ClipboardCheck,
-  BookOpen,
-  MessageSquare,
-  MessageCircle,
-  Calendar,
-  CalendarClock,
-  Settings,
-  BarChart3,
-  RefreshCcw,
-  Inbox,
-  UserCog,
-  UserPlus,
-  ShieldCheck,
-  KeyRound,
-  User,
-  ChevronDown,
-  ChevronRight,
-} from 'lucide-react';
-import {
-  Sidebar,
-  SidebarContent,
-  SidebarGroup,
-  SidebarGroupContent,
-  SidebarGroupLabel,
-  SidebarHeader,
-  SidebarMenu,
-  SidebarMenuButton,
-  SidebarMenuItem,
-  SidebarMenuSub,
-  SidebarMenuSubButton,
-  SidebarMenuSubItem,
-} from '@imphnen-frontend-service/ui/atoms';
-import { cn } from '@imphnen-frontend-service/utils';
-
-type MenuLink = {
-  label: string;
-  href: string;
-  icon: React.ComponentType<{ className?: string }>;
-};
-
-type MenuGroup = {
-  label: string;
-  icon: React.ComponentType<{ className?: string }>;
-  children: MenuLink[];
-};
-
-type MenuItem = MenuLink | MenuGroup;
-
-const MENUS: MenuItem[] = [
-  {
-    label: 'Hackathon',
-    icon: BarChart3,
-    children: [
-      { label: 'Dashboard', href: '/hackathon-dashboard', icon: LayoutDashboard },
-      { label: 'Users', href: '/hackathon-users', icon: Users },
-      { label: 'Teams', href: '/hackathon-teams', icon: UsersRound },
-      { label: 'Submissions', href: '/hackathon-submissions', icon: ClipboardCheck },
-    ],
-  },
-  {
-    label: 'Dimentorin',
-    icon: BookOpen,
-    children: [
-      { label: 'Dashboard', href: '/dashboard-dimentorin', icon: LayoutDashboard },
-      { label: 'Users', href: '/users-dimentorin', icon: UserCog },
-      { label: 'Session', href: '/session-dimentorin', icon: CalendarClock },
-      { label: 'Content & Roadmap', href: '/roadmap-dimentorin', icon: BookOpen },
-      { label: 'Feedback & Review', href: '/feedback-review-dimentorin', icon: MessageSquare },
-      { label: 'Settings', href: '/settings-dimentorin', icon: Settings },
-    ],
-  },
-  {
-    label: 'Gacha',
-    icon: RefreshCcw,
-    children: [
-      { label: 'Dashboard', href: '/dashboard', icon: LayoutDashboard },
-      { label: 'Gacha Roll', href: '/gacha-roll', icon: RefreshCcw },
-      { label: 'Validasi Transaksi', href: '/transactions', icon: ClipboardCheck },
-      { label: 'Data Pengiriman', href: '/prizes', icon: Inbox },
-    ],
-  },
-  {
-    label: 'CMS',
-    icon: BookOpen,
-    children: [
-      { label: 'Events', href: '/cms-events', icon: Calendar },
-      { label: 'Testimonials', href: '/cms-testimonials', icon: MessageCircle },
-    ],
-  },
-];
-
-const FLAT_MENUS: MenuLink[] = [
-  { label: 'Permissions', href: '/permissions', icon: ShieldCheck },
-  { label: 'Roles', href: '/roles', icon: KeyRound },
-  { label: 'Data Akun', href: '/accounts', icon: User },
-];
-
-const isMenuGroup = (item: MenuItem): item is MenuGroup =>
-  (item as MenuGroup).children !== undefined;
-
-export const BackofficeSidebar: FC = (): ReactElement => {
-  const location = useLocation();
-  const navigate = useNavigate();
-
-  const isActive = (path: string) => {
-    if (path === '/dashboard' && location.pathname === '/dashboard-dimentorin') {
-      return false;
-    }
-    return location.pathname.includes(path);
-  };
-
-  const [openGroups, setOpenGroups] = useState<Record<string, boolean>>(() => {
-    const initial: Record<string, boolean> = {};
-    MENUS.forEach((menu) => {
-      if (
-        isMenuGroup(menu) &&
-        menu.children.some((child) => isActive(child.href))
-      ) {
-        initial[menu.label] = true;
-      }
-    });
-    return initial;
-  });
-
-  const toggleGroup = (label: string) =>
-    setOpenGroups((prev) => ({ ...prev, [label]: !prev[label] }));
-
-  return (
-    <Sidebar collapsible="offcanvas" variant="inset">
-      <SidebarHeader>
-        <div className="flex items-center justify-center px-2 py-3">
-          <img
-            src="/logos/simple.svg"
-            alt="IMPHNEN Logo"
-            className="h-10 w-auto"
-          />
-        </div>
-      </SidebarHeader>
-      <SidebarContent>
-        <SidebarGroup>
-          <SidebarGroupLabel>Navigation</SidebarGroupLabel>
-          <SidebarGroupContent>
-            <SidebarMenu>
-              {MENUS.map((menu) => {
-                const GroupIcon = menu.icon;
-                const open = !!openGroups[menu.label];
-                const groupHasActive =
-                  isMenuGroup(menu) &&
-                  menu.children.some((c) => isActive(c.href));
-                return (
-                  <SidebarMenuItem key={menu.label}>
-                    <SidebarMenuButton
-                      onClick={() => toggleGroup(menu.label)}
-                      isActive={groupHasActive && !open}
-                      className="justify-between"
-                    >
-                      <span className="flex items-center gap-2">
-                        <GroupIcon className="size-4" />
-                        <span>{menu.label}</span>
-                      </span>
-                      {open ? (
-                        <ChevronDown className="size-3.5 opacity-60" />
-                      ) : (
-                        <ChevronRight className="size-3.5 opacity-60" />
-                      )}
-                    </SidebarMenuButton>
-                    {isMenuGroup(menu) && open && (
-                      <SidebarMenuSub>
-                        {menu.children.map((child) => {
-                          const ChildIcon = child.icon;
-                          return (
-                            <SidebarMenuSubItem key={child.href}>
-                              <SidebarMenuSubButton
-                                asChild
-                                isActive={isActive(child.href)}
-                              >
-                                <button
-                                  type="button"
-                                  onClick={() =>
-                                    navigate({ to: child.href })
-                                  }
-                                  className={cn(
-                                    'w-full text-left',
-                                  )}
-                                >
-                                  <ChildIcon className="size-4" />
-                                  <span>{child.label}</span>
-                                </button>
-                              </SidebarMenuSubButton>
-                            </SidebarMenuSubItem>
-                          );
-                        })}
-                      </SidebarMenuSub>
-                    )}
-                  </SidebarMenuItem>
-                );
-              })}
-            </SidebarMenu>
-          </SidebarGroupContent>
-        </SidebarGroup>
-        <SidebarGroup>
-          <SidebarGroupLabel>System</SidebarGroupLabel>
-          <SidebarGroupContent>
-            <SidebarMenu>
-              {FLAT_MENUS.map((menu) => {
-                const Icon = menu.icon;
-                return (
-                  <SidebarMenuItem key={menu.href}>
-                    <SidebarMenuButton
-                      isActive={isActive(menu.href)}
-                      onClick={() => navigate({ to: menu.href })}
-                    >
-                      <Icon className="size-4" />
-                      <span>{menu.label}</span>
-                    </SidebarMenuButton>
-                  </SidebarMenuItem>
-                );
-              })}
-            </SidebarMenu>
-          </SidebarGroupContent>
-        </SidebarGroup>
-      </SidebarContent>
-    </Sidebar>
-  );
-};

apps/backoffice/src/constants/cities.ts

@@ -1,518 +0,0 @@
-const INDONESIAN_CITIES: string[] = [
-  'Aceh Selatan',
-  'Aceh Tenggara',
-  'Aceh Timur',
-  'Aceh Tengah',
-  'Aceh Barat',
-  'Aceh Besar',
-  'Pidie',
-  'Aceh Utara',
-  'Simeulue',
-  'Aceh Singkil',
-  'Bireuen',
-  'Aceh Barat Daya',
-  'Gayo Lues',
-  'Aceh Jaya',
-  'Nagan Raya',
-  'Aceh Tamiang',
-  'Bener Meriah',
-  'Pidie Jaya',
-  'Kota Banda Aceh',
-  'Kota Sabang',
-  'Kota Lhokseumawe',
-  'Kota Langsa',
-  'Kota Subulussalam',
-  'Tapanuli Tengah',
-  'Tapanuli Utara',
-  'Tapanuli Selatan',
-  'Nias',
-  'Langkat',
-  'Karo',
-  'Deli Serdang',
-  'Simalungun',
-  'Asahan',
-  'Labuhanbatu',
-  'Dairi',
-  'Toba',
-  'Mandailing Natal',
-  'Nias Selatan',
-  'Pakpak Bharat',
-  'Humbang Hasundutan',
-  'Samosir',
-  'Serdang Bedagai',
-  'Batu Bara',
-  'Padang Lawas Utara',
-  'Padang Lawas',
-  'Labuhanbatu Selatan',
-  'Labuhanbatu Utara',
-  'Nias Utara',
-  'Nias Barat',
-  'Kota Medan',
-  'Kota Pematangsiantar',
-  'Kota Sibolga',
-  'Kota Tanjung Balai',
-  'Kota Binjai',
-  'Kota Tebing Tinggi',
-  'Kota Padangsidimpuan',
-  'Kota Gunungsitoli',
-  'Pesisir Selatan',
-  'Solok',
-  'Sijunjung',
-  'Tanah Datar',
-  'Padang Pariaman',
-  'Agam',
-  'Lima Puluh Kota',
-  'Pasaman',
-  'Kepulauan Mentawai',
-  'Dharmasraya',
-  'Solok Selatan',
-  'Pasaman Barat',
-  'Kota Padang',
-  'Kota Solok',
-  'Kota Sawahlunto',
-  'Kota Padang Panjang',
-  'Kota Bukittinggi',
-  'Kota Payakumbuh',
-  'Kota Pariaman',
-  'Kampar',
-  'Indragiri Hulu',
-  'Bengkalis',
-  'Indragiri Hilir',
-  'Pelalawan',
-  'Rokan Hulu',
-  'Rokan Hilir',
-  'Siak',
-  'Kuantan Singingi',
-  'Kepulauan Meranti',
-  'Kota Pekanbaru',
-  'Kota Dumai',
-  'Kerinci',
-  'Merangin',
-  'Sarolangun',
-  'Batanghari',
-  'Muaro Jambi',
-  'Tanjung Jabung Barat',
-  'Tanjung Jabung Timur',
-  'Bungo',
-  'Tebo',
-  'Kota Jambi',
-  'Kota Sungai Penuh',
-  'Ogan Komering Ulu',
-  'Ogan Komering Ilir',
-  'Muara Enim',
-  'Lahat',
-  'Musi Rawas',
-  'Musi Banyuasin',
-  'Banyuasin',
-  'Ogan Komering Ulu Timur',
-  'Ogan Komering Ulu Selatan',
-  'Ogan Ilir',
-  'Empat Lawang',
-  'Penukal Abab Lematang Ilir',
-  'Musi Rawas Utara',
-  'Kota Palembang',
-  'Kota Pagar Alam',
-  'Kota Lubuk Linggau',
-  'Kota Prabumulih',
-  'Bengkulu Selatan',
-  'Rejang Lebong',
-  'Bengkulu Utara',
-  'Kaur',
-  'Seluma',
-  'Muko Muko',
-  'Lebong',
-  'Kepahiang',
-  'Bengkulu Tengah',
-  'Kota Bengkulu',
-  'Lampung Selatan',
-  'Lampung Tengah',
-  'Lampung Utara',
-  'Lampung Barat',
-  'Tulang Bawang',
-  'Tanggamus',
-  'Lampung Timur',
-  'Way Kanan',
-  'Pesawaran',
-  'Pringsewu',
-  'Mesuji',
-  'Tulang Bawang Barat',
-  'Pesisir Barat',
-  'Kota Bandar Lampung',
-  'Kota Metro',
-  'Bangka',
-  'Belitung',
-  'Bangka Selatan',
-  'Bangka Tengah',
-  'Bangka Barat',
-  'Belitung Timur',
-  'Kota Pangkal Pinang',
-  'Bintan',
-  'Karimun',
-  'Natuna',
-  'Lingga',
-  'Kepulauan Anambas',
-  'Kota Batam',
-  'Kota Tanjung Pinang',
-  'Kepulauan Seribu',
-  'Kota Jakarta Pusat',
-  'Kota Jakarta Utara',
-  'Kota Jakarta Barat',
-  'Kota Jakarta Selatan',
-  'Kota Jakarta Timur',
-  'Bogor',
-  'Sukabumi',
-  'Cianjur',
-  'Bandung',
-  'Garut',
-  'Tasikmalaya',
-  'Ciamis',
-  'Kuningan',
-  'Cirebon',
-  'Majalengka',
-  'Sumedang',
-  'Indramayu',
-  'Subang',
-  'Purwakarta',
-  'Karawang',
-  'Bekasi',
-  'Bandung Barat',
-  'Pangandaran',
-  'Kota Bogor',
-  'Kota Sukabumi',
-  'Kota Bandung',
-  'Kota Cirebon',
-  'Kota Bekasi',
-  'Kota Depok',
-  'Kota Cimahi',
-  'Kota Tasikmalaya',
-  'Kota Banjar',
-  'Cilacap',
-  'Banyumas',
-  'Purbalingga',
-  'Banjarnegara',
-  'Kebumen',
-  'Purworejo',
-  'Wonosobo',
-  'Magelang',
-  'Boyolali',
-  'Klaten',
-  'Sukoharjo',
-  'Wonogiri',
-  'Karanganyar',
-  'Sragen',
-  'Grobogan',
-  'Blora',
-  'Rembang',
-  'Pati',
-  'Kudus',
-  'Jepara',
-  'Demak',
-  'Semarang',
-  'Temanggung',
-  'Kendal',
-  'Batang',
-  'Pekalongan',
-  'Pemalang',
-  'Tegal',
-  'Brebes',
-  'Kota Magelang',
-  'Kota Surakarta',
-  'Kota Salatiga',
-  'Kota Semarang',
-  'Kota Pekalongan',
-  'Kota Tegal',
-  'Kulon Progo',
-  'Bantul',
-  'Gunungkidul',
-  'Sleman',
-  'Kota Yogyakarta',
-  'Pacitan',
-  'Ponorogo',
-  'Trenggalek',
-  'Tulungagung',
-  'Blitar',
-  'Kediri',
-  'Malang',
-  'Lumajang',
-  'Jember',
-  'Banyuwangi',
-  'Bondowoso',
-  'Situbondo',
-  'Probolinggo',
-  'Pasuruan',
-  'Sidoarjo',
-  'Mojokerto',
-  'Jombang',
-  'Nganjuk',
-  'Madiun',
-  'Magetan',
-  'Ngawi',
-  'Bojonegoro',
-  'Tuban',
-  'Lamongan',
-  'Gresik',
-  'Bangkalan',
-  'Sampang',
-  'Pamekasan',
-  'Sumenep',
-  'Kota Kediri',
-  'Kota Blitar',
-  'Kota Malang',
-  'Kota Probolinggo',
-  'Kota Pasuruan',
-  'Kota Mojokerto',
-  'Kota Madiun',
-  'Kota Surabaya',
-  'Kota Batu',
-  'Pandeglang',
-  'Lebak',
-  'Tangerang',
-  'Serang',
-  'Kota Tangerang',
-  'Kota Cilegon',
-  'Kota Serang',
-  'Kota Tangerang Selatan',
-  'Jembrana',
-  'Tabanan',
-  'Badung',
-  'Gianyar',
-  'Klungkung',
-  'Bangli',
-  'Karangasem',
-  'Buleleng',
-  'Kota Denpasar',
-  'Lombok Barat',
-  'Lombok Tengah',
-  'Lombok Timur',
-  'Sumbawa',
-  'Dompu',
-  'Bima',
-  'Sumbawa Barat',
-  'Lombok Utara',
-  'Kota Mataram',
-  'Kota Bima',
-  'Kupang',
-  'Timor Tengah Selatan',
-  'Timor Tengah Utara',
-  'Belu',
-  'Alor',
-  'Flores Timur',
-  'Sikka',
-  'Ende',
-  'Ngada',
-  'Manggarai',
-  'Sumba Timur',
-  'Sumba Barat',
-  'Lembata',
-  'Rote Ndao',
-  'Manggarai Barat',
-  'Nagekeo',
-  'Sumba Tengah',
-  'Sumba Barat Daya',
-  'Manggarai Timur',
-  'Sabu Raijua',
-  'Malaka',
-  'Kota Kupang',
-  'Sambas',
-  'Mempawah',
-  'Sanggau',
-  'Ketapang',
-  'Sintang',
-  'Kapuas Hulu',
-  'Bengkayang',
-  'Landak',
-  'Sekadau',
-  'Melawi',
-  'Kayong Utara',
-  'Kubu Raya',
-  'Kota Pontianak',
-  'Kota Singkawang',
-  'Kotawaringin Barat',
-  'Kotawaringin Timur',
-  'Kapuas',
-  'Barito Selatan',
-  'Barito Utara',
-  'Katingan',
-  'Seruyan',
-  'Sukamara',
-  'Lamandau',
-  'Gunung Mas',
-  'Pulang Pisau',
-  'Murung Raya',
-  'Barito Timur',
-  'Kota Palangkaraya',
-  'Tanah Laut',
-  'Kotabaru',
-  'Banjar',
-  'Barito Kuala',
-  'Tapin',
-  'Hulu Sungai Selatan',
-  'Hulu Sungai Tengah',
-  'Hulu Sungai Utara',
-  'Tabalong',
-  'Tanah Bumbu',
-  'Balangan',
-  'Kota Banjarmasin',
-  'Kota Banjarbaru',
-  'Paser',
-  'Kutai Kartanegara',
-  'Berau',
-  'Kutai Barat',
-  'Kutai Timur',
-  'Penajam Paser Utara',
-  'Mahakam Ulu',
-  'Kota Balikpapan',
-  'Kota Samarinda',
-  'Kota Bontang',
-  'Bulungan',
-  'Malinau',
-  'Nunukan',
-  'Tana Tidung',
-  'Kota Tarakan',
-  'Bolaang Mongondow',
-  'Minahasa',
-  'Kepulauan Sangihe',
-  'Kepulauan Talaud',
-  'Minahasa Selatan',
-  'Minahasa Utara',
-  'Minahasa Tenggara',
-  'Bolaang Mongondow Utara',
-  'Kepulauan Siau Tagulandang Biaro (Sitaro)',
-  'Bolaang Mongondow Timur',
-  'Bolaang Mongondow Selatan',
-  'Kota Manado',
-  'Kota Bitung',
-  'Kota Tomohon',
-  'Kota Kotamobagu',
-  'Banggai',
-  'Poso',
-  'Donggala',
-  'Toli Toli',
-  'Buol',
-  'Morowali',
-  'Banggai Kepulauan',
-  'Parigi Moutong',
-  'Tojo Una Una',
-  'Sigi',
-  'Banggai Laut',
-  'Morowali Utara',
-  'Kota Palu',
-  'Kepulauan Selayar',
-  'Bulukumba',
-  'Bantaeng',
-  'Jeneponto',
-  'Takalar',
-  'Gowa',
-  'Sinjai',
-  'Bone',
-  'Maros',
-  'Pangkajene Kepulauan',
-  'Barru',
-  'Soppeng',
-  'Wajo',
-  'Sidenreng Rappang',
-  'Pinrang',
-  'Enrekang',
-  'Luwu',
-  'Tana Toraja',
-  'Luwu Utara',
-  'Luwu Timur',
-  'Toraja Utara',
-  'Kota Makassar',
-  'Kota Pare Pare',
-  'Kota Palopo',
-  'Kolaka',
-  'Konawe',
-  'Muna',
-  'Buton',
-  'Konawe Selatan',
-  'Bombana',
-  'Wakatobi',
-  'Kolaka Utara',
-  'Konawe Utara',
-  'Buton Utara',
-  'Kolaka Timur',
-  'Konawe Kepulauan',
-  'Muna Barat',
-  'Buton Tengah',
-  'Buton Selatan',
-  'Kota Kendari',
-  'Kota Bau Bau',
-  'Gorontalo',
-  'Boalemo',
-  'Bone Bolango',
-  'Pahuwato',
-  'Gorontalo Utara',
-  'Kota Gorontalo',
-  'Pasangkayu (Mamuju Utara)',
-  'Mamuju',
-  'Mamasa',
-  'Polewali Mandar',
-  'Majene',
-  'Mamuju Tengah',
-  'Maluku Tengah',
-  'Maluku Tenggara',
-  'Kepulauan Tanimbar (Maluku Tenggara Barat)',
-  'Buru',
-  'Seram Bagian Timur',
-  'Seram Bagian Barat',
-  'Kepulauan Aru',
-  'Maluku Barat Daya',
-  'Buru Selatan',
-  'Kota Ambon',
-  'Kota Tual',
-  'Halmahera Barat',
-  'Halmahera Tengah',
-  'Halmahera Utara',
-  'Halmahera Selatan',
-  'Kepulauan Sula',
-  'Halmahera Timur',
-  'Pulau Morotai',
-  'Pulau Taliabu',
-  'Kota Ternate',
-  'Kota Tidore Kepulauan',
-  'Jayapura',
-  'Kepulauan Yapen',
-  'Biak Numfor',
-  'Sarmi',
-  'Keerom',
-  'Waropen',
-  'Supiori',
-  'Mamberamo Raya',
-  'Kota Jayapura',
-  'Manokwari',
-  'Fak Fak',
-  'Teluk Bintuni',
-  'Teluk Wondama',
-  'Kaimana',
-  'Manokwari Selatan',
-  'Pegunungan Arfak',
-  'Merauke',
-  'Boven Digoel',
-  'Mappi',
-  'Asmat',
-  'Nabire',
-  'Puncak Jaya',
-  'Paniai',
-  'Mimika',
-  'Puncak',
-  'Dogiyai',
-  'Intan Jaya',
-  'Deiyai',
-  'Jayawijaya',
-  'Pegunungan Bintang',
-  'Yahukimo',
-  'Tolikara',
-  'Mamberamo Tengah',
-  'Yalimo',
-  'Lanny Jaya',
-  'Nduga',
-  'Sorong',
-  'Sorong Selatan',
-  'Raja Ampat',
-  'Tambrauw',
-  'Maybrat',
-  'Kota Sorong',
-];
-
-export default INDONESIAN_CITIES;

apps/backoffice/src/index.css

@@ -1,6 +1,5 @@
 @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';
-@import 'tw-animate-css';
 @source "../../../libs/ui/**/*.{ts,tsx}";
 
 @theme {
@@ -97,45 +96,6 @@
   /* ~10px */
   --text-label3: 0.677rem;
   /* ~8px */
-
-  /* shadcn/ui semantic tokens — aliased to existing palette (keep colors consistent) */
-  --color-background: #ffffff;
-  --color-foreground: #3d3d3d;
-  --color-card: #ffffff;
-  --color-card-foreground: #3d3d3d;
-  --color-popover: #ffffff;
-  --color-popover-foreground: #3d3d3d;
-  --color-primary: #23a1eb;
-  --color-primary-foreground: #ffffff;
-  --color-secondary: #e7e7e7;
-  --color-secondary-foreground: #3d3d3d;
-  --color-muted: #f6f6f6;
-  --color-muted-foreground: #6d6d6d;
-  --color-accent: #e1f0fd;
-  --color-accent-foreground: #085f9c;
-  --color-destructive: #ff5242;
-  --color-destructive-foreground: #ffffff;
-  --color-border: #d1d1d1;
-  --color-input: #d1d1d1;
-  --color-ring: #3eb0f2;
-
-  --color-sidebar: #ffffff;
-  --color-sidebar-foreground: #4f4f4f;
-  --color-sidebar-primary: #23a1eb;
-  --color-sidebar-primary-foreground: #ffffff;
-  --color-sidebar-accent: #f0f8ff;
-  --color-sidebar-accent-foreground: #085f9c;
-  --color-sidebar-border: #e7e7e7;
-  --color-sidebar-ring: #3eb0f2;
-
-  --color-chart-1: #23a1eb;
-  --color-chart-2: #35ba43;
-  --color-chart-3: #04acf3;
-  --color-chart-4: #ffed27;
-  --color-chart-5: #ff5242;
-
-  --radius: 8px;
-  --font-sans: 'Bai Jamjuree', sans-serif;
 }
 
 @layer base {
@@ -170,7 +130,7 @@
   html {
     font-family: 'Bai Jamjuree', sans-serif;
     font-weight: 400;
-    font-size: 14px;
+    font-size: 12px;
     line-height: 1.2;
   }
-}
+}

apps/backoffice/src/main.tsx

@@ -1,25 +1,42 @@
-import { createRoot } from 'react-dom/client'
-import { RouterProvider, createRouter } from '@tanstack/react-router'
-import { QueryProvider } from '@imphnen-frontend-service/utils'
-import { Toaster } from 'sonner'
-import { routeTree } from './routeTree.gen'
-import './index.css'
+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 router = createRouter({ routeTree })
+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');
 
-declare module '@tanstack/react-router' {
-  interface Register {
-    router: typeof router
-  }
-}
+const routes = convertPagesToRoute(files, loadingFiles) as RouteObject;
+addErrorElementToRoutes(errorFiles, routes);
+add404PageToRoutesChildren(notFoundFiles, routes);
 
-const rootElement = document.getElementById('root')
+const router = createBrowserRouter([
+  {
+    ...routes,
+    loader: middleware,
+    shouldRevalidate: () => true,
+  },
+]);
 
-if (!rootElement) throw new Error('Failed to find the root element')
+const rootElement = document.getElementById('root');
+
+if (!rootElement) throw new Error('Failed to find the root element');
 
 createRoot(rootElement).render(
-  <QueryProvider>
-    <RouterProvider router={router} />
-    <Toaster position="top-right" />
-  </QueryProvider>
-)
+  <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/src/routeTree.gen.ts

@@ -1,923 +0,0 @@
-/* eslint-disable */
-
-// @ts-nocheck
-
-// noinspection JSUnusedGlobalSymbols
-
-// This file was automatically generated by TanStack Router.
-// You should NOT make any changes in this file as it will be overwritten.
-// Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.
-
-import { Route as rootRouteImport } from './routes/__root'
-import { Route as PublicRouteImport } from './routes/_public'
-import { Route as AuthenticatedRouteImport } from './routes/_authenticated'
-import { Route as IndexRouteImport } from './routes/index'
-import { Route as AuthenticatedUsersDimentorinRouteImport } from './routes/_authenticated/users-dimentorin'
-import { Route as AuthenticatedTransactionsRouteImport } from './routes/_authenticated/transactions'
-import { Route as AuthenticatedSettingsDimentorinRouteImport } from './routes/_authenticated/settings-dimentorin'
-import { Route as AuthenticatedSessionDimentorinRouteImport } from './routes/_authenticated/session-dimentorin'
-import { Route as AuthenticatedRolesRouteImport } from './routes/_authenticated/roles'
-import { Route as AuthenticatedRoadmapDimentorinRouteImport } from './routes/_authenticated/roadmap-dimentorin'
-import { Route as AuthenticatedPrizesRouteImport } from './routes/_authenticated/prizes'
-import { Route as AuthenticatedPermissionsRouteImport } from './routes/_authenticated/permissions'
-import { Route as AuthenticatedHackathonUsersRouteImport } from './routes/_authenticated/hackathon-users'
-import { Route as AuthenticatedHackathonTeamsRouteImport } from './routes/_authenticated/hackathon-teams'
-import { Route as AuthenticatedHackathonSubmissionsRouteImport } from './routes/_authenticated/hackathon-submissions'
-import { Route as AuthenticatedHackathonDashboardRouteImport } from './routes/_authenticated/hackathon-dashboard'
-import { Route as AuthenticatedGachaRollRouteImport } from './routes/_authenticated/gacha-roll'
-import { Route as AuthenticatedFeedbackReviewDimentorinRouteImport } from './routes/_authenticated/feedback-review-dimentorin'
-import { Route as AuthenticatedDashboardDimentorinRouteImport } from './routes/_authenticated/dashboard-dimentorin'
-import { Route as AuthenticatedDashboardRouteImport } from './routes/_authenticated/dashboard'
-import { Route as AuthenticatedCmsTestimonialsRouteImport } from './routes/_authenticated/cms-testimonials'
-import { Route as AuthenticatedCmsEventsRouteImport } from './routes/_authenticated/cms-events'
-import { Route as AuthenticatedAccountsRouteImport } from './routes/_authenticated/accounts'
-import { Route as PublicAuthLoginRouteImport } from './routes/_public/auth/login'
-import { Route as AuthenticatedUsersDimentorinIdRouteImport } from './routes/_authenticated/users-dimentorin_/$id'
-import { Route as AuthenticatedSessionDimentorinIdRouteImport } from './routes/_authenticated/session-dimentorin_/$id'
-import { Route as AuthenticatedRolesCreateRouteImport } from './routes/_authenticated/roles_/create'
-import { Route as AuthenticatedRolesIdRouteImport } from './routes/_authenticated/roles_/$id'
-import { Route as AuthenticatedRoadmapDimentorinCreateRouteImport } from './routes/_authenticated/roadmap-dimentorin_/create'
-import { Route as AuthenticatedRoadmapDimentorinIdRouteImport } from './routes/_authenticated/roadmap-dimentorin_/$id'
-import { Route as AuthenticatedPermissionsCreateRouteImport } from './routes/_authenticated/permissions_/create'
-import { Route as AuthenticatedPermissionsIdRouteImport } from './routes/_authenticated/permissions_/$id'
-import { Route as AuthenticatedGachaRollCreateRouteImport } from './routes/_authenticated/gacha-roll_/create'
-import { Route as AuthenticatedGachaRollIdRouteImport } from './routes/_authenticated/gacha-roll_/$id'
-import { Route as AuthenticatedDashboardCreateRouteImport } from './routes/_authenticated/dashboard_/create'
-import { Route as AuthenticatedDashboardIdRouteImport } from './routes/_authenticated/dashboard_/$id'
-import { Route as AuthenticatedCmsTestimonialsCreateRouteImport } from './routes/_authenticated/cms-testimonials_/create'
-import { Route as AuthenticatedCmsTestimonialsIdRouteImport } from './routes/_authenticated/cms-testimonials_/$id'
-import { Route as AuthenticatedCmsEventsCreateRouteImport } from './routes/_authenticated/cms-events_/create'
-import { Route as AuthenticatedCmsEventsIdRouteImport } from './routes/_authenticated/cms-events_/$id'
-import { Route as AuthenticatedAccountsIdRouteImport } from './routes/_authenticated/accounts_/$id'
-
-const PublicRoute = PublicRouteImport.update({
-  id: '/_public',
-  getParentRoute: () => rootRouteImport,
-} as any)
-const AuthenticatedRoute = AuthenticatedRouteImport.update({
-  id: '/_authenticated',
-  getParentRoute: () => rootRouteImport,
-} as any)
-const IndexRoute = IndexRouteImport.update({
-  id: '/',
-  path: '/',
-  getParentRoute: () => rootRouteImport,
-} as any)
-const AuthenticatedUsersDimentorinRoute =
-  AuthenticatedUsersDimentorinRouteImport.update({
-    id: '/users-dimentorin',
-    path: '/users-dimentorin',
-    getParentRoute: () => AuthenticatedRoute,
-  } as any)
-const AuthenticatedTransactionsRoute =
-  AuthenticatedTransactionsRouteImport.update({
-    id: '/transactions',
-    path: '/transactions',
-    getParentRoute: () => AuthenticatedRoute,
-  } as any)
-const AuthenticatedSettingsDimentorinRoute =
-  AuthenticatedSettingsDimentorinRouteImport.update({
-    id: '/settings-dimentorin',
-    path: '/settings-dimentorin',
-    getParentRoute: () => AuthenticatedRoute,
-  } as any)
-const AuthenticatedSessionDimentorinRoute =
-  AuthenticatedSessionDimentorinRouteImport.update({
-    id: '/session-dimentorin',
-    path: '/session-dimentorin',
-    getParentRoute: () => AuthenticatedRoute,
-  } as any)
-const AuthenticatedRolesRoute = AuthenticatedRolesRouteImport.update({
-  id: '/roles',
-  path: '/roles',
-  getParentRoute: () => AuthenticatedRoute,
-} as any)
-const AuthenticatedRoadmapDimentorinRoute =
-  AuthenticatedRoadmapDimentorinRouteImport.update({
-    id: '/roadmap-dimentorin',
-    path: '/roadmap-dimentorin',
-    getParentRoute: () => AuthenticatedRoute,
-  } as any)
-const AuthenticatedPrizesRoute = AuthenticatedPrizesRouteImport.update({
-  id: '/prizes',
-  path: '/prizes',
-  getParentRoute: () => AuthenticatedRoute,
-} as any)
-const AuthenticatedPermissionsRoute =
-  AuthenticatedPermissionsRouteImport.update({
-    id: '/permissions',
-    path: '/permissions',
-    getParentRoute: () => AuthenticatedRoute,
-  } as any)
-const AuthenticatedHackathonUsersRoute =
-  AuthenticatedHackathonUsersRouteImport.update({
-    id: '/hackathon-users',
-    path: '/hackathon-users',
-    getParentRoute: () => AuthenticatedRoute,
-  } as any)
-const AuthenticatedHackathonTeamsRoute =
-  AuthenticatedHackathonTeamsRouteImport.update({
-    id: '/hackathon-teams',
-    path: '/hackathon-teams',
-    getParentRoute: () => AuthenticatedRoute,
-  } as any)
-const AuthenticatedHackathonSubmissionsRoute =
-  AuthenticatedHackathonSubmissionsRouteImport.update({
-    id: '/hackathon-submissions',
-    path: '/hackathon-submissions',
-    getParentRoute: () => AuthenticatedRoute,
-  } as any)
-const AuthenticatedHackathonDashboardRoute =
-  AuthenticatedHackathonDashboardRouteImport.update({
-    id: '/hackathon-dashboard',
-    path: '/hackathon-dashboard',
-    getParentRoute: () => AuthenticatedRoute,
-  } as any)
-const AuthenticatedGachaRollRoute = AuthenticatedGachaRollRouteImport.update({
-  id: '/gacha-roll',
-  path: '/gacha-roll',
-  getParentRoute: () => AuthenticatedRoute,
-} as any)
-const AuthenticatedFeedbackReviewDimentorinRoute =
-  AuthenticatedFeedbackReviewDimentorinRouteImport.update({
-    id: '/feedback-review-dimentorin',
-    path: '/feedback-review-dimentorin',
-    getParentRoute: () => AuthenticatedRoute,
-  } as any)
-const AuthenticatedDashboardDimentorinRoute =
-  AuthenticatedDashboardDimentorinRouteImport.update({
-    id: '/dashboard-dimentorin',
-    path: '/dashboard-dimentorin',
-    getParentRoute: () => AuthenticatedRoute,
-  } as any)
-const AuthenticatedDashboardRoute = AuthenticatedDashboardRouteImport.update({
-  id: '/dashboard',
-  path: '/dashboard',
-  getParentRoute: () => AuthenticatedRoute,
-} as any)
-const AuthenticatedCmsTestimonialsRoute =
-  AuthenticatedCmsTestimonialsRouteImport.update({
-    id: '/cms-testimonials',
-    path: '/cms-testimonials',
-    getParentRoute: () => AuthenticatedRoute,
-  } as any)
-const AuthenticatedCmsEventsRoute = AuthenticatedCmsEventsRouteImport.update({
-  id: '/cms-events',
-  path: '/cms-events',
-  getParentRoute: () => AuthenticatedRoute,
-} as any)
-const AuthenticatedAccountsRoute = AuthenticatedAccountsRouteImport.update({
-  id: '/accounts',
-  path: '/accounts',
-  getParentRoute: () => AuthenticatedRoute,
-} as any)
-const PublicAuthLoginRoute = PublicAuthLoginRouteImport.update({
-  id: '/auth/login',
-  path: '/auth/login',
-  getParentRoute: () => PublicRoute,
-} as any)
-const AuthenticatedUsersDimentorinIdRoute =
-  AuthenticatedUsersDimentorinIdRouteImport.update({
-    id: '/users-dimentorin_/$id',
-    path: '/users-dimentorin/$id',
-    getParentRoute: () => AuthenticatedRoute,
-  } as any)
-const AuthenticatedSessionDimentorinIdRoute =
-  AuthenticatedSessionDimentorinIdRouteImport.update({
-    id: '/session-dimentorin_/$id',
-    path: '/session-dimentorin/$id',
-    getParentRoute: () => AuthenticatedRoute,
-  } as any)
-const AuthenticatedRolesCreateRoute =
-  AuthenticatedRolesCreateRouteImport.update({
-    id: '/roles_/create',
-    path: '/roles/create',
-    getParentRoute: () => AuthenticatedRoute,
-  } as any)
-const AuthenticatedRolesIdRoute = AuthenticatedRolesIdRouteImport.update({
-  id: '/roles_/$id',
-  path: '/roles/$id',
-  getParentRoute: () => AuthenticatedRoute,
-} as any)
-const AuthenticatedRoadmapDimentorinCreateRoute =
-  AuthenticatedRoadmapDimentorinCreateRouteImport.update({
-    id: '/roadmap-dimentorin_/create',
-    path: '/roadmap-dimentorin/create',
-    getParentRoute: () => AuthenticatedRoute,
-  } as any)
-const AuthenticatedRoadmapDimentorinIdRoute =
-  AuthenticatedRoadmapDimentorinIdRouteImport.update({
-    id: '/roadmap-dimentorin_/$id',
-    path: '/roadmap-dimentorin/$id',
-    getParentRoute: () => AuthenticatedRoute,
-  } as any)
-const AuthenticatedPermissionsCreateRoute =
-  AuthenticatedPermissionsCreateRouteImport.update({
-    id: '/permissions_/create',
-    path: '/permissions/create',
-    getParentRoute: () => AuthenticatedRoute,
-  } as any)
-const AuthenticatedPermissionsIdRoute =
-  AuthenticatedPermissionsIdRouteImport.update({
-    id: '/permissions_/$id',
-    path: '/permissions/$id',
-    getParentRoute: () => AuthenticatedRoute,
-  } as any)
-const AuthenticatedGachaRollCreateRoute =
-  AuthenticatedGachaRollCreateRouteImport.update({
-    id: '/gacha-roll_/create',
-    path: '/gacha-roll/create',
-    getParentRoute: () => AuthenticatedRoute,
-  } as any)
-const AuthenticatedGachaRollIdRoute =
-  AuthenticatedGachaRollIdRouteImport.update({
-    id: '/gacha-roll_/$id',
-    path: '/gacha-roll/$id',
-    getParentRoute: () => AuthenticatedRoute,
-  } as any)
-const AuthenticatedDashboardCreateRoute =
-  AuthenticatedDashboardCreateRouteImport.update({
-    id: '/dashboard_/create',
-    path: '/dashboard/create',
-    getParentRoute: () => AuthenticatedRoute,
-  } as any)
-const AuthenticatedDashboardIdRoute =
-  AuthenticatedDashboardIdRouteImport.update({
-    id: '/dashboard_/$id',
-    path: '/dashboard/$id',
-    getParentRoute: () => AuthenticatedRoute,
-  } as any)
-const AuthenticatedCmsTestimonialsCreateRoute =
-  AuthenticatedCmsTestimonialsCreateRouteImport.update({
-    id: '/cms-testimonials_/create',
-    path: '/cms-testimonials/create',
-    getParentRoute: () => AuthenticatedRoute,
-  } as any)
-const AuthenticatedCmsTestimonialsIdRoute =
-  AuthenticatedCmsTestimonialsIdRouteImport.update({
-    id: '/cms-testimonials_/$id',
-    path: '/cms-testimonials/$id',
-    getParentRoute: () => AuthenticatedRoute,
-  } as any)
-const AuthenticatedCmsEventsCreateRoute =
-  AuthenticatedCmsEventsCreateRouteImport.update({
-    id: '/cms-events_/create',
-    path: '/cms-events/create',
-    getParentRoute: () => AuthenticatedRoute,
-  } as any)
-const AuthenticatedCmsEventsIdRoute =
-  AuthenticatedCmsEventsIdRouteImport.update({
-    id: '/cms-events_/$id',
-    path: '/cms-events/$id',
-    getParentRoute: () => AuthenticatedRoute,
-  } as any)
-const AuthenticatedAccountsIdRoute = AuthenticatedAccountsIdRouteImport.update({
-  id: '/accounts_/$id',
-  path: '/accounts/$id',
-  getParentRoute: () => AuthenticatedRoute,
-} as any)
-
-export interface FileRoutesByFullPath {
-  '/': typeof IndexRoute
-  '/accounts': typeof AuthenticatedAccountsRoute
-  '/cms-events': typeof AuthenticatedCmsEventsRoute
-  '/cms-testimonials': typeof AuthenticatedCmsTestimonialsRoute
-  '/dashboard': typeof AuthenticatedDashboardRoute
-  '/dashboard-dimentorin': typeof AuthenticatedDashboardDimentorinRoute
-  '/feedback-review-dimentorin': typeof AuthenticatedFeedbackReviewDimentorinRoute
-  '/gacha-roll': typeof AuthenticatedGachaRollRoute
-  '/hackathon-dashboard': typeof AuthenticatedHackathonDashboardRoute
-  '/hackathon-submissions': typeof AuthenticatedHackathonSubmissionsRoute
-  '/hackathon-teams': typeof AuthenticatedHackathonTeamsRoute
-  '/hackathon-users': typeof AuthenticatedHackathonUsersRoute
-  '/permissions': typeof AuthenticatedPermissionsRoute
-  '/prizes': typeof AuthenticatedPrizesRoute
-  '/roadmap-dimentorin': typeof AuthenticatedRoadmapDimentorinRoute
-  '/roles': typeof AuthenticatedRolesRoute
-  '/session-dimentorin': typeof AuthenticatedSessionDimentorinRoute
-  '/settings-dimentorin': typeof AuthenticatedSettingsDimentorinRoute
-  '/transactions': typeof AuthenticatedTransactionsRoute
-  '/users-dimentorin': typeof AuthenticatedUsersDimentorinRoute
-  '/accounts/$id': typeof AuthenticatedAccountsIdRoute
-  '/cms-events/$id': typeof AuthenticatedCmsEventsIdRoute
-  '/cms-events/create': typeof AuthenticatedCmsEventsCreateRoute
-  '/cms-testimonials/$id': typeof AuthenticatedCmsTestimonialsIdRoute
-  '/cms-testimonials/create': typeof AuthenticatedCmsTestimonialsCreateRoute
-  '/dashboard/$id': typeof AuthenticatedDashboardIdRoute
-  '/dashboard/create': typeof AuthenticatedDashboardCreateRoute
-  '/gacha-roll/$id': typeof AuthenticatedGachaRollIdRoute
-  '/gacha-roll/create': typeof AuthenticatedGachaRollCreateRoute
-  '/permissions/$id': typeof AuthenticatedPermissionsIdRoute
-  '/permissions/create': typeof AuthenticatedPermissionsCreateRoute
-  '/roadmap-dimentorin/$id': typeof AuthenticatedRoadmapDimentorinIdRoute
-  '/roadmap-dimentorin/create': typeof AuthenticatedRoadmapDimentorinCreateRoute
-  '/roles/$id': typeof AuthenticatedRolesIdRoute
-  '/roles/create': typeof AuthenticatedRolesCreateRoute
-  '/session-dimentorin/$id': typeof AuthenticatedSessionDimentorinIdRoute
-  '/users-dimentorin/$id': typeof AuthenticatedUsersDimentorinIdRoute
-  '/auth/login': typeof PublicAuthLoginRoute
-}
-export interface FileRoutesByTo {
-  '/': typeof IndexRoute
-  '/accounts': typeof AuthenticatedAccountsRoute
-  '/cms-events': typeof AuthenticatedCmsEventsRoute
-  '/cms-testimonials': typeof AuthenticatedCmsTestimonialsRoute
-  '/dashboard': typeof AuthenticatedDashboardRoute
-  '/dashboard-dimentorin': typeof AuthenticatedDashboardDimentorinRoute
-  '/feedback-review-dimentorin': typeof AuthenticatedFeedbackReviewDimentorinRoute
-  '/gacha-roll': typeof AuthenticatedGachaRollRoute
-  '/hackathon-dashboard': typeof AuthenticatedHackathonDashboardRoute
-  '/hackathon-submissions': typeof AuthenticatedHackathonSubmissionsRoute
-  '/hackathon-teams': typeof AuthenticatedHackathonTeamsRoute
-  '/hackathon-users': typeof AuthenticatedHackathonUsersRoute
-  '/permissions': typeof AuthenticatedPermissionsRoute
-  '/prizes': typeof AuthenticatedPrizesRoute
-  '/roadmap-dimentorin': typeof AuthenticatedRoadmapDimentorinRoute
-  '/roles': typeof AuthenticatedRolesRoute
-  '/session-dimentorin': typeof AuthenticatedSessionDimentorinRoute
-  '/settings-dimentorin': typeof AuthenticatedSettingsDimentorinRoute
-  '/transactions': typeof AuthenticatedTransactionsRoute
-  '/users-dimentorin': typeof AuthenticatedUsersDimentorinRoute
-  '/accounts/$id': typeof AuthenticatedAccountsIdRoute
-  '/cms-events/$id': typeof AuthenticatedCmsEventsIdRoute
-  '/cms-events/create': typeof AuthenticatedCmsEventsCreateRoute
-  '/cms-testimonials/$id': typeof AuthenticatedCmsTestimonialsIdRoute
-  '/cms-testimonials/create': typeof AuthenticatedCmsTestimonialsCreateRoute
-  '/dashboard/$id': typeof AuthenticatedDashboardIdRoute
-  '/dashboard/create': typeof AuthenticatedDashboardCreateRoute
-  '/gacha-roll/$id': typeof AuthenticatedGachaRollIdRoute
-  '/gacha-roll/create': typeof AuthenticatedGachaRollCreateRoute
-  '/permissions/$id': typeof AuthenticatedPermissionsIdRoute
-  '/permissions/create': typeof AuthenticatedPermissionsCreateRoute
-  '/roadmap-dimentorin/$id': typeof AuthenticatedRoadmapDimentorinIdRoute
-  '/roadmap-dimentorin/create': typeof AuthenticatedRoadmapDimentorinCreateRoute
-  '/roles/$id': typeof AuthenticatedRolesIdRoute
-  '/roles/create': typeof AuthenticatedRolesCreateRoute
-  '/session-dimentorin/$id': typeof AuthenticatedSessionDimentorinIdRoute
-  '/users-dimentorin/$id': typeof AuthenticatedUsersDimentorinIdRoute
-  '/auth/login': typeof PublicAuthLoginRoute
-}
-export interface FileRoutesById {
-  __root__: typeof rootRouteImport
-  '/': typeof IndexRoute
-  '/_authenticated': typeof AuthenticatedRouteWithChildren
-  '/_public': typeof PublicRouteWithChildren
-  '/_authenticated/accounts': typeof AuthenticatedAccountsRoute
-  '/_authenticated/cms-events': typeof AuthenticatedCmsEventsRoute
-  '/_authenticated/cms-testimonials': typeof AuthenticatedCmsTestimonialsRoute
-  '/_authenticated/dashboard': typeof AuthenticatedDashboardRoute
-  '/_authenticated/dashboard-dimentorin': typeof AuthenticatedDashboardDimentorinRoute
-  '/_authenticated/feedback-review-dimentorin': typeof AuthenticatedFeedbackReviewDimentorinRoute
-  '/_authenticated/gacha-roll': typeof AuthenticatedGachaRollRoute
-  '/_authenticated/hackathon-dashboard': typeof AuthenticatedHackathonDashboardRoute
-  '/_authenticated/hackathon-submissions': typeof AuthenticatedHackathonSubmissionsRoute
-  '/_authenticated/hackathon-teams': typeof AuthenticatedHackathonTeamsRoute
-  '/_authenticated/hackathon-users': typeof AuthenticatedHackathonUsersRoute
-  '/_authenticated/permissions': typeof AuthenticatedPermissionsRoute
-  '/_authenticated/prizes': typeof AuthenticatedPrizesRoute
-  '/_authenticated/roadmap-dimentorin': typeof AuthenticatedRoadmapDimentorinRoute
-  '/_authenticated/roles': typeof AuthenticatedRolesRoute
-  '/_authenticated/session-dimentorin': typeof AuthenticatedSessionDimentorinRoute
-  '/_authenticated/settings-dimentorin': typeof AuthenticatedSettingsDimentorinRoute
-  '/_authenticated/transactions': typeof AuthenticatedTransactionsRoute
-  '/_authenticated/users-dimentorin': typeof AuthenticatedUsersDimentorinRoute
-  '/_authenticated/accounts_/$id': typeof AuthenticatedAccountsIdRoute
-  '/_authenticated/cms-events_/$id': typeof AuthenticatedCmsEventsIdRoute
-  '/_authenticated/cms-events_/create': typeof AuthenticatedCmsEventsCreateRoute
-  '/_authenticated/cms-testimonials_/$id': typeof AuthenticatedCmsTestimonialsIdRoute
-  '/_authenticated/cms-testimonials_/create': typeof AuthenticatedCmsTestimonialsCreateRoute
-  '/_authenticated/dashboard_/$id': typeof AuthenticatedDashboardIdRoute
-  '/_authenticated/dashboard_/create': typeof AuthenticatedDashboardCreateRoute
-  '/_authenticated/gacha-roll_/$id': typeof AuthenticatedGachaRollIdRoute
-  '/_authenticated/gacha-roll_/create': typeof AuthenticatedGachaRollCreateRoute
-  '/_authenticated/permissions_/$id': typeof AuthenticatedPermissionsIdRoute
-  '/_authenticated/permissions_/create': typeof AuthenticatedPermissionsCreateRoute
-  '/_authenticated/roadmap-dimentorin_/$id': typeof AuthenticatedRoadmapDimentorinIdRoute
-  '/_authenticated/roadmap-dimentorin_/create': typeof AuthenticatedRoadmapDimentorinCreateRoute
-  '/_authenticated/roles_/$id': typeof AuthenticatedRolesIdRoute
-  '/_authenticated/roles_/create': typeof AuthenticatedRolesCreateRoute
-  '/_authenticated/session-dimentorin_/$id': typeof AuthenticatedSessionDimentorinIdRoute
-  '/_authenticated/users-dimentorin_/$id': typeof AuthenticatedUsersDimentorinIdRoute
-  '/_public/auth/login': typeof PublicAuthLoginRoute
-}
-export interface FileRouteTypes {
-  fileRoutesByFullPath: FileRoutesByFullPath
-  fullPaths:
-    | '/'
-    | '/accounts'
-    | '/cms-events'
-    | '/cms-testimonials'
-    | '/dashboard'
-    | '/dashboard-dimentorin'
-    | '/feedback-review-dimentorin'
-    | '/gacha-roll'
-    | '/hackathon-dashboard'
-    | '/hackathon-submissions'
-    | '/hackathon-teams'
-    | '/hackathon-users'
-    | '/permissions'
-    | '/prizes'
-    | '/roadmap-dimentorin'
-    | '/roles'
-    | '/session-dimentorin'
-    | '/settings-dimentorin'
-    | '/transactions'
-    | '/users-dimentorin'
-    | '/accounts/$id'
-    | '/cms-events/$id'
-    | '/cms-events/create'
-    | '/cms-testimonials/$id'
-    | '/cms-testimonials/create'
-    | '/dashboard/$id'
-    | '/dashboard/create'
-    | '/gacha-roll/$id'
-    | '/gacha-roll/create'
-    | '/permissions/$id'
-    | '/permissions/create'
-    | '/roadmap-dimentorin/$id'
-    | '/roadmap-dimentorin/create'
-    | '/roles/$id'
-    | '/roles/create'
-    | '/session-dimentorin/$id'
-    | '/users-dimentorin/$id'
-    | '/auth/login'
-  fileRoutesByTo: FileRoutesByTo
-  to:
-    | '/'
-    | '/accounts'
-    | '/cms-events'
-    | '/cms-testimonials'
-    | '/dashboard'
-    | '/dashboard-dimentorin'
-    | '/feedback-review-dimentorin'
-    | '/gacha-roll'
-    | '/hackathon-dashboard'
-    | '/hackathon-submissions'
-    | '/hackathon-teams'
-    | '/hackathon-users'
-    | '/permissions'
-    | '/prizes'
-    | '/roadmap-dimentorin'
-    | '/roles'
-    | '/session-dimentorin'
-    | '/settings-dimentorin'
-    | '/transactions'
-    | '/users-dimentorin'
-    | '/accounts/$id'
-    | '/cms-events/$id'
-    | '/cms-events/create'
-    | '/cms-testimonials/$id'
-    | '/cms-testimonials/create'
-    | '/dashboard/$id'
-    | '/dashboard/create'
-    | '/gacha-roll/$id'
-    | '/gacha-roll/create'
-    | '/permissions/$id'
-    | '/permissions/create'
-    | '/roadmap-dimentorin/$id'
-    | '/roadmap-dimentorin/create'
-    | '/roles/$id'
-    | '/roles/create'
-    | '/session-dimentorin/$id'
-    | '/users-dimentorin/$id'
-    | '/auth/login'
-  id:
-    | '__root__'
-    | '/'
-    | '/_authenticated'
-    | '/_public'
-    | '/_authenticated/accounts'
-    | '/_authenticated/cms-events'
-    | '/_authenticated/cms-testimonials'
-    | '/_authenticated/dashboard'
-    | '/_authenticated/dashboard-dimentorin'
-    | '/_authenticated/feedback-review-dimentorin'
-    | '/_authenticated/gacha-roll'
-    | '/_authenticated/hackathon-dashboard'
-    | '/_authenticated/hackathon-submissions'
-    | '/_authenticated/hackathon-teams'
-    | '/_authenticated/hackathon-users'
-    | '/_authenticated/permissions'
-    | '/_authenticated/prizes'
-    | '/_authenticated/roadmap-dimentorin'
-    | '/_authenticated/roles'
-    | '/_authenticated/session-dimentorin'
-    | '/_authenticated/settings-dimentorin'
-    | '/_authenticated/transactions'
-    | '/_authenticated/users-dimentorin'
-    | '/_authenticated/accounts_/$id'
-    | '/_authenticated/cms-events_/$id'
-    | '/_authenticated/cms-events_/create'
-    | '/_authenticated/cms-testimonials_/$id'
-    | '/_authenticated/cms-testimonials_/create'
-    | '/_authenticated/dashboard_/$id'
-    | '/_authenticated/dashboard_/create'
-    | '/_authenticated/gacha-roll_/$id'
-    | '/_authenticated/gacha-roll_/create'
-    | '/_authenticated/permissions_/$id'
-    | '/_authenticated/permissions_/create'
-    | '/_authenticated/roadmap-dimentorin_/$id'
-    | '/_authenticated/roadmap-dimentorin_/create'
-    | '/_authenticated/roles_/$id'
-    | '/_authenticated/roles_/create'
-    | '/_authenticated/session-dimentorin_/$id'
-    | '/_authenticated/users-dimentorin_/$id'
-    | '/_public/auth/login'
-  fileRoutesById: FileRoutesById
-}
-export interface RootRouteChildren {
-  IndexRoute: typeof IndexRoute
-  AuthenticatedRoute: typeof AuthenticatedRouteWithChildren
-  PublicRoute: typeof PublicRouteWithChildren
-}
-
-declare module '@tanstack/react-router' {
-  interface FileRoutesByPath {
-    '/_public': {
-      id: '/_public'
-      path: ''
-      fullPath: '/'
-      preLoaderRoute: typeof PublicRouteImport
-      parentRoute: typeof rootRouteImport
-    }
-    '/_authenticated': {
-      id: '/_authenticated'
-      path: ''
-      fullPath: '/'
-      preLoaderRoute: typeof AuthenticatedRouteImport
-      parentRoute: typeof rootRouteImport
-    }
-    '/': {
-      id: '/'
-      path: '/'
-      fullPath: '/'
-      preLoaderRoute: typeof IndexRouteImport
-      parentRoute: typeof rootRouteImport
-    }
-    '/_authenticated/users-dimentorin': {
-      id: '/_authenticated/users-dimentorin'
-      path: '/users-dimentorin'
-      fullPath: '/users-dimentorin'
-      preLoaderRoute: typeof AuthenticatedUsersDimentorinRouteImport
-      parentRoute: typeof AuthenticatedRoute
-    }
-    '/_authenticated/transactions': {
-      id: '/_authenticated/transactions'
-      path: '/transactions'
-      fullPath: '/transactions'
-      preLoaderRoute: typeof AuthenticatedTransactionsRouteImport
-      parentRoute: typeof AuthenticatedRoute
-    }
-    '/_authenticated/settings-dimentorin': {
-      id: '/_authenticated/settings-dimentorin'
-      path: '/settings-dimentorin'
-      fullPath: '/settings-dimentorin'
-      preLoaderRoute: typeof AuthenticatedSettingsDimentorinRouteImport
-      parentRoute: typeof AuthenticatedRoute
-    }
-    '/_authenticated/session-dimentorin': {
-      id: '/_authenticated/session-dimentorin'
-      path: '/session-dimentorin'
-      fullPath: '/session-dimentorin'
-      preLoaderRoute: typeof AuthenticatedSessionDimentorinRouteImport
-      parentRoute: typeof AuthenticatedRoute
-    }
-    '/_authenticated/roles': {
-      id: '/_authenticated/roles'
-      path: '/roles'
-      fullPath: '/roles'
-      preLoaderRoute: typeof AuthenticatedRolesRouteImport
-      parentRoute: typeof AuthenticatedRoute
-    }
-    '/_authenticated/roadmap-dimentorin': {
-      id: '/_authenticated/roadmap-dimentorin'
-      path: '/roadmap-dimentorin'
-      fullPath: '/roadmap-dimentorin'
-      preLoaderRoute: typeof AuthenticatedRoadmapDimentorinRouteImport
-      parentRoute: typeof AuthenticatedRoute
-    }
-    '/_authenticated/prizes': {
-      id: '/_authenticated/prizes'
-      path: '/prizes'
-      fullPath: '/prizes'
-      preLoaderRoute: typeof AuthenticatedPrizesRouteImport
-      parentRoute: typeof AuthenticatedRoute
-    }
-    '/_authenticated/permissions': {
-      id: '/_authenticated/permissions'
-      path: '/permissions'
-      fullPath: '/permissions'
-      preLoaderRoute: typeof AuthenticatedPermissionsRouteImport
-      parentRoute: typeof AuthenticatedRoute
-    }
-    '/_authenticated/hackathon-users': {
-      id: '/_authenticated/hackathon-users'
-      path: '/hackathon-users'
-      fullPath: '/hackathon-users'
-      preLoaderRoute: typeof AuthenticatedHackathonUsersRouteImport
-      parentRoute: typeof AuthenticatedRoute
-    }
-    '/_authenticated/hackathon-teams': {
-      id: '/_authenticated/hackathon-teams'
-      path: '/hackathon-teams'
-      fullPath: '/hackathon-teams'
-      preLoaderRoute: typeof AuthenticatedHackathonTeamsRouteImport
-      parentRoute: typeof AuthenticatedRoute
-    }
-    '/_authenticated/hackathon-submissions': {
-      id: '/_authenticated/hackathon-submissions'
-      path: '/hackathon-submissions'
-      fullPath: '/hackathon-submissions'
-      preLoaderRoute: typeof AuthenticatedHackathonSubmissionsRouteImport
-      parentRoute: typeof AuthenticatedRoute
-    }
-    '/_authenticated/hackathon-dashboard': {
-      id: '/_authenticated/hackathon-dashboard'
-      path: '/hackathon-dashboard'
-      fullPath: '/hackathon-dashboard'
-      preLoaderRoute: typeof AuthenticatedHackathonDashboardRouteImport
-      parentRoute: typeof AuthenticatedRoute
-    }
-    '/_authenticated/gacha-roll': {
-      id: '/_authenticated/gacha-roll'
-      path: '/gacha-roll'
-      fullPath: '/gacha-roll'
-      preLoaderRoute: typeof AuthenticatedGachaRollRouteImport
-      parentRoute: typeof AuthenticatedRoute
-    }
-    '/_authenticated/feedback-review-dimentorin': {
-      id: '/_authenticated/feedback-review-dimentorin'
-      path: '/feedback-review-dimentorin'
-      fullPath: '/feedback-review-dimentorin'
-      preLoaderRoute: typeof AuthenticatedFeedbackReviewDimentorinRouteImport
-      parentRoute: typeof AuthenticatedRoute
-    }
-    '/_authenticated/dashboard-dimentorin': {
-      id: '/_authenticated/dashboard-dimentorin'
-      path: '/dashboard-dimentorin'
-      fullPath: '/dashboard-dimentorin'
-      preLoaderRoute: typeof AuthenticatedDashboardDimentorinRouteImport
-      parentRoute: typeof AuthenticatedRoute
-    }
-    '/_authenticated/dashboard': {
-      id: '/_authenticated/dashboard'
-      path: '/dashboard'
-      fullPath: '/dashboard'
-      preLoaderRoute: typeof AuthenticatedDashboardRouteImport
-      parentRoute: typeof AuthenticatedRoute
-    }
-    '/_authenticated/cms-testimonials': {
-      id: '/_authenticated/cms-testimonials'
-      path: '/cms-testimonials'
-      fullPath: '/cms-testimonials'
-      preLoaderRoute: typeof AuthenticatedCmsTestimonialsRouteImport
-      parentRoute: typeof AuthenticatedRoute
-    }
-    '/_authenticated/cms-events': {
-      id: '/_authenticated/cms-events'
-      path: '/cms-events'
-      fullPath: '/cms-events'
-      preLoaderRoute: typeof AuthenticatedCmsEventsRouteImport
-      parentRoute: typeof AuthenticatedRoute
-    }
-    '/_authenticated/accounts': {
-      id: '/_authenticated/accounts'
-      path: '/accounts'
-      fullPath: '/accounts'
-      preLoaderRoute: typeof AuthenticatedAccountsRouteImport
-      parentRoute: typeof AuthenticatedRoute
-    }
-    '/_public/auth/login': {
-      id: '/_public/auth/login'
-      path: '/auth/login'
-      fullPath: '/auth/login'
-      preLoaderRoute: typeof PublicAuthLoginRouteImport
-      parentRoute: typeof PublicRoute
-    }
-    '/_authenticated/users-dimentorin_/$id': {
-      id: '/_authenticated/users-dimentorin_/$id'
-      path: '/users-dimentorin/$id'
-      fullPath: '/users-dimentorin/$id'
-      preLoaderRoute: typeof AuthenticatedUsersDimentorinIdRouteImport
-      parentRoute: typeof AuthenticatedRoute
-    }
-    '/_authenticated/session-dimentorin_/$id': {
-      id: '/_authenticated/session-dimentorin_/$id'
-      path: '/session-dimentorin/$id'
-      fullPath: '/session-dimentorin/$id'
-      preLoaderRoute: typeof AuthenticatedSessionDimentorinIdRouteImport
-      parentRoute: typeof AuthenticatedRoute
-    }
-    '/_authenticated/roles_/create': {
-      id: '/_authenticated/roles_/create'
-      path: '/roles/create'
-      fullPath: '/roles/create'
-      preLoaderRoute: typeof AuthenticatedRolesCreateRouteImport
-      parentRoute: typeof AuthenticatedRoute
-    }
-    '/_authenticated/roles_/$id': {
-      id: '/_authenticated/roles_/$id'
-      path: '/roles/$id'
-      fullPath: '/roles/$id'
-      preLoaderRoute: typeof AuthenticatedRolesIdRouteImport
-      parentRoute: typeof AuthenticatedRoute
-    }
-    '/_authenticated/roadmap-dimentorin_/create': {
-      id: '/_authenticated/roadmap-dimentorin_/create'
-      path: '/roadmap-dimentorin/create'
-      fullPath: '/roadmap-dimentorin/create'
-      preLoaderRoute: typeof AuthenticatedRoadmapDimentorinCreateRouteImport
-      parentRoute: typeof AuthenticatedRoute
-    }
-    '/_authenticated/roadmap-dimentorin_/$id': {
-      id: '/_authenticated/roadmap-dimentorin_/$id'
-      path: '/roadmap-dimentorin/$id'
-      fullPath: '/roadmap-dimentorin/$id'
-      preLoaderRoute: typeof AuthenticatedRoadmapDimentorinIdRouteImport
-      parentRoute: typeof AuthenticatedRoute
-    }
-    '/_authenticated/permissions_/create': {
-      id: '/_authenticated/permissions_/create'
-      path: '/permissions/create'
-      fullPath: '/permissions/create'
-      preLoaderRoute: typeof AuthenticatedPermissionsCreateRouteImport
-      parentRoute: typeof AuthenticatedRoute
-    }
-    '/_authenticated/permissions_/$id': {
-      id: '/_authenticated/permissions_/$id'
-      path: '/permissions/$id'
-      fullPath: '/permissions/$id'
-      preLoaderRoute: typeof AuthenticatedPermissionsIdRouteImport
-      parentRoute: typeof AuthenticatedRoute
-    }
-    '/_authenticated/gacha-roll_/create': {
-      id: '/_authenticated/gacha-roll_/create'
-      path: '/gacha-roll/create'
-      fullPath: '/gacha-roll/create'
-      preLoaderRoute: typeof AuthenticatedGachaRollCreateRouteImport
-      parentRoute: typeof AuthenticatedRoute
-    }
-    '/_authenticated/gacha-roll_/$id': {
-      id: '/_authenticated/gacha-roll_/$id'
-      path: '/gacha-roll/$id'
-      fullPath: '/gacha-roll/$id'
-      preLoaderRoute: typeof AuthenticatedGachaRollIdRouteImport
-      parentRoute: typeof AuthenticatedRoute
-    }
-    '/_authenticated/dashboard_/create': {
-      id: '/_authenticated/dashboard_/create'
-      path: '/dashboard/create'
-      fullPath: '/dashboard/create'
-      preLoaderRoute: typeof AuthenticatedDashboardCreateRouteImport
-      parentRoute: typeof AuthenticatedRoute
-    }
-    '/_authenticated/dashboard_/$id': {
-      id: '/_authenticated/dashboard_/$id'
-      path: '/dashboard/$id'
-      fullPath: '/dashboard/$id'
-      preLoaderRoute: typeof AuthenticatedDashboardIdRouteImport
-      parentRoute: typeof AuthenticatedRoute
-    }
-    '/_authenticated/cms-testimonials_/create': {
-      id: '/_authenticated/cms-testimonials_/create'
-      path: '/cms-testimonials/create'
-      fullPath: '/cms-testimonials/create'
-      preLoaderRoute: typeof AuthenticatedCmsTestimonialsCreateRouteImport
-      parentRoute: typeof AuthenticatedRoute
-    }
-    '/_authenticated/cms-testimonials_/$id': {
-      id: '/_authenticated/cms-testimonials_/$id'
-      path: '/cms-testimonials/$id'
-      fullPath: '/cms-testimonials/$id'
-      preLoaderRoute: typeof AuthenticatedCmsTestimonialsIdRouteImport
-      parentRoute: typeof AuthenticatedRoute
-    }
-    '/_authenticated/cms-events_/create': {
-      id: '/_authenticated/cms-events_/create'
-      path: '/cms-events/create'
-      fullPath: '/cms-events/create'
-      preLoaderRoute: typeof AuthenticatedCmsEventsCreateRouteImport
-      parentRoute: typeof AuthenticatedRoute
-    }
-    '/_authenticated/cms-events_/$id': {
-      id: '/_authenticated/cms-events_/$id'
-      path: '/cms-events/$id'
-      fullPath: '/cms-events/$id'
-      preLoaderRoute: typeof AuthenticatedCmsEventsIdRouteImport
-      parentRoute: typeof AuthenticatedRoute
-    }
-    '/_authenticated/accounts_/$id': {
-      id: '/_authenticated/accounts_/$id'
-      path: '/accounts/$id'
-      fullPath: '/accounts/$id'
-      preLoaderRoute: typeof AuthenticatedAccountsIdRouteImport
-      parentRoute: typeof AuthenticatedRoute
-    }
-  }
-}
-
-interface AuthenticatedRouteChildren {
-  AuthenticatedAccountsRoute: typeof AuthenticatedAccountsRoute
-  AuthenticatedCmsEventsRoute: typeof AuthenticatedCmsEventsRoute
-  AuthenticatedCmsTestimonialsRoute: typeof AuthenticatedCmsTestimonialsRoute
-  AuthenticatedDashboardRoute: typeof AuthenticatedDashboardRoute
-  AuthenticatedDashboardDimentorinRoute: typeof AuthenticatedDashboardDimentorinRoute
-  AuthenticatedFeedbackReviewDimentorinRoute: typeof AuthenticatedFeedbackReviewDimentorinRoute
-  AuthenticatedGachaRollRoute: typeof AuthenticatedGachaRollRoute
-  AuthenticatedHackathonDashboardRoute: typeof AuthenticatedHackathonDashboardRoute
-  AuthenticatedHackathonSubmissionsRoute: typeof AuthenticatedHackathonSubmissionsRoute
-  AuthenticatedHackathonTeamsRoute: typeof AuthenticatedHackathonTeamsRoute
-  AuthenticatedHackathonUsersRoute: typeof AuthenticatedHackathonUsersRoute
-  AuthenticatedPermissionsRoute: typeof AuthenticatedPermissionsRoute
-  AuthenticatedPrizesRoute: typeof AuthenticatedPrizesRoute
-  AuthenticatedRoadmapDimentorinRoute: typeof AuthenticatedRoadmapDimentorinRoute
-  AuthenticatedRolesRoute: typeof AuthenticatedRolesRoute
-  AuthenticatedSessionDimentorinRoute: typeof AuthenticatedSessionDimentorinRoute
-  AuthenticatedSettingsDimentorinRoute: typeof AuthenticatedSettingsDimentorinRoute
-  AuthenticatedTransactionsRoute: typeof AuthenticatedTransactionsRoute
-  AuthenticatedUsersDimentorinRoute: typeof AuthenticatedUsersDimentorinRoute
-  AuthenticatedAccountsIdRoute: typeof AuthenticatedAccountsIdRoute
-  AuthenticatedCmsEventsIdRoute: typeof AuthenticatedCmsEventsIdRoute
-  AuthenticatedCmsEventsCreateRoute: typeof AuthenticatedCmsEventsCreateRoute
-  AuthenticatedCmsTestimonialsIdRoute: typeof AuthenticatedCmsTestimonialsIdRoute
-  AuthenticatedCmsTestimonialsCreateRoute: typeof AuthenticatedCmsTestimonialsCreateRoute
-  AuthenticatedDashboardIdRoute: typeof AuthenticatedDashboardIdRoute
-  AuthenticatedDashboardCreateRoute: typeof AuthenticatedDashboardCreateRoute
-  AuthenticatedGachaRollIdRoute: typeof AuthenticatedGachaRollIdRoute
-  AuthenticatedGachaRollCreateRoute: typeof AuthenticatedGachaRollCreateRoute
-  AuthenticatedPermissionsIdRoute: typeof AuthenticatedPermissionsIdRoute
-  AuthenticatedPermissionsCreateRoute: typeof AuthenticatedPermissionsCreateRoute
-  AuthenticatedRoadmapDimentorinIdRoute: typeof AuthenticatedRoadmapDimentorinIdRoute
-  AuthenticatedRoadmapDimentorinCreateRoute: typeof AuthenticatedRoadmapDimentorinCreateRoute
-  AuthenticatedRolesIdRoute: typeof AuthenticatedRolesIdRoute
-  AuthenticatedRolesCreateRoute: typeof AuthenticatedRolesCreateRoute
-  AuthenticatedSessionDimentorinIdRoute: typeof AuthenticatedSessionDimentorinIdRoute
-  AuthenticatedUsersDimentorinIdRoute: typeof AuthenticatedUsersDimentorinIdRoute
-}
-
-const AuthenticatedRouteChildren: AuthenticatedRouteChildren = {
-  AuthenticatedAccountsRoute: AuthenticatedAccountsRoute,
-  AuthenticatedCmsEventsRoute: AuthenticatedCmsEventsRoute,
-  AuthenticatedCmsTestimonialsRoute: AuthenticatedCmsTestimonialsRoute,
-  AuthenticatedDashboardRoute: AuthenticatedDashboardRoute,
-  AuthenticatedDashboardDimentorinRoute: AuthenticatedDashboardDimentorinRoute,
-  AuthenticatedFeedbackReviewDimentorinRoute:
-    AuthenticatedFeedbackReviewDimentorinRoute,
-  AuthenticatedGachaRollRoute: AuthenticatedGachaRollRoute,
-  AuthenticatedHackathonDashboardRoute: AuthenticatedHackathonDashboardRoute,
-  AuthenticatedHackathonSubmissionsRoute:
-    AuthenticatedHackathonSubmissionsRoute,
-  AuthenticatedHackathonTeamsRoute: AuthenticatedHackathonTeamsRoute,
-  AuthenticatedHackathonUsersRoute: AuthenticatedHackathonUsersRoute,
-  AuthenticatedPermissionsRoute: AuthenticatedPermissionsRoute,
-  AuthenticatedPrizesRoute: AuthenticatedPrizesRoute,
-  AuthenticatedRoadmapDimentorinRoute: AuthenticatedRoadmapDimentorinRoute,
-  AuthenticatedRolesRoute: AuthenticatedRolesRoute,
-  AuthenticatedSessionDimentorinRoute: AuthenticatedSessionDimentorinRoute,
-  AuthenticatedSettingsDimentorinRoute: AuthenticatedSettingsDimentorinRoute,
-  AuthenticatedTransactionsRoute: AuthenticatedTransactionsRoute,
-  AuthenticatedUsersDimentorinRoute: AuthenticatedUsersDimentorinRoute,
-  AuthenticatedAccountsIdRoute: AuthenticatedAccountsIdRoute,
-  AuthenticatedCmsEventsIdRoute: AuthenticatedCmsEventsIdRoute,
-  AuthenticatedCmsEventsCreateRoute: AuthenticatedCmsEventsCreateRoute,
-  AuthenticatedCmsTestimonialsIdRoute: AuthenticatedCmsTestimonialsIdRoute,
-  AuthenticatedCmsTestimonialsCreateRoute:
-    AuthenticatedCmsTestimonialsCreateRoute,
-  AuthenticatedDashboardIdRoute: AuthenticatedDashboardIdRoute,
-  AuthenticatedDashboardCreateRoute: AuthenticatedDashboardCreateRoute,
-  AuthenticatedGachaRollIdRoute: AuthenticatedGachaRollIdRoute,
-  AuthenticatedGachaRollCreateRoute: AuthenticatedGachaRollCreateRoute,
-  AuthenticatedPermissionsIdRoute: AuthenticatedPermissionsIdRoute,
-  AuthenticatedPermissionsCreateRoute: AuthenticatedPermissionsCreateRoute,
-  AuthenticatedRoadmapDimentorinIdRoute: AuthenticatedRoadmapDimentorinIdRoute,
-  AuthenticatedRoadmapDimentorinCreateRoute:
-    AuthenticatedRoadmapDimentorinCreateRoute,
-  AuthenticatedRolesIdRoute: AuthenticatedRolesIdRoute,
-  AuthenticatedRolesCreateRoute: AuthenticatedRolesCreateRoute,
-  AuthenticatedSessionDimentorinIdRoute: AuthenticatedSessionDimentorinIdRoute,
-  AuthenticatedUsersDimentorinIdRoute: AuthenticatedUsersDimentorinIdRoute,
-}
-
-const AuthenticatedRouteWithChildren = AuthenticatedRoute._addFileChildren(
-  AuthenticatedRouteChildren,
-)
-
-interface PublicRouteChildren {
-  PublicAuthLoginRoute: typeof PublicAuthLoginRoute
-}
-
-const PublicRouteChildren: PublicRouteChildren = {
-  PublicAuthLoginRoute: PublicAuthLoginRoute,
-}
-
-const PublicRouteWithChildren =
-  PublicRoute._addFileChildren(PublicRouteChildren)
-
-const rootRouteChildren: RootRouteChildren = {
-  IndexRoute: IndexRoute,
-  AuthenticatedRoute: AuthenticatedRouteWithChildren,
-  PublicRoute: PublicRouteWithChildren,
-}
-export const routeTree = rootRouteImport
-  ._addFileChildren(rootRouteChildren)
-  ._addFileTypes<FileRouteTypes>()

apps/backoffice/src/routes/__root.tsx

@@ -1,5 +0,0 @@
-import { createRootRoute, Outlet } from '@tanstack/react-router'
-
-export const Route = createRootRoute({
-  component: () => <Outlet />,
-})

apps/backoffice/src/routes/_authenticated.tsx

@@ -1,28 +0,0 @@
-import { createFileRoute, Outlet, redirect } from '@tanstack/react-router';
-import { SessionToken } from '@imphnen-frontend-service/service';
-import {
-  SidebarInset,
-  SidebarProvider,
-} from '@imphnen-frontend-service/ui/atoms';
-import { BackofficeSidebar } from '../components/sidebar';
-
-export const Route = createFileRoute('/_authenticated')({
-  beforeLoad: () => {
-    const session = SessionToken.get();
-    if (!session?.token?.access_token) {
-      throw redirect({ to: '/auth/login' });
-    }
-  },
-  component: AuthenticatedLayout,
-});
-
-function AuthenticatedLayout() {
-  return (
-    <SidebarProvider>
-      <BackofficeSidebar />
-      <SidebarInset>
-        <Outlet />
-      </SidebarInset>
-    </SidebarProvider>
-  );
-}

apps/backoffice/src/routes/_authenticated/_components/hackathon-submissions/submission-modal.tsx

@@ -1,233 +0,0 @@
-import { FC } from 'react';
-import { Button } from '@imphnen-frontend-service/ui/atoms';
-import {
-  CloseOutlined,
-  LinkOutlined,
-  ProjectOutlined,
-  FileImageOutlined,
-} from '@ant-design/icons';
-import { TAdminSubmissionItem } from '@imphnen-frontend-service/service';
-import { cn } from '@imphnen-frontend-service/utils';
-
-interface SubmissionModalProps {
-  isOpen: boolean;
-  onClose: () => void;
-  submission: TAdminSubmissionItem;
-}
-
-const SubmissionModal: FC<SubmissionModalProps> = ({
-  isOpen,
-  onClose,
-  submission,
-}) => {
-  if (!isOpen) return null;
-
-  const getStatusColor = (status: string) => {
-    switch (status) {
-      case 'submitted':
-        return 'bg-success-50 border-success-200 text-success-800';
-      case 'pending':
-        return 'bg-orange-50 border-orange-200 text-orange-800';
-      case 'approved':
-        return 'bg-blue-50 border-blue-200 text-blue-800';
-      case 'rejected':
-        return 'bg-error-50 border-error-200 text-error-800';
-      default:
-        return 'bg-neutral-50 border-neutral-200 text-neutral-800';
-    }
-  };
-
-  return (
-    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
-      <div className="bg-white rounded-lg shadow-xl w-full max-w-3xl max-h-[90vh] overflow-y-auto">
-
-        <div className="flex items-center justify-between p-6 border-b border-neutral-200">
-          <div className="flex items-center gap-3">
-            <div className="w-10 h-10 rounded-full bg-success-100 flex items-center justify-center">
-              <ProjectOutlined className="text-success-600 text-lg" />
-            </div>
-            <div>
-              <h2 className="text-xl font-semibold text-neutral-900">
-                {submission.project_name}
-              </h2>
-              <p className="text-sm text-neutral-500">
-                Team ID: {submission.team_id} • Submitted{' '}
-                {new Date(submission.submitted_at).toLocaleDateString('en-US', {
-                  year: 'numeric',
-                  month: 'long',
-                  day: 'numeric',
-                })}
-              </p>
-            </div>
-          </div>
-          <button
-            onClick={onClose}
-            className="text-neutral-400 hover:text-neutral-600 transition-colors cursor-pointer"
-          >
-            <CloseOutlined className="text-xl" />
-          </button>
-        </div>
-
-        <div className="p-6 space-y-6">
-
-          <div
-            className={cn(
-              'flex items-center gap-3 p-4 border rounded-lg',
-              getStatusColor(submission.status)
-            )}
-          >
-            <div
-              className={cn(
-                'w-3 h-3 rounded-full',
-                submission.status === 'submitted' && 'bg-success-500',
-                submission.status === 'pending' && 'bg-orange-500',
-                submission.status === 'approved' && 'bg-blue-500',
-                submission.status === 'rejected' && 'bg-error-500'
-              )}
-            ></div>
-            <div>
-              <p className="text-sm font-medium">
-                Status:{' '}
-                {submission.status.charAt(0).toUpperCase() +
-                  submission.status.slice(1)}
-              </p>
-              <p className="text-xs">Submitted by: {submission.submitted_by}</p>
-            </div>
-          </div>
-
-          <div>
-            <h3 className="text-sm font-medium text-neutral-700 mb-2">
-              Project Description
-            </h3>
-            <p className="text-sm text-neutral-600 leading-relaxed">
-              {submission.description}
-            </p>
-          </div>
-
-          <div className="space-y-3">
-            <h3 className="text-sm font-medium text-neutral-700">
-              Project Links
-            </h3>
-
-            <div className="flex items-start gap-3 p-3 bg-neutral-50 rounded-lg">
-              <LinkOutlined className="text-primary-500 mt-1" />
-              <div className="flex-1 min-w-0">
-                <p className="text-xs font-medium text-neutral-600 mb-1">
-                  Repository
-                </p>
-                <a
-                  href={submission.repository_url}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="text-sm text-primary-600 hover:text-primary-700 hover:underline break-all"
-                >
-                  {submission.repository_url}
-                </a>
-              </div>
-            </div>
-
-            {submission.demo_url && (
-              <div className="flex items-start gap-3 p-3 bg-neutral-50 rounded-lg">
-                <LinkOutlined className="text-primary-500 mt-1" />
-                <div className="flex-1 min-w-0">
-                  <p className="text-xs font-medium text-neutral-600 mb-1">
-                    Live Demo
-                  </p>
-                  <a
-                    href={submission.demo_url}
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    className="text-sm text-primary-600 hover:text-primary-700 hover:underline break-all"
-                  >
-                    {submission.demo_url}
-                  </a>
-                </div>
-              </div>
-            )}
-
-            {submission.presentation_url && (
-              <div className="flex items-start gap-3 p-3 bg-neutral-50 rounded-lg">
-                <LinkOutlined className="text-primary-500 mt-1" />
-                <div className="flex-1 min-w-0">
-                  <p className="text-xs font-medium text-neutral-600 mb-1">
-                    Presentation
-                  </p>
-                  <a
-                    href={submission.presentation_url}
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    className="text-sm text-primary-600 hover:text-primary-700 hover:underline break-all"
-                  >
-                    {submission.presentation_url}
-                  </a>
-                </div>
-              </div>
-            )}
-          </div>
-
-          {submission.screenshots && submission.screenshots.length > 0 && (
-            <div className="space-y-3">
-              <h3 className="text-sm font-medium text-neutral-700 flex items-center gap-2">
-                <FileImageOutlined className="text-primary-500" />
-                Screenshots ({submission.screenshots.length})
-              </h3>
-              <div className="grid grid-cols-2 gap-3">
-                {submission.screenshots.map((screenshot, index) => (
-                  <a
-                    key={index}
-                    href={screenshot}
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    className="block rounded-lg overflow-hidden border border-neutral-200 hover:border-primary-300 transition-colors"
-                  >
-                    <img
-                      src={screenshot}
-                      alt={`Screenshot ${index + 1}`}
-                      className="w-full h-40 object-cover"
-                    />
-                  </a>
-                ))}
-              </div>
-            </div>
-          )}
-
-          <div className="grid grid-cols-2 gap-4 pt-4 border-t border-neutral-200">
-            <div>
-              <p className="text-xs text-neutral-500 mb-1">Created</p>
-              <p className="text-sm text-neutral-900">
-                {new Date(submission.created_at).toLocaleDateString('en-US', {
-                  year: 'numeric',
-                  month: 'short',
-                  day: 'numeric',
-                  hour: '2-digit',
-                  minute: '2-digit',
-                })}
-              </p>
-            </div>
-            <div>
-              <p className="text-xs text-neutral-500 mb-1">Last Updated</p>
-              <p className="text-sm text-neutral-900">
-                {new Date(submission.updated_at).toLocaleDateString('en-US', {
-                  year: 'numeric',
-                  month: 'short',
-                  day: 'numeric',
-                  hour: '2-digit',
-                  minute: '2-digit',
-                })}
-              </p>
-            </div>
-          </div>
-        </div>
-
-        <div className="flex items-center justify-end gap-3 p-6 border-t border-neutral-200 bg-neutral-50">
-          <Button variant="secondary" onClick={onClose}>
-            Close
-          </Button>
-
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default SubmissionModal;

apps/backoffice/src/routes/_authenticated/_components/hackathon-teams/modal-team-detail-new.tsx

@@ -1,501 +0,0 @@
-import { FC, useState, useEffect, useMemo, useRef } from 'react';
-import { Button } from '@imphnen-frontend-service/ui/atoms';
-import { CityFilterSelect } from '../../../../components/city-filter-select';
-import TeamBannerPlaceholder from './team-banner-placeholder';
-import { cn } from '@imphnen-frontend-service/utils';
-import { TAdminTeamItem } from '@imphnen-frontend-service/service';
-import {
-  TeamOutlined,
-  CloseOutlined,
-  DeleteOutlined,
-  SaveOutlined,
-  CalendarOutlined,
-  CrownOutlined,
-  ExclamationOutlined,
-  UploadOutlined,
-  CameraOutlined,
-  EyeOutlined,
-  EyeInvisibleOutlined,
-} from '@ant-design/icons';
-
-type TeamType = TAdminTeamItem;
-
-interface ModalProps {
-  isOpen: boolean;
-  onClose: () => void;
-  team: TeamType | null;
-}
-
-const ModalTeamDetail: FC<ModalProps> = ({ isOpen, onClose, team }) => {
-  const [formData, setFormData] = useState<TeamType | null>(null);
-  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
-  const [showLogoMenu, setShowLogoMenu] = useState(false);
-  const logoInputRef = useRef<HTMLInputElement>(null);
-  const bannerInputRef = useRef<HTMLInputElement>(null);
-
-  useEffect(() => {
-    if (isOpen) {
-      if (team) {
-        setFormData({ ...team });
-      } else {
-        setFormData({
-          id: '',
-          name: '',
-          description: '',
-          city: '',
-          banner: null,
-          logo: null,
-          visibility: 'public',
-          created_at: new Date().toISOString(),
-          updated_at: new Date().toISOString(),
-          leader_id: '',
-        });
-      }
-    }
-  }, [isOpen, team]);
-
-  const hasChanges = useMemo(() => {
-    if (!formData || !team) return !!formData;
-    return (
-      formData.name !== team.name ||
-      formData.description !== team.description ||
-      formData.city !== team.city ||
-      formData.visibility !== team.visibility ||
-      formData.logo !== team.logo ||
-      formData.banner !== team.banner
-    );
-  }, [formData, team]);
-
-  const isFormValid = useMemo(() => {
-    if (!formData) return false;
-    return (
-      formData.name.trim() !== '' &&
-      formData.city.trim() !== '' &&
-      formData.description.trim() !== ''
-    );
-  }, [formData]);
-
-  const canSave = hasChanges && isFormValid;
-
-  if (!isOpen || !formData) return null;
-
-  const handleInputChange = (field: keyof TeamType, value: string | null) => {
-    setFormData((prev) => (prev ? { ...prev, [field]: value } : null));
-  };
-
-  const handleSave = () => {
-    console.log('Saving team:', formData);
-    onClose();
-  };
-
-  const handleDelete = () => {
-    if (!team) return;
-    console.log('Deleting team:', team.id);
-    setShowDeleteConfirm(false);
-    onClose();
-  };
-
-  const handleLogoUpload = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const file = event.target.files?.[0];
-    if (!file) return;
-
-    if (!file.type.startsWith('image/')) {
-      alert('Please select an image file');
-      return;
-    }
-    if (file.size > 5 * 1024 * 1024) {
-      alert('Image size must be less than 5MB');
-      return;
-    }
-
-    const reader = new FileReader();
-    reader.onload = (e) => {
-      const logoUrl = e.target?.result as string;
-      handleInputChange('logo', logoUrl);
-      setShowLogoMenu(false);
-    };
-    reader.readAsDataURL(file);
-  };
-
-  const handleBannerUpload = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const file = event.target.files?.[0];
-    if (!file) return;
-
-    if (!file.type.startsWith('image/')) {
-      alert('Please select an image file');
-      return;
-    }
-    if (file.size > 5 * 1024 * 1024) {
-      alert('Image size must be less than 5MB');
-      return;
-    }
-
-    const reader = new FileReader();
-    reader.onload = (e) => {
-      const bannerUrl = e.target?.result as string;
-      handleInputChange('banner', bannerUrl);
-    };
-    reader.readAsDataURL(file);
-  };
-
-  return (
-    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
-      <div className="bg-white rounded-lg shadow-xl w-full max-w-4xl max-h-[90vh] overflow-y-auto">
-        <div className="flex items-center justify-between p-6 border-b border-neutral-200">
-          <div className="flex items-center gap-3">
-            <div className="w-10 h-10 rounded-full bg-primary-100 flex items-center justify-center">
-              <TeamOutlined className="text-primary-600 text-lg" />
-            </div>
-            <div>
-              <h2 className="text-xl font-semibold text-neutral-900">
-                {team ? 'Team Details' : 'Create New Team'}
-              </h2>
-              <p className="text-sm text-neutral-500">
-                {team
-                  ? 'View and manage team information'
-                  : 'Add a new team to the hackathon'}
-              </p>
-            </div>
-          </div>
-          <button
-            className="p-2 hover:bg-neutral-100 rounded-lg transition-colors cursor-pointer"
-            onClick={() => {
-              setShowLogoMenu(false);
-              onClose();
-            }}
-          >
-            <CloseOutlined className="text-neutral-400 text-lg" />
-          </button>
-        </div>
-
-        <div className="p-6 space-y-6" onClick={() => setShowLogoMenu(false)}>
-          <input
-            type="file"
-            ref={logoInputRef}
-            onChange={handleLogoUpload}
-            accept="image/*"
-            className="hidden"
-          />
-          <input
-            type="file"
-            ref={bannerInputRef}
-            onChange={handleBannerUpload}
-            accept="image/*"
-            className="hidden"
-          />
-
-          <div className="space-y-2">
-            <label className="block text-sm font-medium text-neutral-700">
-              Team Banner{' '}
-              <span className="text-xs text-neutral-500">
-                (3:1 aspect ratio recommended)
-              </span>
-            </label>
-            <div className="relative group">
-              <TeamBannerPlaceholder
-                banner={formData.banner || undefined}
-                teamName={formData.name || 'Team Name'}
-                className="rounded-lg border border-neutral-200 transition-all group-hover:border-primary-300"
-              />
-              <div className="absolute inset-0 bg-black/40 rounded-lg opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center gap-3">
-                <Button
-                  variant="primary"
-                  size="sm"
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    bannerInputRef.current?.click();
-                  }}
-                  className="bg-white/90 hover:bg-white text-neutral-700 border-transparent shadow-sm gap-2"
-                >
-                  <UploadOutlined className="text-sm" />
-                  {formData.banner ? 'Change Banner' : 'Add Banner'}
-                </Button>
-                {formData.banner && (
-                  <Button
-                    variant="secondary"
-                    size="sm"
-                    onClick={(e) => {
-                      e.stopPropagation();
-                      handleInputChange('banner', null);
-                    }}
-                    className="bg-white/90 hover:bg-white text-red-600 border-transparent shadow-sm hover:text-red-700 gap-2"
-                  >
-                    <DeleteOutlined className="text-sm" />
-                    Delete
-                  </Button>
-                )}
-              </div>
-            </div>
-          </div>
-
-          <div className="grid grid-cols-12 gap-4 items-start">
-            <div className="col-span-2">
-              <label className="block text-sm font-medium text-neutral-700 mb-2">
-                Logo
-              </label>
-              <div className="relative group">
-                <div className="w-24 h-24 rounded-full bg-neutral-100 flex items-center justify-center overflow-hidden border border-neutral-200 group-hover:border-primary-300 transition-colors">
-                  {formData.logo ? (
-                    <img
-                      src={formData.logo}
-                      alt={formData.name || 'Team Logo'}
-                      className="w-full h-full object-cover"
-                    />
-                  ) : (
-                    <TeamOutlined className="text-neutral-400 text-xl" />
-                  )}
-                </div>
-                <button
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    setShowLogoMenu(!showLogoMenu);
-                  }}
-                  className="absolute inset-0 bg-neutral-300/80 cursor-pointer rounded-full opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center w-24 h-24"
-                >
-                  <CameraOutlined className="text-white text-lg" />
-                </button>
-                {showLogoMenu && (
-                  <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={(e) => {
-                        e.stopPropagation();
-                        logoInputRef.current?.click();
-                      }}
-                      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.logo ? 'Change Logo' : 'Upload Logo'}
-                    </button>
-                    {formData.logo && (
-                      <button
-                        onClick={(e) => {
-                          e.stopPropagation();
-                          handleInputChange('logo', null);
-                          setShowLogoMenu(false);
-                        }}
-                        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 Logo
-                      </button>
-                    )}
-                  </div>
-                )}
-              </div>
-            </div>
-
-            <div className="col-span-10 space-y-2">
-              <label className="block text-sm font-medium text-neutral-700">
-                Team Name <span className="text-danger-500">*</span>
-              </label>
-              <input
-                type="text"
-                className="w-full border border-neutral-200 rounded-lg px-3 py-2 text-sm focus:border-primary-500 focus:outline-none"
-                placeholder="Enter team name"
-                value={formData.name}
-                onChange={(e) => handleInputChange('name', e.target.value)}
-              />
-            </div>
-          </div>
-
-          <div className="space-y-2">
-            <label className="block text-sm font-medium text-neutral-700">
-              Description <span className="text-danger-500">*</span>
-            </label>
-            <textarea
-              className="w-full border border-neutral-200 rounded-lg px-3 py-2 text-sm focus:border-primary-500 focus:outline-none resize-none"
-              placeholder="Enter team description"
-              rows={3}
-              value={formData.description}
-              onChange={(e) => handleInputChange('description', e.target.value)}
-            />
-          </div>
-
-          <div className="space-y-2">
-            <label className="block text-sm font-medium text-neutral-700">
-              City <span className="text-danger-500">*</span>
-            </label>
-            <CityFilterSelect
-              value={formData.city || 'all'}
-              onChange={(city) =>
-                handleInputChange('city', city === 'all' ? '' : city)
-              }
-              className="w-full"
-              placeholder="Search cities..."
-              allOptionLabel="Select a city"
-              filterIcon={false}
-            />
-          </div>
-
-          <div className="space-y-2">
-            <label className="block text-sm font-medium text-neutral-700">
-              Team Visibility
-            </label>
-            <div className="flex gap-4">
-              <label className="flex items-center gap-2 cursor-pointer">
-                <input
-                  type="radio"
-                  name="visibility"
-                  value="public"
-                  checked={formData.visibility === 'public'}
-                  onChange={(e) =>
-                    handleInputChange('visibility', e.target.value)
-                  }
-                  className="text-primary-600"
-                />
-                <EyeOutlined className="text-info-600" />
-                <span className="text-sm">Public</span>
-              </label>
-              <label className="flex items-center gap-2 cursor-pointer">
-                <input
-                  type="radio"
-                  name="visibility"
-                  value="private"
-                  checked={formData.visibility === 'private'}
-                  onChange={(e) =>
-                    handleInputChange('visibility', e.target.value)
-                  }
-                  className="text-primary-600"
-                />
-                <EyeInvisibleOutlined className="text-neutral-600" />
-                <span className="text-sm">Private</span>
-              </label>
-            </div>
-          </div>
-
-          {team && (
-            <div className="space-y-4 border-t border-neutral-200 pt-4">
-              <div className="space-y-2">
-                <label className="block text-sm font-medium text-neutral-700">
-                  Team Leader ID
-                </label>
-                <div className="p-3 bg-neutral-50 rounded-lg flex items-center gap-3">
-                  <CrownOutlined className="text-yellow-600 text-lg" />
-                  <span className="text-sm text-neutral-700 font-mono">
-                    {team.leader_id}
-                  </span>
-                </div>
-              </div>
-
-              <div className="grid grid-cols-2 gap-4">
-                <div className="space-y-2">
-                  <label className="block text-sm font-medium text-neutral-700">
-                    Created
-                  </label>
-                  <div className="flex items-center gap-2 p-3 bg-neutral-50 rounded-lg">
-                    <CalendarOutlined className="text-neutral-500" />
-                    <span className="text-sm text-neutral-700">
-                      {new Date(team.created_at).toLocaleDateString('en-US', {
-                        year: 'numeric',
-                        month: 'long',
-                        day: 'numeric',
-                        hour: '2-digit',
-                        minute: '2-digit',
-                      })}
-                    </span>
-                  </div>
-                </div>
-
-                <div className="space-y-2">
-                  <label className="block text-sm font-medium text-neutral-700">
-                    Last Updated
-                  </label>
-                  <div className="flex items-center gap-2 p-3 bg-neutral-50 rounded-lg">
-                    <CalendarOutlined className="text-neutral-500" />
-                    <span className="text-sm text-neutral-700">
-                      {new Date(team.updated_at).toLocaleDateString('en-US', {
-                        year: 'numeric',
-                        month: 'long',
-                        day: 'numeric',
-                        hour: '2-digit',
-                        minute: '2-digit',
-                      })}
-                    </span>
-                  </div>
-                </div>
-              </div>
-            </div>
-          )}
-        </div>
-
-        <div className="flex items-center justify-between p-6 border-t border-neutral-200">
-          <div>
-            {team && (
-              <Button
-                variant="danger"
-                size="md"
-                onClick={() => setShowDeleteConfirm(true)}
-                className="flex items-center gap-2"
-              >
-                <DeleteOutlined />
-                Delete Team
-              </Button>
-            )}
-          </div>
-
-          <div className="flex items-center gap-3">
-            <Button variant="secondary" size="md" onClick={onClose}>
-              Cancel
-            </Button>
-            <Button
-              variant="primary"
-              size="md"
-              onClick={handleSave}
-              disabled={!canSave}
-              className="flex items-center gap-2"
-            >
-              <SaveOutlined />
-              {team ? 'Save Changes' : 'Create Team'}
-            </Button>
-          </div>
-        </div>
-      </div>
-
-      {showDeleteConfirm && (
-        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-60 p-4">
-          <div className="bg-white rounded-lg shadow-xl w-full max-w-md p-6">
-            <div className="flex items-center gap-4 mb-4">
-              <div className="w-12 h-12 rounded-full bg-danger-100 flex items-center justify-center">
-                <ExclamationOutlined className="text-danger-600 text-xl" />
-              </div>
-              <div>
-                <h3 className="text-lg font-semibold text-neutral-900">
-                  Delete Team
-                </h3>
-                <p className="text-sm text-neutral-500">
-                  This action cannot be undone.
-                </p>
-              </div>
-            </div>
-
-            <p className="text-sm text-neutral-700 mb-6">
-              Are you sure you want to delete "{team?.name}"? This will
-              permanently remove the team and all associated data.
-            </p>
-
-            <div className="flex items-center gap-3 justify-end">
-              <Button
-                variant="secondary"
-                size="md"
-                onClick={() => setShowDeleteConfirm(false)}
-              >
-                Cancel
-              </Button>
-              <Button
-                variant="danger"
-                size="md"
-                onClick={handleDelete}
-                className="flex items-center gap-2"
-              >
-                <DeleteOutlined />
-                Delete Team
-              </Button>
-            </div>
-          </div>
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default ModalTeamDetail;

apps/backoffice/src/routes/_authenticated/_components/hackathon-teams/team-banner-placeholder.tsx

@@ -1,79 +0,0 @@
-import { FC } from 'react';
-import { TeamOutlined } from '@ant-design/icons';
-import { cn } from '@imphnen-frontend-service/utils';
-
-interface TeamBannerPlaceholderProps {
-  banner?: string;
-  teamName: string;
-  className?: string;
-  showPlaceholder?: boolean;
-}
-
-const TeamBannerPlaceholder: FC<TeamBannerPlaceholderProps> = ({
-  banner,
-  teamName,
-  className = '',
-  showPlaceholder = true,
-}) => {
-  const aspectRatioClass = 'aspect-[3/1]';
-
-  if (!banner && !showPlaceholder) {
-    return null;
-  }
-
-  if (banner) {
-    return (
-      <div
-        className={cn(
-          'w-full bg-gray-100 overflow-hidden relative',
-          aspectRatioClass,
-          className
-        )}
-      >
-        <img
-          src={banner}
-          alt={`${teamName} banner`}
-          className="w-full h-full object-cover"
-          onError={(e) => {
-            const target = e.target as HTMLImageElement;
-            target.style.display = 'none';
-            const placeholder = target.nextElementSibling as HTMLElement;
-            if (placeholder) {
-              placeholder.style.display = 'flex';
-            }
-          }}
-        />
-        <div
-          className={cn(
-            'absolute inset-0 bg-linear-to-r from-gray-100 to-gray-200 flex items-center justify-center',
-            'hidden'
-          )}
-        >
-          <div className="text-center">
-            <TeamOutlined className="text-4xl text-gray-400 mb-2" />
-            <p className="text-sm text-gray-500 font-medium">{teamName}</p>
-            <p className="text-xs text-gray-400">Team Banner</p>
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div
-      className={cn(
-        'w-full bg-linear-to-r from-gray-100 to-gray-200 flex items-center justify-center',
-        aspectRatioClass,
-        className
-      )}
-    >
-      <div className="text-center">
-        <TeamOutlined className="text-4xl text-gray-400 mb-2" />
-        <p className="text-sm text-gray-500 font-medium">{teamName}</p>
-        <p className="text-xs text-gray-400">No Banner</p>
-      </div>
-    </div>
-  );
-};
-
-export default TeamBannerPlaceholder;

apps/backoffice/src/routes/_authenticated/_components/hackathon-users/modal-user-detail.tsx

@@ -1,626 +0,0 @@
-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 | null;
-  fullname: string;
-  bio?: string;
-  location: string | null;
-  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);
-
-  useEffect(() => {
-    if (isOpen) {
-      if (user) {
-        setFormData({ ...user });
-      } else {
-        setFormData({
-          id: '',
-          fullname: '',
-          bio: '',
-          location: '',
-          is_active: true,
-          skills: [],
-          avatar: undefined,
-          created_at: new Date().toISOString(),
-          updated_at: new Date().toISOString(),
-        });
-      }
-    }
-  }, [isOpen, user]);
-
-  const hasChanges = useMemo(() => {
-    if (!formData) return false;
-    if (!user) return true;
-    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]);
-
-  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) {
-      console.log('Update user data:', formData);
-    } else {
-      console.log('Create new user:', formData);
-    }
-    onClose();
-  };
-
-  const handleCancel = () => {
-    if (user) {
-      setFormData({ ...user });
-    }
-    onClose();
-  };
-
-  const handleDeleteAccount = () => {
-    if (!user) return;
-    console.log('Delete user:', user.id);
-    setShowDeleteConfirm(false);
-    onClose();
-  };
-
-  const handleAvatarUpload = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const file = event.target.files?.[0];
-    if (file) {
-      if (!file.type.startsWith('image/')) {
-        alert('Please select an image file');
-        return;
-      }
-
-      if (file.size > 5 * 1024 * 1024) {
-        alert('Image size must be less than 5MB');
-        return;
-      }
-
-      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()}
-        >
-          <input
-            type="file"
-            ref={fileInputRef}
-            onChange={handleAvatarUpload}
-            accept="image/*"
-            className="hidden"
-          />
-          <div className="border-b border-neutral-200 px-8 py-6 flex justify-between items-start">
-            <div className="flex items-center gap-4">
-              <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>
-
-                <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>
-
-                {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 cursor-pointer"
-              onClick={() => {
-                setShowAvatarMenu(false);
-                handleCancel();
-              }}
-            >
-              <CloseOutlined className="text-neutral-400 text-lg" />
-            </button>
-          </div>
-
-          <div className="p-8" onClick={() => setShowAvatarMenu(false)}>
-            <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
-              <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">
-                    <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 ||
-                              formData.fullname.trim() === ''
-                              ? 'border-red-300 bg-red-50'
-                              : 'border-neutral-300'
-                          )}
-                          placeholder="Enter full name"
-                        />
-                        {(!formData.fullname ||
-                          formData.fullname.trim() === '') && (
-                          <p className="text-red-500 text-xs mt-1">
-                            Full name is required
-                          </p>
-                        )}
-                      </div>
-                    </div>
-
-                    <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 ||
-                              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 ||
-                          formData.location.trim() === '') && (
-                          <p className="text-red-500 text-xs mt-1">
-                            Location is required
-                          </p>
-                        )}
-                      </div>
-                    </div>
-
-                    {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>
-
-                <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>
-
-              <div className="space-y-6">
-                <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>
-
-                <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>
-
-                {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>
-
-          <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>
-                {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>
-
-          {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/routes/_authenticated/_hooks/permissions/use-item.ts

@@ -1,57 +0,0 @@
-import { useForm } from 'react-hook-form';
-import { toast } from 'sonner';
-
-export const useItem = (
-  nextStep: () => void,
-  initialValues?: any,
-  onDataCapture?: (data: any) => void,
-) => {
-  const form = useForm<any>({
-    mode: 'all',
-    defaultValues: initialValues,
-  });
-
-  const onSubmit = form.handleSubmit((data) => {
-    onDataCapture?.(data);
-    nextStep();
-  });
-
-  return {
-    form,
-    onSubmit,
-  };
-};
-
-export const useConfirmItem = (
-  onClose: () => void,
-  resetStep: () => void,
-  actionFunction?: () => Promise<boolean>,
-  messages?: {
-    success?: string;
-    error?: string;
-  }
-) => {
-  const onConfirm = async () => {
-    try {
-      if (actionFunction) {
-        await actionFunction();
-      }
-      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/routes/_authenticated/_hooks/roles/use-item.ts

@@ -1,57 +0,0 @@
-import { useForm } from 'react-hook-form';
-import { toast } from 'sonner';
-
-export const useItem = (
-  nextStep: () => void,
-  initialValues?: any,
-  onDataCapture?: (data: any) => void,
-) => {
-  const form = useForm<any>({
-    mode: 'all',
-    defaultValues: initialValues,
-  });
-
-  const onSubmit = form.handleSubmit((data) => {
-    onDataCapture?.(data);
-    nextStep();
-  });
-
-  return {
-    form,
-    onSubmit,
-  };
-};
-
-export const useConfirmItem = (
-  onClose: () => void,
-  resetStep: () => void,
-  actionFunction?: () => Promise<boolean>,
-  messages?: {
-    success?: string;
-    error?: string;
-  }
-) => {
-  const onConfirm = async () => {
-    try {
-      if (actionFunction) {
-        await actionFunction();
-      }
-      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/routes/_authenticated/accounts.tsx

@@ -1,186 +0,0 @@
-import { createFileRoute, useNavigate } from '@tanstack/react-router';
-import * as React from 'react';
-import { Filter as FilterIcon, Search, Pencil } from 'lucide-react';
-import {
-  Button,
-  Card,
-  CardContent,
-  CardHeader,
-  Checkbox,
-  Input,
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-  Badge,
-} from '@imphnen-frontend-service/ui/atoms';
-import {
-  DataTable,
-  Filter,
-  BackofficeWrapper,
-} from '@imphnen-frontend-service/ui/organisms';
-import {
-  ColumnDef,
-  getCoreRowModel,
-  getPaginationRowModel,
-  PaginationState,
-  useReactTable,
-  RowSelectionState,
-} from '@tanstack/react-table';
-import {
-  useUserList,
-  TUsersListItem,
-} from '@imphnen-frontend-service/service';
-
-export const Route = createFileRoute('/_authenticated/accounts')({
-  component: AccountsPage,
-});
-
-function AccountsPage() {
-  const navigate = useNavigate();
-  const [search, setSearch] = React.useState('');
-  const [pagination, setPagination] = React.useState<PaginationState>({
-    pageIndex: 0,
-    pageSize: 10,
-  });
-  const [rowSelection, setRowSelection] =
-    React.useState<RowSelectionState>({});
-  const [showFilter, setShowFilter] = React.useState(false);
-
-  const { data: usersData, isLoading } = useUserList({
-    search,
-    page: pagination.pageIndex + 1,
-    per_page: pagination.pageSize,
-  });
-
-  const users: TUsersListItem[] = usersData?.data ?? [];
-  const totalItems = usersData?.meta?.total ?? users.length;
-
-  const columns: ColumnDef<TUsersListItem>[] = [
-    {
-      id: 'select',
-      header: ({ table }) => (
-        <Checkbox
-          checked={
-            table.getIsAllRowsSelected()
-              ? true
-              : table.getIsSomeRowsSelected()
-                ? 'indeterminate'
-                : false
-          }
-          onCheckedChange={(v) =>
-            table.toggleAllRowsSelected(!!v && v !== 'indeterminate')
-          }
-          aria-label="Select all"
-        />
-      ),
-      cell: ({ row }) => (
-        <Checkbox
-          checked={row.getIsSelected()}
-          onCheckedChange={(v) => row.toggleSelected(!!v)}
-          aria-label="Select row"
-        />
-      ),
-    },
-    { header: 'No', accessorKey: 'id' },
-    { header: 'Nama Lengkap', accessorKey: 'fullname' },
-    { header: 'Email', accessorKey: 'email' },
-    { header: 'Role', accessorKey: 'role' },
-    {
-      header: 'Status',
-      accessorKey: 'is_active',
-      cell: ({ row }) => (
-        <Badge variant={row.original.is_active ? 'success' : 'destructive'}>
-          {row.original.is_active ? 'Aktif' : 'Tidak Aktif'}
-        </Badge>
-      ),
-    },
-    {
-      header: 'Action',
-      cell: ({ row }) => (
-        <Button
-          variant="secondary"
-          size="sm"
-          onClick={(e) => {
-            e.stopPropagation();
-            navigate({ to: '/accounts/$id', params: { id: row.original.id } });
-          }}
-        >
-          <Pencil className="size-3.5" /> Edit
-        </Button>
-      ),
-    },
-  ];
-
-  const table = useReactTable({
-    data: users,
-    columns,
-    state: { pagination, rowSelection },
-    enableRowSelection: true,
-    onRowSelectionChange: setRowSelection,
-    getCoreRowModel: getCoreRowModel(),
-    getPaginationRowModel: getPaginationRowModel(),
-    onPaginationChange: setPagination,
-    pageCount: Math.ceil(totalItems / pagination.pageSize),
-    manualPagination: true,
-  });
-
-  return (
-    <BackofficeWrapper
-      title="Data Akun"
-      description="Kelola akun pengguna yang terdaftar"
-    >
-      <Card>
-        <CardHeader>
-          <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
-            <div className="relative w-full sm:max-w-sm">
-              <Search className="absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
-              <Input
-                placeholder="Cari nama lengkap atau email…"
-                className="pl-9"
-                value={search}
-                onChange={(e) => setSearch(e.target.value)}
-              />
-            </div>
-            <Popover open={showFilter} onOpenChange={setShowFilter}>
-              <PopoverTrigger asChild>
-                <Button variant="secondary" size="md">
-                  <FilterIcon className="size-4" />
-                  Filters
-                </Button>
-              </PopoverTrigger>
-              <PopoverContent align="end" className="w-auto p-0">
-                <Filter
-                  onClose={() => setShowFilter(false)}
-                  options={[
-                    { id: 'all', value: 'all', label: 'Semua' },
-                    { id: 'active', value: 'active', label: 'Aktif' },
-                    { id: 'inactive', value: 'inactive', label: 'Tidak Aktif' },
-                  ]}
-                />
-              </PopoverContent>
-            </Popover>
-          </div>
-        </CardHeader>
-        <CardContent>
-          {isLoading ? (
-            <div className="py-10 text-center text-sm text-muted-foreground">
-              Memuat data…
-            </div>
-          ) : (
-            <DataTable
-              data={users}
-              columns={columns}
-              table={table}
-              manualPagination
-              pageCount={Math.ceil(totalItems / pagination.pageSize)}
-              currentPage={pagination.pageIndex + 1}
-              onPageChange={(p) =>
-                setPagination((prev) => ({ ...prev, pageIndex: p - 1 }))
-              }
-            />
-          )}
-        </CardContent>
-      </Card>
-    </BackofficeWrapper>
-  );
-}

apps/backoffice/src/routes/_authenticated/accounts_/$id.tsx

@@ -1,122 +0,0 @@
-import { createFileRoute, useNavigate } from '@tanstack/react-router';
-import * as React from 'react';
-import { toast } from 'sonner';
-import { ArrowLeft } from 'lucide-react';
-import {
-  Button,
-  Card,
-  CardContent,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from '@imphnen-frontend-service/ui/atoms';
-import { InputField } from '@imphnen-frontend-service/ui/molecules';
-import { BackofficeWrapper } from '@imphnen-frontend-service/ui/organisms';
-import {
-  useUserList,
-  useUpdateUserById,
-} from '@imphnen-frontend-service/service';
-
-export const Route = createFileRoute('/_authenticated/accounts_/$id')({
-  component: AccountsEditPage,
-});
-
-function AccountsEditPage() {
-  const { id } = Route.useParams();
-  const navigate = useNavigate();
-  const updateUser = useUpdateUserById();
-
-  const { data: usersData, isLoading } = useUserList({
-    search: '',
-    per_page: 100,
-  });
-  const user = usersData?.data?.find((u) => u.id === id);
-
-  const [fullName, setFullName] = React.useState('');
-  const [email, setEmail] = React.useState('');
-
-  React.useEffect(() => {
-    if (user) {
-      setFullName(user.fullname);
-      setEmail(user.email);
-    }
-  }, [user]);
-
-  const handleSubmit = async () => {
-    try {
-      await updateUser.mutateAsync({
-        id,
-        data: { fullname: fullName, email },
-      });
-      toast.success('Data akun berhasil diperbarui');
-      navigate({ to: '/accounts' });
-    } catch (error) {
-      console.log(error);
-      toast.error('Data akun gagal diperbarui');
-    }
-  };
-
-  return (
-    <BackofficeWrapper title="Edit Data Akun">
-      <div className="mx-auto w-full max-w-2xl">
-        <Button
-          variant="text"
-          size="sm"
-          onClick={() => navigate({ to: '/accounts' })}
-          className="mb-4 -ml-2"
-        >
-          <ArrowLeft className="size-4" />
-          Kembali
-        </Button>
-        <Card>
-          <CardHeader>
-            <CardTitle>Edit Data Akun</CardTitle>
-          </CardHeader>
-          <CardContent>
-            {isLoading ? (
-              <div className="py-10 text-center text-sm text-muted-foreground">
-                Memuat data…
-              </div>
-            ) : (
-              <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="md"
-                />
-                <InputField
-                  label="Email"
-                  type="text"
-                  placeholder="Masukkan email"
-                  value={email}
-                  onChange={(e) => setEmail(e.target.value)}
-                  size="md"
-                />
-              </div>
-            )}
-          </CardContent>
-          <CardFooter className="justify-end gap-2">
-            <Button
-              variant="secondary"
-              size="md"
-              onClick={() => navigate({ to: '/accounts' })}
-            >
-              Batal
-            </Button>
-            <Button
-              variant="primary"
-              size="md"
-              onClick={handleSubmit}
-              disabled={updateUser.isPending || isLoading}
-            >
-              {updateUser.isPending ? 'Menyimpan…' : 'Perbarui Data'}
-            </Button>
-          </CardFooter>
-        </Card>
-      </div>
-    </BackofficeWrapper>
-  );
-}

apps/backoffice/src/routes/_authenticated/cms-events.tsx

@@ -1,250 +0,0 @@
-import { createFileRoute, useNavigate } from '@tanstack/react-router';
-import * as React from 'react';
-import { Search, Pencil, Trash2, Plus } from 'lucide-react';
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-  Badge,
-  Button,
-  Card,
-  CardContent,
-  CardHeader,
-  Checkbox,
-  Input,
-} from '@imphnen-frontend-service/ui/atoms';
-import {
-  DataTable,
-  BackofficeWrapper,
-} from '@imphnen-frontend-service/ui/organisms';
-import {
-  ColumnDef,
-  getCoreRowModel,
-  getPaginationRowModel,
-  PaginationState,
-  RowSelectionState,
-  useReactTable,
-} from '@tanstack/react-table';
-import {
-  useEventList,
-  useDeleteEvent,
-  TEventsListItem,
-} from '@imphnen-frontend-service/service';
-import { toast } from 'sonner';
-
-export const Route = createFileRoute('/_authenticated/cms-events')({
-  component: CmsEventsPage,
-});
-
-function CmsEventsPage() {
-  const navigate = useNavigate();
-  const [search, setSearch] = React.useState('');
-  const [deleteId, setDeleteId] = React.useState<string | null>(null);
-  const [pagination, setPagination] = React.useState<PaginationState>({
-    pageIndex: 0,
-    pageSize: 10,
-  });
-  const [rowSelection, setRowSelection] =
-    React.useState<RowSelectionState>({});
-
-  const { data: eventsData, isLoading } = useEventList({
-    search,
-    page: pagination.pageIndex + 1,
-    per_page: pagination.pageSize,
-  });
-  const deleteEvent = useDeleteEvent();
-
-  const events: TEventsListItem[] = eventsData?.data ?? [];
-  const totalItems = eventsData?.meta?.total ?? events.length;
-
-  const handleDelete = async (id: string) => {
-    try {
-      await deleteEvent.mutateAsync(id);
-      toast.success('Data event berhasil dihapus');
-      setDeleteId(null);
-    } catch (error) {
-      console.log(error);
-      toast.error('Data event gagal dihapus');
-    }
-  };
-
-  const columns: ColumnDef<TEventsListItem>[] = [
-    {
-      id: 'select',
-      header: ({ table }) => (
-        <Checkbox
-          checked={
-            table.getIsAllRowsSelected()
-              ? true
-              : table.getIsSomeRowsSelected()
-                ? 'indeterminate'
-                : false
-          }
-          onCheckedChange={(v) =>
-            table.toggleAllRowsSelected(!!v && v !== 'indeterminate')
-          }
-          aria-label="Select all"
-        />
-      ),
-      cell: ({ row }) => (
-        <Checkbox
-          checked={row.getIsSelected()}
-          onCheckedChange={(v) => row.toggleSelected(!!v)}
-          aria-label="Select row"
-        />
-      ),
-    },
-    { header: 'Name', accessorKey: 'name' },
-    {
-      header: 'Location',
-      accessorKey: 'location',
-      cell: ({ row }) => row.original.location || '-',
-    },
-    {
-      header: 'Price',
-      accessorKey: 'price',
-      cell: ({ row }) =>
-        row.original.price === 0
-          ? 'Free'
-          : `Rp ${row.original.price.toLocaleString('id-ID')}`,
-    },
-    {
-      header: 'Start Date',
-      accessorKey: 'start_date',
-      cell: ({ row }) =>
-        new Date(row.original.start_date).toLocaleDateString('id-ID', {
-          day: 'numeric',
-          month: 'short',
-          year: 'numeric',
-        }),
-    },
-    {
-      header: 'Online',
-      accessorKey: 'is_online',
-      cell: ({ row }) => (
-        <Badge variant={row.original.is_online ? 'success' : 'secondary'}>
-          {row.original.is_online ? 'Online' : 'Offline'}
-        </Badge>
-      ),
-    },
-    {
-      header: 'Action',
-      cell: ({ row }) => (
-        <div className="flex items-center gap-2">
-          <Button
-            variant="secondary"
-            size="sm"
-            onClick={(e) => {
-              e.stopPropagation();
-              navigate({
-                to: '/cms-events/$id',
-                params: { id: row.original.id },
-              });
-            }}
-          >
-            <Pencil className="size-3.5" />
-            Update
-          </Button>
-          <Button
-            variant="danger"
-            size="sm"
-            onClick={(e) => {
-              e.stopPropagation();
-              setDeleteId(row.original.id);
-            }}
-          >
-            <Trash2 className="size-3.5" />
-            Delete
-          </Button>
-        </div>
-      ),
-    },
-  ];
-
-  const table = useReactTable({
-    data: events,
-    columns,
-    state: { pagination, rowSelection },
-    enableRowSelection: true,
-    onRowSelectionChange: setRowSelection,
-    getCoreRowModel: getCoreRowModel(),
-    getPaginationRowModel: getPaginationRowModel(),
-    onPaginationChange: setPagination,
-    pageCount: Math.ceil(totalItems / pagination.pageSize),
-    manualPagination: true,
-  });
-
-  return (
-    <BackofficeWrapper title="CMS Events" description="Kelola event komunitas">
-      <Card>
-        <CardHeader>
-          <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
-            <div className="relative w-full sm:max-w-sm">
-              <Search className="absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
-              <Input
-                placeholder="Cari nama event…"
-                className="pl-9"
-                value={search}
-                onChange={(e) => setSearch(e.target.value)}
-              />
-            </div>
-            <Button
-              onClick={() => navigate({ to: '/cms-events/create' })}
-              size="md"
-            >
-              <Plus className="size-4" />
-              Tambah Event
-            </Button>
-          </div>
-        </CardHeader>
-        <CardContent>
-          {isLoading ? (
-            <div className="py-10 text-center text-sm text-muted-foreground">
-              Memuat data…
-            </div>
-          ) : (
-            <DataTable
-              data={events}
-              columns={columns}
-              table={table}
-              manualPagination
-              pageCount={Math.ceil(totalItems / pagination.pageSize)}
-              currentPage={pagination.pageIndex + 1}
-              onPageChange={(p) =>
-                setPagination((prev) => ({ ...prev, pageIndex: p - 1 }))
-              }
-            />
-          )}
-        </CardContent>
-      </Card>
-
-      <AlertDialog
-        open={!!deleteId}
-        onOpenChange={(o) => !o && setDeleteId(null)}
-      >
-        <AlertDialogContent>
-          <AlertDialogHeader>
-            <AlertDialogTitle>Hapus event ini?</AlertDialogTitle>
-            <AlertDialogDescription>
-              Tindakan ini tidak dapat dibatalkan. Event akan dihapus permanen.
-            </AlertDialogDescription>
-          </AlertDialogHeader>
-          <AlertDialogFooter>
-            <AlertDialogCancel>Batal</AlertDialogCancel>
-            <AlertDialogAction
-              onClick={() => deleteId && handleDelete(deleteId)}
-              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
-            >
-              Hapus
-            </AlertDialogAction>
-          </AlertDialogFooter>
-        </AlertDialogContent>
-      </AlertDialog>
-    </BackofficeWrapper>
-  );
-}

apps/backoffice/src/routes/_authenticated/cms-events_/$id.tsx

@@ -1,195 +0,0 @@
-import { createFileRoute, useNavigate } from '@tanstack/react-router'
-import { useEffect } from 'react'
-import { useForm } from 'react-hook-form'
-import { toast } from 'sonner'
-import { ArrowLeftOutlined } from '@ant-design/icons'
-import { Button } from '@imphnen-frontend-service/ui/atoms'
-import { ControlledInputField } from '@imphnen-frontend-service/ui/organisms'
-import {
-  useEventList,
-  useUpdateEvent,
-} from '@imphnen-frontend-service/service'
-
-export const Route = createFileRoute('/_authenticated/cms-events_/$id')({
-  component: CmsEventsEditPage,
-})
-
-function CmsEventsEditPage() {
-  const { id } = Route.useParams()
-  const navigate = useNavigate()
-  const updateEvent = useUpdateEvent()
-
-  const { data: eventsData, isLoading } = useEventList({ search: '', per_page: 100 })
-  const event = eventsData?.data?.find((e) => e.id === id)
-
-  const form = useForm<{
-    name: string
-    description: string
-    detail_link: string
-    location: string
-    price: number
-    start_date: string
-    end_date: string
-    is_online: boolean
-  }>({
-    mode: 'all',
-    defaultValues: {
-      name: '',
-      description: '',
-      detail_link: '',
-      location: '',
-      price: 0,
-      start_date: '',
-      end_date: '',
-      is_online: false,
-    },
-  })
-
-  useEffect(() => {
-    if (event) {
-      form.reset({
-        name: event.name,
-        description: event.description,
-        detail_link: event.detail_link,
-        location: event.location,
-        price: event.price,
-        start_date: event.start_date,
-        end_date: event.end_date,
-        is_online: event.is_online,
-      })
-    }
-  }, [event])
-
-  const onSubmit = form.handleSubmit(async (data) => {
-    try {
-      await updateEvent.mutateAsync({ id, data })
-      toast.success('Perubahan event berhasil dilakukan')
-      navigate({ to: '/cms-events' })
-    } catch (error) {
-      console.log(error)
-      toast.error('Perubahan event gagal dilakukan')
-    }
-  })
-
-  if (isLoading) {
-    return (
-      <main className="w-full px-[48px] py-[40px]">
-        <div className="text-center py-8 text-neutral-400">Loading...</div>
-      </main>
-    )
-  }
-
-  return (
-    <main className="w-full px-[48px] py-[40px] flex flex-col gap-8">
-      <div className="max-w-2xl mx-auto w-full">
-        <div className="flex items-center gap-3 mb-6">
-          <button
-            onClick={() => navigate({ to: '/cms-events' })}
-            className="text-primary-500 hover:text-primary-600"
-          >
-            <ArrowLeftOutlined className="text-[20px]" />
-          </button>
-          <h1 className="text-2xl font-bold text-gray-900">Edit Event</h1>
-        </div>
-
-        <div className="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
-          <form onSubmit={onSubmit} className="flex flex-col gap-6">
-            <ControlledInputField
-              control={form.control}
-              label="Nama Event"
-              name="name"
-              type="text"
-              placeholder="Masukkan Nama Event"
-              size="lg"
-              className="w-full"
-            />
-            <ControlledInputField
-              control={form.control}
-              label="Deskripsi"
-              name="description"
-              type="text"
-              placeholder="Masukkan Deskripsi Event"
-              size="lg"
-              className="w-full"
-            />
-            <ControlledInputField
-              control={form.control}
-              label="Link Detail"
-              name="detail_link"
-              type="text"
-              placeholder="Masukkan Link Detail"
-              size="lg"
-              className="w-full"
-            />
-            <ControlledInputField
-              control={form.control}
-              label="Lokasi"
-              name="location"
-              type="text"
-              placeholder="Masukkan Lokasi"
-              size="lg"
-              className="w-full"
-            />
-            <ControlledInputField
-              control={form.control}
-              label="Harga"
-              name="price"
-              type="number"
-              placeholder="Masukkan Harga"
-              size="lg"
-              className="w-full"
-            />
-            <ControlledInputField
-              control={form.control}
-              label="Tanggal Mulai"
-              name="start_date"
-              type="date"
-              placeholder="Pilih Tanggal Mulai"
-              size="lg"
-              className="w-full"
-            />
-            <ControlledInputField
-              control={form.control}
-              label="Tanggal Selesai"
-              name="end_date"
-              type="date"
-              placeholder="Pilih Tanggal Selesai"
-              size="lg"
-              className="w-full"
-            />
-            <div className="flex items-center gap-2">
-              <input
-                type="checkbox"
-                id="is_online_update"
-                className="rounded"
-                {...form.register('is_online')}
-              />
-              <label htmlFor="is_online_update" className="text-p3 font-medium text-neutral-800">
-                Event Online
-              </label>
-            </div>
-
-            <div className="flex gap-3 pt-4">
-              <Button
-                variant="primary"
-                size="lg"
-                className="w-full"
-                type="submit"
-              >
-                Update Event
-              </Button>
-              <Button
-                variant="bordered"
-                size="lg"
-                className="w-full"
-                onClick={() => navigate({ to: '/cms-events' })}
-              >
-                Batal
-              </Button>
-            </div>
-          </form>
-        </div>
-      </div>
-    </main>
-  )
-}

apps/backoffice/src/routes/_authenticated/cms-events_/create.tsx

@@ -1,164 +0,0 @@
-import { createFileRoute, useNavigate } from '@tanstack/react-router'
-import { useForm } from 'react-hook-form'
-import { toast } from 'sonner'
-import { ArrowLeftOutlined } from '@ant-design/icons'
-import { Button } from '@imphnen-frontend-service/ui/atoms'
-import { ControlledInputField } from '@imphnen-frontend-service/ui/organisms'
-import { useCreateEvent } from '@imphnen-frontend-service/service'
-
-export const Route = createFileRoute('/_authenticated/cms-events_/create')({
-  component: CmsEventsCreatePage,
-})
-
-function CmsEventsCreatePage() {
-  const navigate = useNavigate()
-  const createEvent = useCreateEvent()
-
-  const form = useForm<{
-    name: string
-    description: string
-    detail_link: string
-    location: string
-    price: number
-    start_date: string
-    end_date: string
-    is_online: boolean
-  }>({
-    mode: 'all',
-    defaultValues: {
-      name: '',
-      description: '',
-      detail_link: '',
-      location: '',
-      price: 0,
-      start_date: '',
-      end_date: '',
-      is_online: false,
-    },
-  })
-
-  const onSubmit = form.handleSubmit(async (data) => {
-    try {
-      await createEvent.mutateAsync(data)
-      toast.success('Data event berhasil ditambahkan')
-      navigate({ to: '/cms-events' })
-    } catch (error) {
-      console.log(error)
-      toast.error('Data event gagal ditambahkan')
-    }
-  })
-
-  return (
-    <main className="w-full px-[48px] py-[40px] flex flex-col gap-8">
-      <div className="max-w-2xl mx-auto w-full">
-        <div className="flex items-center gap-3 mb-6">
-          <button
-            onClick={() => navigate({ to: '/cms-events' })}
-            className="text-primary-500 hover:text-primary-600"
-          >
-            <ArrowLeftOutlined className="text-[20px]" />
-          </button>
-          <h1 className="text-2xl font-bold text-gray-900">Tambah Event</h1>
-        </div>
-
-        <div className="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
-          <form onSubmit={onSubmit} className="flex flex-col gap-6">
-            <ControlledInputField
-              control={form.control}
-              label="Nama Event"
-              name="name"
-              type="text"
-              placeholder="Masukkan Nama Event"
-              size="lg"
-              className="w-full"
-            />
-            <ControlledInputField
-              control={form.control}
-              label="Deskripsi"
-              name="description"
-              type="text"
-              placeholder="Masukkan Deskripsi Event"
-              size="lg"
-              className="w-full"
-            />
-            <ControlledInputField
-              control={form.control}
-              label="Link Detail"
-              name="detail_link"
-              type="text"
-              placeholder="Masukkan Link Detail"
-              size="lg"
-              className="w-full"
-            />
-            <ControlledInputField
-              control={form.control}
-              label="Lokasi"
-              name="location"
-              type="text"
-              placeholder="Masukkan Lokasi"
-              size="lg"
-              className="w-full"
-            />
-            <ControlledInputField
-              control={form.control}
-              label="Harga"
-              name="price"
-              type="number"
-              placeholder="Masukkan Harga"
-              size="lg"
-              className="w-full"
-            />
-            <ControlledInputField
-              control={form.control}
-              label="Tanggal Mulai"
-              name="start_date"
-              type="date"
-              placeholder="Pilih Tanggal Mulai"
-              size="lg"
-              className="w-full"
-            />
-            <ControlledInputField
-              control={form.control}
-              label="Tanggal Selesai"
-              name="end_date"
-              type="date"
-              placeholder="Pilih Tanggal Selesai"
-              size="lg"
-              className="w-full"
-            />
-            <div className="flex items-center gap-2">
-              <input
-                type="checkbox"
-                id="is_online"
-                className="rounded"
-                {...form.register('is_online')}
-              />
-              <label htmlFor="is_online" className="text-p3 font-medium text-neutral-800">
-                Event Online
-              </label>
-            </div>
-
-            <div className="flex gap-3 pt-4">
-              <Button
-                variant="primary"
-                size="lg"
-                className="w-full"
-                type="submit"
-              >
-                Tambah Event
-              </Button>
-              <Button
-                variant="bordered"
-                size="lg"
-                className="w-full"
-                onClick={() => navigate({ to: '/cms-events' })}
-              >
-                Batal
-              </Button>
-            </div>
-          </form>
-        </div>
-      </div>
-    </main>
-  )
-}

apps/backoffice/src/routes/_authenticated/cms-testimonials.tsx

@@ -1,240 +0,0 @@
-import { createFileRoute, useNavigate } from '@tanstack/react-router';
-import * as React from 'react';
-import { Search, Pencil, Trash2, Plus } from 'lucide-react';
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-  Button,
-  Card,
-  CardContent,
-  CardHeader,
-  Checkbox,
-  Input,
-} from '@imphnen-frontend-service/ui/atoms';
-import {
-  DataTable,
-  BackofficeWrapper,
-} from '@imphnen-frontend-service/ui/organisms';
-import {
-  ColumnDef,
-  getCoreRowModel,
-  getPaginationRowModel,
-  PaginationState,
-  RowSelectionState,
-  useReactTable,
-} from '@tanstack/react-table';
-import {
-  useTestimonialList,
-  useDeleteTestimonial,
-  TTestimonialsListItem,
-} from '@imphnen-frontend-service/service';
-import { toast } from 'sonner';
-
-export const Route = createFileRoute('/_authenticated/cms-testimonials')({
-  component: CmsTestimonialsPage,
-});
-
-function CmsTestimonialsPage() {
-  const navigate = useNavigate();
-  const [search, setSearch] = React.useState('');
-  const [deleteId, setDeleteId] = React.useState<string | null>(null);
-  const [pagination, setPagination] = React.useState<PaginationState>({
-    pageIndex: 0,
-    pageSize: 10,
-  });
-  const [rowSelection, setRowSelection] =
-    React.useState<RowSelectionState>({});
-
-  const { data: testimonialsData, isLoading } = useTestimonialList({
-    search,
-    page: pagination.pageIndex + 1,
-    per_page: pagination.pageSize,
-  });
-  const deleteTestimonial = useDeleteTestimonial();
-
-  const testimonials: TTestimonialsListItem[] = testimonialsData?.data ?? [];
-  const totalItems = testimonialsData?.meta?.total ?? testimonials.length;
-
-  const handleDelete = async (id: string) => {
-    try {
-      await deleteTestimonial.mutateAsync(id);
-      toast.success('Data testimonial berhasil dihapus');
-      setDeleteId(null);
-    } catch (error) {
-      console.log(error);
-      toast.error('Data testimonial gagal dihapus');
-    }
-  };
-
-  const columns: ColumnDef<TTestimonialsListItem>[] = [
-    {
-      id: 'select',
-      header: ({ table }) => (
-        <Checkbox
-          checked={
-            table.getIsAllRowsSelected()
-              ? true
-              : table.getIsSomeRowsSelected()
-                ? 'indeterminate'
-                : false
-          }
-          onCheckedChange={(v) =>
-            table.toggleAllRowsSelected(!!v && v !== 'indeterminate')
-          }
-        />
-      ),
-      cell: ({ row }) => (
-        <Checkbox
-          checked={row.getIsSelected()}
-          onCheckedChange={(v) => row.toggleSelected(!!v)}
-        />
-      ),
-    },
-    { header: 'User', accessorKey: 'user_fullname' },
-    { header: 'Role', accessorKey: 'role' },
-    {
-      header: 'Content',
-      accessorKey: 'content',
-      cell: ({ row }) => {
-        const content = row.original.content;
-        return content.length > 80
-          ? `${content.substring(0, 80)}…`
-          : content;
-      },
-    },
-    {
-      header: 'Created At',
-      accessorKey: 'created_at',
-      cell: ({ row }) =>
-        new Date(row.original.created_at).toLocaleDateString('id-ID', {
-          day: 'numeric',
-          month: 'short',
-          year: 'numeric',
-        }),
-    },
-    {
-      header: 'Action',
-      cell: ({ row }) => (
-        <div className="flex items-center gap-2">
-          <Button
-            variant="secondary"
-            size="sm"
-            onClick={(e) => {
-              e.stopPropagation();
-              navigate({
-                to: '/cms-testimonials/$id',
-                params: { id: row.original.id },
-              });
-            }}
-          >
-            <Pencil className="size-3.5" />
-            Update
-          </Button>
-          <Button
-            variant="danger"
-            size="sm"
-            onClick={(e) => {
-              e.stopPropagation();
-              setDeleteId(row.original.id);
-            }}
-          >
-            <Trash2 className="size-3.5" />
-            Delete
-          </Button>
-        </div>
-      ),
-    },
-  ];
-
-  const table = useReactTable({
-    data: testimonials,
-    columns,
-    state: { pagination, rowSelection },
-    enableRowSelection: true,
-    onRowSelectionChange: setRowSelection,
-    getCoreRowModel: getCoreRowModel(),
-    getPaginationRowModel: getPaginationRowModel(),
-    onPaginationChange: setPagination,
-    pageCount: Math.ceil(totalItems / pagination.pageSize),
-    manualPagination: true,
-  });
-
-  return (
-    <BackofficeWrapper
-      title="CMS Testimonials"
-      description="Kelola testimonial pengguna"
-    >
-      <Card>
-        <CardHeader>
-          <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
-            <div className="relative w-full sm:max-w-sm">
-              <Search className="absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
-              <Input
-                placeholder="Cari nama user…"
-                className="pl-9"
-                value={search}
-                onChange={(e) => setSearch(e.target.value)}
-              />
-            </div>
-            <Button
-              onClick={() => navigate({ to: '/cms-testimonials/create' })}
-              size="md"
-            >
-              <Plus className="size-4" />
-              Tambah Testimonial
-            </Button>
-          </div>
-        </CardHeader>
-        <CardContent>
-          {isLoading ? (
-            <div className="py-10 text-center text-sm text-muted-foreground">
-              Memuat data…
-            </div>
-          ) : (
-            <DataTable
-              data={testimonials}
-              columns={columns}
-              table={table}
-              manualPagination
-              pageCount={Math.ceil(totalItems / pagination.pageSize)}
-              currentPage={pagination.pageIndex + 1}
-              onPageChange={(p) =>
-                setPagination((prev) => ({ ...prev, pageIndex: p - 1 }))
-              }
-            />
-          )}
-        </CardContent>
-      </Card>
-
-      <AlertDialog
-        open={!!deleteId}
-        onOpenChange={(o) => !o && setDeleteId(null)}
-      >
-        <AlertDialogContent>
-          <AlertDialogHeader>
-            <AlertDialogTitle>Hapus testimonial ini?</AlertDialogTitle>
-            <AlertDialogDescription>
-              Tindakan ini tidak dapat dibatalkan. Testimonial akan dihapus
-              permanen.
-            </AlertDialogDescription>
-          </AlertDialogHeader>
-          <AlertDialogFooter>
-            <AlertDialogCancel>Batal</AlertDialogCancel>
-            <AlertDialogAction
-              onClick={() => deleteId && handleDelete(deleteId)}
-              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
-            >
-              Hapus
-            </AlertDialogAction>
-          </AlertDialogFooter>
-        </AlertDialogContent>
-      </AlertDialog>
-    </BackofficeWrapper>
-  );
-}

apps/backoffice/src/routes/_authenticated/cms-testimonials_/$id.tsx

@@ -1,115 +0,0 @@
-import { createFileRoute, useNavigate } from '@tanstack/react-router'
-import { useEffect } from 'react'
-import { useForm } from 'react-hook-form'
-import { toast } from 'sonner'
-import { ArrowLeftOutlined } from '@ant-design/icons'
-import { Button } from '@imphnen-frontend-service/ui/atoms'
-import { ControlledInputField } from '@imphnen-frontend-service/ui/organisms'
-import {
-  useTestimonialList,
-  useUpdateTestimonial,
-} from '@imphnen-frontend-service/service'
-
-export const Route = createFileRoute('/_authenticated/cms-testimonials_/$id')({
-  component: CmsTestimonialsEditPage,
-})
-
-function CmsTestimonialsEditPage() {
-  const { id } = Route.useParams()
-  const navigate = useNavigate()
-  const updateTestimonial = useUpdateTestimonial()
-
-  const { data: testimonialsData, isLoading } = useTestimonialList({ search: '', per_page: 100 })
-  const testimonial = testimonialsData?.data?.find((t) => t.id === id)
-
-  const form = useForm<{ role: string; content: string }>({
-    mode: 'all',
-    defaultValues: { role: '', content: '' },
-  })
-
-  useEffect(() => {
-    if (testimonial) {
-      form.reset({
-        role: testimonial.role,
-        content: testimonial.content,
-      })
-    }
-  }, [testimonial])
-
-  const onSubmit = form.handleSubmit(async (data) => {
-    try {
-      await updateTestimonial.mutateAsync({ id, data })
-      toast.success('Perubahan testimonial berhasil dilakukan')
-      navigate({ to: '/cms-testimonials' })
-    } catch (error) {
-      console.log(error)
-      toast.error('Perubahan testimonial gagal dilakukan')
-    }
-  })
-
-  if (isLoading) {
-    return (
-      <main className="w-full px-[48px] py-[40px]">
-        <div className="text-center py-8 text-neutral-400">Loading...</div>
-      </main>
-    )
-  }
-
-  return (
-    <main className="w-full px-[48px] py-[40px] flex flex-col gap-8">
-      <div className="max-w-2xl mx-auto w-full">
-        <div className="flex items-center gap-3 mb-6">
-          <button
-            onClick={() => navigate({ to: '/cms-testimonials' })}
-            className="text-primary-500 hover:text-primary-600"
-          >
-            <ArrowLeftOutlined className="text-[20px]" />
-          </button>
-          <h1 className="text-2xl font-bold text-gray-900">Edit Testimonial</h1>
-        </div>
-
-        <div className="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
-          <form onSubmit={onSubmit} className="flex flex-col gap-6">
-            <ControlledInputField
-              control={form.control}
-              label="Role"
-              name="role"
-              type="text"
-              placeholder="Masukkan Role"
-              size="lg"
-              className="w-full"
-            />
-            <ControlledInputField
-              control={form.control}
-              label="Konten Testimonial"
-              name="content"
-              type="text"
-              placeholder="Masukkan Konten Testimonial"
-              size="lg"
-              className="w-full"
-            />
-
-            <div className="flex gap-3 pt-4">
-              <Button
-                variant="primary"
-                size="lg"
-                className="w-full"
-                type="submit"
-              >
-                Update Testimonial
-              </Button>
-              <Button
-                variant="bordered"
-                size="lg"
-                className="w-full"
-                onClick={() => navigate({ to: '/cms-testimonials' })}
-              >
-                Batal
-              </Button>
-            </div>
-          </form>
-        </div>
-      </div>
-    </main>
-  )
-}

apps/backoffice/src/routes/_authenticated/cms-testimonials_/create.tsx

@@ -1,90 +0,0 @@
-import { createFileRoute, useNavigate } from '@tanstack/react-router'
-import { useForm } from 'react-hook-form'
-import { toast } from 'sonner'
-import { ArrowLeftOutlined } from '@ant-design/icons'
-import { Button } from '@imphnen-frontend-service/ui/atoms'
-import { ControlledInputField } from '@imphnen-frontend-service/ui/organisms'
-import { useCreateTestimonial } from '@imphnen-frontend-service/service'
-
-export const Route = createFileRoute('/_authenticated/cms-testimonials_/create')({
-  component: CmsTestimonialsCreatePage,
-})
-
-function CmsTestimonialsCreatePage() {
-  const navigate = useNavigate()
-  const createTestimonial = useCreateTestimonial()
-
-  const form = useForm<{ role: string; content: string }>({
-    mode: 'all',
-    defaultValues: { role: '', content: '' },
-  })
-
-  const onSubmit = form.handleSubmit(async (data) => {
-    try {
-      await createTestimonial.mutateAsync(data)
-      toast.success('Data testimonial berhasil ditambahkan')
-      navigate({ to: '/cms-testimonials' })
-    } catch (error) {
-      console.log(error)
-      toast.error('Data testimonial gagal ditambahkan')
-    }
-  })
-
-  return (
-    <main className="w-full px-[48px] py-[40px] flex flex-col gap-8">
-      <div className="max-w-2xl mx-auto w-full">
-        <div className="flex items-center gap-3 mb-6">
-          <button
-            onClick={() => navigate({ to: '/cms-testimonials' })}
-            className="text-primary-500 hover:text-primary-600"
-          >
-            <ArrowLeftOutlined className="text-[20px]" />
-          </button>
-          <h1 className="text-2xl font-bold text-gray-900">Tambah Testimonial</h1>
-        </div>
-
-        <div className="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
-          <form onSubmit={onSubmit} className="flex flex-col gap-6">
-            <ControlledInputField
-              control={form.control}
-              label="Role"
-              name="role"
-              type="text"
-              placeholder="Masukkan Role (e.g. Software Engineer)"
-              size="lg"
-              className="w-full"
-            />
-            <ControlledInputField
-              control={form.control}
-              label="Konten Testimonial"
-              name="content"
-              type="text"
-              placeholder="Masukkan Konten Testimonial"
-              size="lg"
-              className="w-full"
-            />
-
-            <div className="flex gap-3 pt-4">
-              <Button
-                variant="primary"
-                size="lg"
-                className="w-full"
-                type="submit"
-              >
-                Tambah Testimonial
-              </Button>
-              <Button
-                variant="bordered"
-                size="lg"
-                className="w-full"
-                onClick={() => navigate({ to: '/cms-testimonials' })}
-              >
-                Batal
-              </Button>
-            </div>
-          </form>
-        </div>
-      </div>
-    </main>
-  )
-}

apps/backoffice/src/routes/_authenticated/dashboard-dimentorin.tsx

@@ -1,212 +0,0 @@
-import { createFileRoute } from '@tanstack/react-router';
-import * as React from 'react';
-import { Users, UserCog, CalendarClock, Activity, CircleCheck } from 'lucide-react';
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from '@imphnen-frontend-service/ui/atoms';
-import { BackofficeWrapper } from '@imphnen-frontend-service/ui/organisms';
-import { UserGrowthChart } from './_components/dashboard-dimentorin/chart/user-growth';
-import { SessionStatusChart } from './_components/dashboard-dimentorin/chart/session-status';
-import {
-  useMentorList,
-  useUserList,
-  useMySessions,
-} from '@imphnen-frontend-service/service';
-
-export const Route = createFileRoute('/_authenticated/dashboard-dimentorin')({
-  component: DashboardDimentorinPage,
-});
-
-type StatCardProps = {
-  icon: React.ComponentType<{ className?: string }>;
-  label: string;
-  value: React.ReactNode;
-};
-
-function StatCard({ icon: Icon, label, value }: StatCardProps) {
-  return (
-    <Card>
-      <CardContent className="flex items-center gap-4 pt-6">
-        <div className="grid size-11 shrink-0 place-items-center rounded-md bg-primary-100 text-primary-600">
-          <Icon className="size-5" />
-        </div>
-        <div className="flex flex-col">
-          <span className="text-2xl font-semibold leading-tight text-foreground">
-            {value}
-          </span>
-          <span className="text-xs text-muted-foreground">{label}</span>
-        </div>
-      </CardContent>
-    </Card>
-  );
-}
-
-function DashboardDimentorinPage() {
-  const { data: mentorData } = useMentorList({
-    per_page: 5,
-    sort_by: 'rating',
-    order: 'desc',
-  });
-  const { data: userData } = useUserList({ per_page: 1 });
-  const { data: sessionsData } = useMySessions();
-
-  const totalMentors = mentorData?.meta?.total ?? 0;
-  const totalUsers = userData?.meta?.total ?? 0;
-  const totalSessions = sessionsData?.total ?? 0;
-  const topMentors = mentorData?.data ?? [];
-  const activeMentors = topMentors.filter((m) => m.status === 'active').length;
-  const completedSessions =
-    sessionsData?.sessions?.filter((s) => s.status === 'completed').length ?? 0;
-
-  const topTopics = React.useMemo(() => {
-    const sessions = sessionsData?.sessions ?? [];
-    const topicCount: Record<string, number> = {};
-    sessions.forEach((s) => {
-      topicCount[s.topic] = (topicCount[s.topic] ?? 0) + 1;
-    });
-    return Object.entries(topicCount)
-      .sort(([, a], [, b]) => b - a)
-      .slice(0, 5);
-  }, [sessionsData]);
-
-  return (
-    <BackofficeWrapper
-      title="Dimentorin Overview"
-      description="Ringkasan metrik platform mentoring"
-    >
-      <section className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-5">
-        <StatCard icon={Users} label="Total Users" value={totalUsers} />
-        <StatCard icon={UserCog} label="Total Mentors" value={totalMentors} />
-        <StatCard
-          icon={CalendarClock}
-          label="Total Sessions"
-          value={totalSessions}
-        />
-        <StatCard
-          icon={Activity}
-          label="Active Mentors"
-          value={activeMentors}
-        />
-        <StatCard
-          icon={CircleCheck}
-          label="Completed Sessions"
-          value={completedSessions}
-        />
-      </section>
-
-      <section className="grid grid-cols-1 gap-4 lg:grid-cols-7">
-        <Card className="lg:col-span-5">
-          <CardHeader>
-            <CardTitle>User Growth</CardTitle>
-            <CardDescription>Pertumbuhan user dari waktu ke waktu</CardDescription>
-          </CardHeader>
-          <CardContent>
-            <UserGrowthChart />
-          </CardContent>
-        </Card>
-        <Card className="lg:col-span-2">
-          <CardHeader>
-            <CardTitle>Session Status</CardTitle>
-            <CardDescription>Distribusi status sesi</CardDescription>
-          </CardHeader>
-          <CardContent>
-            <SessionStatusChart />
-          </CardContent>
-        </Card>
-      </section>
-
-      <section className="grid grid-cols-1 gap-4 lg:grid-cols-2">
-        <Card>
-          <CardHeader>
-            <CardTitle>Top 5 Mentors</CardTitle>
-            <CardDescription>Mentor dengan rating tertinggi</CardDescription>
-          </CardHeader>
-          <CardContent>
-            <div className="rounded-md border border-neutral-200">
-              <Table>
-                <TableHeader>
-                  <TableRow className="hover:bg-transparent">
-                    <TableHead className="w-[10%]">No.</TableHead>
-                    <TableHead>Nama Lengkap</TableHead>
-                    <TableHead>Avg Rating</TableHead>
-                  </TableRow>
-                </TableHeader>
-                <TableBody>
-                  {topMentors.length === 0 ? (
-                    <TableRow className="hover:bg-transparent">
-                      <TableCell
-                        colSpan={3}
-                        className="py-6 text-center text-sm text-muted-foreground"
-                      >
-                        Belum ada data
-                      </TableCell>
-                    </TableRow>
-                  ) : (
-                    topMentors.slice(0, 5).map((mentor, index) => (
-                      <TableRow key={mentor.id}>
-                        <TableCell>{index + 1}</TableCell>
-                        <TableCell>{mentor.fullname ?? '-'}</TableCell>
-                        <TableCell>
-                          {mentor.rating?.toFixed(1) ?? '-'}
-                        </TableCell>
-                      </TableRow>
-                    ))
-                  )}
-                </TableBody>
-              </Table>
-            </div>
-          </CardContent>
-        </Card>
-        <Card>
-          <CardHeader>
-            <CardTitle>Top Booked Topics</CardTitle>
-            <CardDescription>Topik mentoring paling banyak dibooking</CardDescription>
-          </CardHeader>
-          <CardContent>
-            <div className="rounded-md border border-neutral-200">
-              <Table>
-                <TableHeader>
-                  <TableRow className="hover:bg-transparent">
-                    <TableHead className="w-[10%]">No.</TableHead>
-                    <TableHead>Topik</TableHead>
-                    <TableHead>Total Sesi</TableHead>
-                  </TableRow>
-                </TableHeader>
-                <TableBody>
-                  {topTopics.length === 0 ? (
-                    <TableRow className="hover:bg-transparent">
-                      <TableCell
-                        colSpan={3}
-                        className="py-6 text-center text-sm text-muted-foreground"
-                      >
-                        Belum ada data
-                      </TableCell>
-                    </TableRow>
-                  ) : (
-                    topTopics.map(([topic, count], index) => (
-                      <TableRow key={topic}>
-                        <TableCell>{index + 1}</TableCell>
-                        <TableCell>{topic}</TableCell>
-                        <TableCell>{count}</TableCell>
-                      </TableRow>
-                    ))
-                  )}
-                </TableBody>
-              </Table>
-            </div>
-          </CardContent>
-        </Card>
-      </section>
-    </BackofficeWrapper>
-  );
-}

apps/backoffice/src/routes/_authenticated/dashboard.tsx

@@ -1,185 +0,0 @@
-import { createFileRoute, useNavigate } from '@tanstack/react-router';
-import * as React from 'react';
-import {
-  Plus,
-  UsersRound,
-  UserMinus,
-  UserCog,
-  RefreshCcw,
-  Pencil,
-  Trash2,
-  MoreHorizontal,
-} from 'lucide-react';
-import {
-  Button,
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from '@imphnen-frontend-service/ui/atoms';
-import { BackofficeWrapper } from '@imphnen-frontend-service/ui/organisms';
-import {
-  useUserList,
-  useGachaItemList,
-  useDeleteGachaItem,
-  TGachaItemDto,
-} from '@imphnen-frontend-service/service';
-import { toast } from 'sonner';
-import { DeleteConfirmDialog } from '../../components/list-helpers';
-
-export const Route = createFileRoute('/_authenticated/dashboard')({
-  component: DashboardPage,
-});
-
-type StatCardProps = {
-  icon: React.ComponentType<{ className?: string }>;
-  label: string;
-  value: React.ReactNode;
-};
-
-function StatCard({ icon: Icon, label, value }: StatCardProps) {
-  return (
-    <Card>
-      <CardContent className="flex items-center gap-4 pt-6">
-        <div className="grid size-11 shrink-0 place-items-center rounded-md bg-primary-100 text-primary-600">
-          <Icon className="size-5" />
-        </div>
-        <div className="flex flex-col">
-          <span className="text-2xl font-semibold leading-tight text-foreground">
-            {value}
-          </span>
-          <span className="text-xs text-muted-foreground">{label}</span>
-        </div>
-      </CardContent>
-    </Card>
-  );
-}
-
-function DashboardPage() {
-  const navigate = useNavigate();
-  const [deleteId, setDeleteId] = React.useState<string | null>(null);
-
-  const { data: usersData } = useUserList({ per_page: 1 });
-  const { data: gachaItemsData } = useGachaItemList({ per_page: 9 });
-  const deleteItem = useDeleteGachaItem();
-
-  const totalUsers = usersData?.meta?.total ?? 0;
-  const gachaItems: TGachaItemDto[] = gachaItemsData?.data ?? [];
-
-  const handleDelete = async (id: string) => {
-    try {
-      await deleteItem.mutateAsync(id);
-      toast.success('Item berhasil dihapus');
-      setDeleteId(null);
-    } catch (error) {
-      console.log(error);
-      toast.error('Item gagal dihapus');
-    }
-  };
-
-  return (
-    <BackofficeWrapper
-      title="Gacha Dashboard"
-      description="Ringkasan statistik & daftar item gacha"
-    >
-      <section className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
-        <StatCard
-          icon={UsersRound}
-          label="Participants"
-          value={totalUsers.toLocaleString('id-ID')}
-        />
-        <StatCard
-          icon={RefreshCcw}
-          label="Gacha Items"
-          value={(gachaItemsData?.meta?.total ?? 0).toLocaleString('id-ID')}
-        />
-        <StatCard icon={UserCog} label="Redeem" value="—" />
-        <StatCard icon={UserMinus} label="Inactive Users" value="—" />
-      </section>
-
-      <Card>
-        <CardHeader>
-          <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
-            <div>
-              <CardTitle>Gacha Items</CardTitle>
-              <CardDescription>
-                Daftar item yang tersedia di gacha
-              </CardDescription>
-            </div>
-            <Button
-              size="md"
-              onClick={() => navigate({ to: '/dashboard/create' })}
-            >
-              <Plus className="size-4" />
-              Tambah Item
-            </Button>
-          </div>
-        </CardHeader>
-        <CardContent>
-          {gachaItems.length === 0 ? (
-            <p className="py-8 text-center text-sm text-muted-foreground">
-              Belum ada item gacha.
-            </p>
-          ) : (
-            <ul className="grid grid-cols-1 gap-3 md:grid-cols-2 xl:grid-cols-3">
-              {gachaItems.map((item) => (
-                <li
-                  key={item.id}
-                  className="flex items-start justify-between gap-3 rounded-md border border-neutral-200 p-4 transition-colors hover:border-primary-200 hover:bg-primary-50/40"
-                >
-                  <div className="min-w-0 flex-1">
-                    <h3 className="truncate text-sm font-semibold text-primary-700">
-                      {item.name}
-                    </h3>
-                    <p className="mt-0.5 font-mono text-xs text-muted-foreground">
-                      {item.id}
-                    </p>
-                  </div>
-                  <DropdownMenu>
-                    <DropdownMenuTrigger asChild>
-                      <Button variant="text" size="icon" aria-label="Actions">
-                        <MoreHorizontal className="size-4" />
-                      </Button>
-                    </DropdownMenuTrigger>
-                    <DropdownMenuContent align="end">
-                      <DropdownMenuItem
-                        onSelect={() =>
-                          navigate({
-                            to: '/dashboard/$id',
-                            params: { id: item.id },
-                          })
-                        }
-                      >
-                        <Pencil />
-                        <span>Edit</span>
-                      </DropdownMenuItem>
-                      <DropdownMenuItem
-                        variant="destructive"
-                        onSelect={() => setDeleteId(item.id)}
-                      >
-                        <Trash2 />
-                        <span>Hapus</span>
-                      </DropdownMenuItem>
-                    </DropdownMenuContent>
-                  </DropdownMenu>
-                </li>
-              ))}
-            </ul>
-          )}
-        </CardContent>
-      </Card>
-
-      <DeleteConfirmDialog
-        open={!!deleteId}
-        onOpenChange={(o) => !o && setDeleteId(null)}
-        onConfirm={() => deleteId && handleDelete(deleteId)}
-        title="Hapus item gacha ini?"
-      />
-    </BackofficeWrapper>
-  );
-}