Refactor code structure for improved readability and maintainability

.direnv/bin/nix-direnv-reload

@@ -1,19 +0,0 @@
-#!/usr/bin/env bash
-set -e
-if [[ ! -d "/Users/ms/Development/personal/imphnen-frontend-service" ]]; then
-  echo "Cannot find source directory; Did you move it?"
-  echo "(Looking for "/Users/ms/Development/personal/imphnen-frontend-service")"
-  echo 'Cannot force reload with this script - use "direnv reload" manually and then try again'
-  exit 1
-fi
-
-# rebuild the cache forcefully
-_nix_direnv_force_reload=1 direnv exec "/Users/ms/Development/personal/imphnen-frontend-service" true
-
-# Update the mtime for .envrc.
-# This will cause direnv to reload again - but without re-building.
-touch "/Users/ms/Development/personal/imphnen-frontend-service/.envrc"
-
-# Also update the timestamp of whatever profile_rc we have.
-# This makes sure that we know we are up to date.
-touch -r "/Users/ms/Development/personal/imphnen-frontend-service/.envrc" "/Users/ms/Development/personal/imphnen-frontend-service/.direnv"/*.rc

.direnv/flake-inputs/01x5k4nlxcpyd85nnr0b9gm89rm8ff4x-source

@@ -1 +0,0 @@
-/nix/store/01x5k4nlxcpyd85nnr0b9gm89rm8ff4x-source

.direnv/flake-inputs/8hx8jwa24q6rkzhca9iqy5ckk9rbphi1-source

@@ -1 +0,0 @@
-/nix/store/8hx8jwa24q6rkzhca9iqy5ckk9rbphi1-source

.direnv/flake-inputs/jizz7ld5r2w11y03wrmnvwsskc45krj9-source

@@ -1 +0,0 @@
-/nix/store/jizz7ld5r2w11y03wrmnvwsskc45krj9-source

.direnv/flake-inputs/yj1wxm9hh8610iyzqnz75kvs6xl8j3my-source

@@ -1 +0,0 @@
-/nix/store/yj1wxm9hh8610iyzqnz75kvs6xl8j3my-source

.direnv/flake-profile-a5d5b61aa8a61b7d9d765e1daf971a9a578f1cfa

@@ -1 +0,0 @@
-/nix/store/y4p9szcab9xd7v1c7k9ghr86hb6myyg4-nix-shell-env

.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,40 +0,0 @@
-name: Nix Build & Cache
-
-on:
-  push:
-    branches: ['develop']
-  pull_request:
-    branches: ['develop']
-
-jobs:
-  build:
-    runs-on: ubuntu-latest
-    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 all packages
-        run: |
-          nix build .#landing -o result-landing
-          nix build .#backoffice -o result-backoffice
-          nix build .#gacha -o result-gacha
-          nix build .#dimentorin -o result-dimentorin
-          nix build .#hackathon -o result-hackathon
-          nix build .#infra -o result-infra
-
-      - name: Show build outputs
-        run: |
-          echo "Landing: $(readlink result-landing)"
-          echo "Backoffice: $(readlink result-backoffice)"
-          echo "Gacha: $(readlink result-gacha)"
-          echo "Dimentorin: $(readlink result-dimentorin)"
-          echo "Hackathon: $(readlink result-hackathon)"
-          echo "Infra: $(readlink result-infra)"

README.md

@@ -10,7 +10,6 @@ This repository is a **monorepo** for all frontend services of IMPHNEN. The mono
 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>.
-5. **QR Campaign** - Application for QR Campaign Management.
 
 ## How to install
 
@@ -55,10 +54,6 @@ Use the following commands to run in development mode:
   ```sh
   npm run landing:dev
   ```
-- **QR Campaign**:
-  ```sh
-  npm run qrcampaign:dev
-  ```
 
 ### Build
 
@@ -80,10 +75,6 @@ Use the following commands to build the applications:
   ```sh
   npm run landing:build
   ```
-- **QR Campaign**:
-  ```sh
-  npm run qrcampaign:build
-  ```
 
 ### Production
 
@@ -105,10 +96,6 @@ Use the following commands to run the applications in production mode:
   ```sh
   npm run landing:prod
   ```
-- **QR Campaign**:
-  ```sh
-  npm run qrcampaign:prod
-  ```
 
 ### Storybook
 

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>

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

@@ -1,35 +1,7 @@
 import { BackofficeWrapper } from '@imphnen-frontend-service/ui/organisms';
 import { FC, ReactElement } from 'react';
-import { useQuery } from '@tanstack/react-query';
-import {
-  getAdminUsers,
-  getAdminTeams,
-  getAdminSubmissions,
-} from '@imphnen-frontend-service/service';
 
 export const HackathonDashboardPage: FC = (): ReactElement => {
-  // Fetch total participants
-  const { data: usersData } = useQuery({
-    queryKey: ['admin-users-count'],
-    queryFn: () => getAdminUsers({ page: 1, per_page: 1 }),
-  });
-
-  // Fetch total teams
-  const { data: teamsData } = useQuery({
-    queryKey: ['admin-teams-count'],
-    queryFn: () => getAdminTeams({ page: 1, per_page: 1 }),
-  });
-
-  // Fetch total submissions
-  const { data: submissionsData } = useQuery({
-    queryKey: ['admin-submissions-count'],
-    queryFn: () => getAdminSubmissions({ page: 1, per_page: 1 }),
-  });
-
-  const totalParticipants = usersData?.meta?.total_data ?? '??';
-  const totalTeams = teamsData?.meta?.total_data ?? '??';
-  const totalSubmissions = submissionsData?.meta?.total_data ?? '??';
-
   return (
     <BackofficeWrapper title="IMPHNEN x Kolosal.ai Hackathon 2025">
       <h1 className="mb-8 text-p1 font-semibold text-neutral-700">Dashboard</h1>
@@ -38,22 +10,18 @@ export const HackathonDashboardPage: FC = (): ReactElement => {
         {/* Participant */}
         <div className="bg-white px-6 py-4 rounded-md shadow">
           <h3 className="text-primary-500 text-p2 font-semibold mb-2.5">
-            {totalParticipants}
+            1261
           </h3>
           <p className="text-neutral-400 text-p3">Total Participants</p>
         </div>
         {/* Team */}
         <div className="bg-white px-6 py-4 rounded-md shadow">
-          <h3 className="text-primary-500 text-p2 font-semibold mb-2.5">
+          <h3 className="text-primary-500 text-p2 font-semibold mb-2.5">206</h3>
-            {totalTeams}
-          </h3>
           <p className="text-neutral-400 text-p3">Total Teams</p>
         </div>
         {/* Project Submitted */}
         <div className="bg-white px-6 py-4 rounded-md shadow">
-          <h3 className="text-primary-500 text-p2 font-semibold mb-2.5">
+          <h3 className="text-primary-500 text-p2 font-semibold mb-2.5">0</h3>
-            {totalSubmissions}
-          </h3>
           <p className="text-neutral-400 text-p3">Total Project Submitted</p>
         </div>
       </section>

apps/backoffice/src/app/(protected)/hackathon-submissions/_components/submission-modal.tsx

@@ -1,249 +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">
-        {/* Header */}
-        <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>
-
-        {/* Content */}
-        <div className="p-6 space-y-6">
-          {/* Submission Status */}
-          <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>
-
-          {/* Project Description */}
-          <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>
-
-          {/* Project Links */}
-          <div className="space-y-3">
-            <h3 className="text-sm font-medium text-neutral-700">
-              Project Links
-            </h3>
-
-            {/* Repository 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">
-                  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>
-
-            {/* Demo URL */}
-            {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>
-            )}
-
-            {/* Presentation URL */}
-            {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>
-
-          {/* Screenshots */}
-          {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>
-          )}
-
-          {/* Metadata */}
-          <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>
-
-        {/* Footer */}
-        <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>
-          {/* <Button
-            variant="primary"
-            onClick={() => {
-              console.log('Edit submission:', submission.id);
-            }}
-          >
-            Edit Status
-          </Button> */}
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default SubmissionModal;

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

@@ -1,375 +1,128 @@
-import {
+import { FC, ReactElement, useState } from 'react';
-  FC,
-  ReactElement,
-  useState,
-  useEffect,
-  useMemo,
-  useCallback,
-} from 'react';
-import SubmissionModal from './_components/submission-modal';
 import {
   BackofficeWrapper,
   DataTable,
 } from '@imphnen-frontend-service/ui/organisms';
-import { ColumnDef } from '@tanstack/react-table';
+import {
+  ColumnDef,
+  getCoreRowModel,
+  getPaginationRowModel,
+  PaginationState,
+  RowSelectionState,
+  useReactTable,
+} from '@tanstack/react-table';
 import { Button } from '@imphnen-frontend-service/ui/atoms';
 import { cn } from '@imphnen-frontend-service/utils';
-import {
+import { EditOutlined } from '@ant-design/icons';
-  SearchOutlined,
-  FilterOutlined,
-  LoadingOutlined,
-  EyeOutlined,
-} from '@ant-design/icons';
-import { useQuery } from '@tanstack/react-query';
-import {
-  getAdminSubmissions,
-  TAdminSubmissionItem,
-} from '@imphnen-frontend-service/service';
-import { useSearchParams } from 'react-router-dom';
 
-type SubmissionType = TAdminSubmissionItem;
+export const HackathonUsersPage: FC = (): ReactElement => {
-
+  const [rowSelection, setRowSelection] = useState<RowSelectionState>({});
-export const HackathonSubmissionsPage: FC = (): ReactElement => {
+  const [pagination, setPagination] = useState<PaginationState>({
-  const [searchParams, setSearchParams] = useSearchParams();
+    pageIndex: 0,
-  const currentPage = Math.max(
+    pageSize: 9,
-    1,
-    parseInt(searchParams.get('page') || '1', 10)
-  );
-  const searchQuery = searchParams.get('search') || '';
-  const perPage = parseInt(searchParams.get('per_page') || '10', 10);
-  const statusFilter = searchParams.get('status') || 'all';
-
-  const [showSubmissionModal, setShowSubmissionModal] = useState(false);
-  const [selectedSubmission, setSelectedSubmission] =
-    useState<SubmissionType | null>(null);
-  const [globalFilter, setGlobalFilter] = useState(searchQuery);
-
-  // Fetch submissions from API
-  const {
-    data: submissionsResponse,
-    isLoading,
-    isFetching,
-  } = useQuery({
-    queryKey: [
-      'admin-submissions',
-      currentPage,
-      perPage,
-      statusFilter,
-      searchQuery,
-    ],
-    queryFn: () =>
-      getAdminSubmissions({
-        page: currentPage,
-        per_page: perPage,
-        status: statusFilter !== 'all' ? statusFilter : undefined,
-        search: searchQuery || undefined,
-      }),
-    staleTime: 30000, // 30 seconds cache
-    gcTime: 5 * 60 * 1000, // 5 minutes
   });
 
-  const totalData = submissionsResponse?.meta?.total_data || 0;
+  const mockData: any[] = Array.from({ length: 90 }, (_, i) => ({
-  const totalPages = submissionsResponse?.meta?.total_page || 1;
+    id: i + 1,
+    project_name: `Project ${i + 1}`,
+    repository_url: `https://github.com/user/repo${i + 1}`,
+    demo_url: `https://demo.example.com/project${i + 1}`,
+    presentation_url: `https://slides.example.com/project${i + 1}`,
+  }));
 
-  // Handle page change
+  type UserStatus = 'active' | 'inactive';
-  const handlePageChange = useCallback(
+
-    (newPage: number) => {
+  interface SubmissionType {
-      const params = new URLSearchParams();
+    id: number;
-      params.set('page', newPage.toString());
+    project_name: string;
-      if (perPage !== 10) params.set('per_page', perPage.toString());
+    repository_url: string;
-      if (searchQuery) params.set('search', searchQuery);
+    demo_url: string;
-      if (statusFilter !== 'all') params.set('status', statusFilter);
+    presentation_url: string;
-      setSearchParams(params);
+  }
-      window.scrollTo({ top: 0, behavior: 'smooth' });
+
+  const columns: ColumnDef<SubmissionType>[] = [
+    {
+      header: 'Project Name',
+      accessorKey: 'project_name',
     },
-    [setSearchParams, perPage, searchQuery, statusFilter]
+    {
-  );
+      header: 'Repository URL',
-
+      accessorKey: 'repository_url',
-  // Validate page number
-  useEffect(() => {
-    if (!isLoading && totalPages > 0 && currentPage > totalPages) {
-      setSearchParams({ page: totalPages.toString() });
-    }
-  }, [currentPage, totalPages, setSearchParams, isLoading]);
-
-  // Sync globalFilter with URL
-  useEffect(() => {
-    setGlobalFilter(searchQuery);
-  }, [searchQuery]);
-
-  // Handle search
-  const handleSearch = useCallback(() => {
-    const params = new URLSearchParams();
-    params.set('page', '1');
-    if (perPage !== 10) params.set('per_page', perPage.toString());
-    if (globalFilter.trim()) {
-      params.set('search', globalFilter.trim());
-    }
-    if (statusFilter !== 'all') params.set('status', statusFilter);
-    setSearchParams(params);
-  }, [globalFilter, setSearchParams, perPage, statusFilter]);
-
-  const handleSearchKeyPress = useCallback(
-    (e: React.KeyboardEvent<HTMLInputElement>) => {
-      if (e.key === 'Enter') {
-        handleSearch();
-      }
     },
-    [handleSearch]
+    {
-  );
+      header: 'Demo URL',
-
+      accessorKey: 'demo_url',
-  // Handle per page change
-  const handlePerPageChange = useCallback(
-    (newPerPage: number) => {
-      const params = new URLSearchParams();
-      params.set('page', '1');
-      params.set('per_page', newPerPage.toString());
-      if (searchQuery) params.set('search', searchQuery);
-      if (statusFilter !== 'all') params.set('status', statusFilter);
-      setSearchParams(params);
     },
-    [setSearchParams, searchQuery, statusFilter]
+    {
-  );
+      header: 'Presentation URL',
-
+      accessorKey: 'presentation_url',
-  // Handle status filter change
-  // const handleStatusFilterChange = useCallback(
-  //   (newStatus: string) => {
-  //     const params = new URLSearchParams();
-  //     params.set('page', '1');
-  //     if (perPage !== 10) params.set('per_page', perPage.toString());
-  //     if (searchQuery) params.set('search', searchQuery);
-  //     if (newStatus !== 'all') params.set('status', newStatus);
-  //     setSearchParams(params);
-  //   },
-  //   [setSearchParams, perPage, searchQuery]
-  // );
-
-  // Handle modal
-  const handleShowSubmissionModal = useCallback(
-    (submission: SubmissionType) => {
-      setSelectedSubmission(submission);
-      setShowSubmissionModal(true);
     },
-    []
+    {
-  );
+      header: 'Action',
+      meta: { cellClassName: cn('w-72') },
+      cell: ({ row }) => (
+        <Button
+          variant="primary"
+          size="sm"
+          className="flex items-center gap-2 w-max"
+          onClick={() => {
+            // View detail logic
+          }}
+        >
+          <EditOutlined className="text-base" /> View & Manage
+        </Button>
+      ),
+    },
+  ];
 
-  const handleCloseSubmissionModal = useCallback(() => {
+  const table = useReactTable({
-    setShowSubmissionModal(false);
+    data: mockData,
-    setSelectedSubmission(null);
+    columns,
-  }, []);
+    state: {
-
+      pagination,
-  // Get submissions data
+      rowSelection,
-  const filteredData = useMemo(() => {
+    },
-    return submissionsResponse?.data || [];
+    enableRowSelection: true,
-  }, [submissionsResponse]);
+    onRowSelectionChange: setRowSelection,
-
+    getCoreRowModel: getCoreRowModel(),
-  // Memoize columns
+    getPaginationRowModel: getPaginationRowModel(),
-  const columns: ColumnDef<SubmissionType>[] = useMemo(
+    onPaginationChange: setPagination,
-    () => [
+    pageCount: Math.ceil(mockData.length / pagination.pageSize),
-      {
+    manualPagination: false,
-        accessorKey: 'project_name',
+  });
-        header: 'Project Name',
-        cell: ({ row }) => (
-          <span className="font-medium text-neutral-900">
-            {row.original.project_name}
-          </span>
-        ),
-        enableSorting: true,
-      },
-      {
-        accessorKey: 'team_id',
-        header: 'Team ID',
-        cell: ({ row }) => (
-          <span className="text-sm text-neutral-700 font-mono">
-            {row.original.team_id}
-          </span>
-        ),
-        enableSorting: false,
-      },
-      {
-        accessorKey: 'status',
-        header: 'Status',
-        cell: ({ row }) => {
-          const status = row.original.status;
-          return (
-            <span
-              className={cn(
-                'inline-flex items-center gap-1 px-2 py-1 rounded-2xl text-xs font-medium',
-                status === 'submitted'
-                  ? 'bg-success-100 text-success-800'
-                  : status === 'pending'
-                  ? 'bg-orange-100 text-orange-800'
-                  : 'bg-neutral-100 text-neutral-700'
-              )}
-            >
-              {status.charAt(0).toUpperCase() + status.slice(1)}
-            </span>
-          );
-        },
-        enableSorting: true,
-      },
-      {
-        accessorKey: 'submitted_at',
-        header: 'Submitted',
-        cell: ({ row }) => (
-          <span className="text-neutral-900 text-sm">
-            {new Date(row.original.submitted_at).toLocaleDateString('en-US', {
-              year: 'numeric',
-              month: 'short',
-              day: 'numeric',
-            })}
-          </span>
-        ),
-        enableSorting: true,
-        sortingFn: 'datetime',
-      },
-      {
-        id: 'actions',
-        header: 'Actions',
-        meta: { cellClassName: cn('w-48') },
-        cell: ({ row }) => (
-          <Button
-            variant="primary"
-            size="sm"
-            className="flex items-center gap-2 text-sm px-4 py-2"
-            onClick={() => handleShowSubmissionModal(row.original)}
-          >
-            <EyeOutlined className="text-sm" />
-            View
-          </Button>
-        ),
-        enableSorting: false,
-      },
-    ],
-    [handleShowSubmissionModal]
-  );
 
   return (
     <BackofficeWrapper title="IMPHNEN x Kolosal.ai Hackathon 2025">
       <h1 className="mb-8 text-p1 font-semibold text-neutral-700">
-        Project Submissions
+        Project Submission
       </h1>
+      {/* Filters and actions */}
       <section className="bg-white rounded-md shadow p-8 flex flex-col gap-6">
-        <div className="flex flex-wrap gap-3 items-center justify-between">
+        <div className="flex flex-wrap gap-3 items-center">
-          <div className="flex flex-wrap gap-3 items-center">
+          <input
-            {/* Search bar */}
+            type="text"
-            <div className="relative">
+            className="border border-neutral-200 rounded-md px-3 py-2 text-label1 w-full sm:w-64"
-              <SearchOutlined className="absolute left-3 top-1/2 transform -translate-y-1/2 text-neutral-400 text-sm" />
+            placeholder="Search name or email"
-              <input
+          />
-                type="text"
+          <select className="border border-neutral-200 rounded-md px-3 py-2 text-label1 w-full sm:w-40">
-                className="border border-neutral-200 rounded-lg pl-10 pr-4 py-2.5 text-sm w-full sm:w-80 focus:border-primary-500 focus:outline-none"
+            <option value="all">All Status</option>
-                placeholder="Search by project name..."
+            <option value="active">Active</option>
-                value={globalFilter}
+            <option value="suspended">Suspended</option>
-                onChange={(e) => setGlobalFilter(e.target.value)}
+          </select>
-                onKeyPress={handleSearchKeyPress}
+          <select className="border border-neutral-200 rounded-md px-3 py-2 text-label1 w-full sm:w-40">
-              />
+            <option value="all">All City</option>
-            </div>
+            <option value="jakarta">Jakarta</option>
-
+            <option value="bandung">Bandung</option>
-            {/* Per Page Dropdown */}
+          </select>
-            <div className="relative">
-              <select
-                className="border border-neutral-200 rounded-lg px-4 py-2.5 text-sm w-28 focus:border-primary-500 focus:outline-none appearance-none bg-white cursor-pointer"
-                value={perPage}
-                onChange={(e) =>
-                  handlePerPageChange(parseInt(e.target.value, 10))
-                }
-              >
-                <option value={10}>10 / page</option>
-                <option value={20}>20 / page</option>
-                <option value={50}>50 / page</option>
-                <option value={100}>100 / page</option>
-              </select>
-            </div>
-
-            {/* Status Filter */}
-            {/* <div className="relative">
-              <FilterOutlined className="absolute left-3 top-1/2 transform -translate-y-1/2 text-neutral-400 text-sm pointer-events-none z-10" />
-              <select
-                className="border border-neutral-200 rounded-lg pl-10 pr-10 py-2.5 text-sm w-full sm:w-40 focus:border-primary-500 focus:outline-none appearance-none bg-white cursor-pointer"
-                value={statusFilter}
-                onChange={(e) => handleStatusFilterChange(e.target.value)}
-              >
-                <option value="all">All Status</option>
-                <option value="submitted">Submitted</option>
-                <option value="pending">Pending</option>
-                <option value="approved">Approved</option>
-                <option value="rejected">Rejected</option>
-              </select>
-            </div> */}
-          </div>
         </div>
 
-        {/* Active filters */}
+        {/* Table */}
-        {/* {statusFilter !== 'all' && (
+        <DataTable data={mockData} columns={columns} table={table} />
-          <div className="flex flex-wrap gap-2 items-center">
-            <span className="text-sm text-neutral-600">Active filters:</span>
-            <span className="inline-flex items-center gap-1 px-2 py-1 bg-info-100 text-info-800 rounded-2xl text-sm">
-              Status: {statusFilter}
-              <button
-                onClick={() => handleStatusFilterChange('all')}
-                className="text-info-600 hover:text-info-800 cursor-pointer"
-              >
-                ✕
-              </button>
-            </span>
-            <Button
-              variant="secondary"
-              size="sm"
-              onClick={() => {
-                handleStatusFilterChange('all');
-                setGlobalFilter('');
-              }}
-              className="text-sm text-neutral-600"
-            >
-              Clear All
-            </Button>
-          </div>
-        )} */}
-
-        {/* Loading & results */}
-        {isLoading ? (
-          <div className="flex items-center justify-center py-12">
-            <LoadingOutlined className="text-3xl text-primary-500 animate-spin" />
-            <span className="ml-3 text-neutral-600">
-              Loading submissions...
-            </span>
-          </div>
-        ) : filteredData.length > 0 ? (
-          <>
-            <div className="text-sm text-neutral-600">
-              Showing {filteredData.length} of {totalData} submissions (Page{' '}
-              {currentPage} of {totalPages})
-              {isFetching && (
-                <span className="ml-2 text-primary-500">(Updating...)</span>
-              )}
-            </div>
-            <DataTable
-              data={filteredData}
-              columns={columns}
-              pageSize={perPage}
-              manualPagination={true}
-              pageCount={totalPages}
-              currentPage={currentPage}
-              onPageChange={handlePageChange}
-            />
-          </>
-        ) : (
-          <div className="text-center py-12 text-neutral-500">
-            No submissions found. Try adjusting your filters.
-          </div>
-        )}
       </section>
 
-      {/* Submission Modal */}
+      {/* Modals extracted into shared backoffice components */}
-      {selectedSubmission && (
-        <SubmissionModal
-          isOpen={showSubmissionModal}
-          onClose={handleCloseSubmissionModal}
-          submission={selectedSubmission}
-        />
-      )}
     </BackofficeWrapper>
   );
 };
 
-export default HackathonSubmissionsPage;
+export default HackathonUsersPage;

apps/backoffice/src/app/(protected)/hackathon-teams/_components/modal-team-detail-new.tsx

@@ -1,514 +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);
-
-  // Initialize form data when modal opens
-  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]);
-
-  // Check if form has changes
-  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]);
-
-  // Check if required fields are filled
-  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">
-        {/* Header */}
-        <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>
-
-        {/* Content */}
-        <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"
-          />
-
-          {/* Banner Section */}
-          <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>
-
-          {/* Logo & Name */}
-          <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>
-
-          {/* Description */}
-          <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>
-
-          {/* City */}
-          <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>
-
-          {/* Visibility */}
-          <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 Details */}
-          {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>
-
-        {/* Footer */}
-        <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>
-
-      {/* Delete Confirmation Modal */}
-      {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/app/(protected)/hackathon-teams/_components/team-banner-placeholder.tsx

@@ -1,82 +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]'; // 3:1 aspect ratio
-
-  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) => {
-            // Fallback to placeholder if image fails to load
-            const target = e.target as HTMLImageElement;
-            target.style.display = 'none';
-            const placeholder = target.nextElementSibling as HTMLElement;
-            if (placeholder) {
-              placeholder.style.display = 'flex';
-            }
-          }}
-        />
-        {/* Fallback placeholder (hidden by default, shown on image error) */}
-        <div
-          className={cn(
-            'absolute inset-0 bg-linear-to-r from-gray-100 to-gray-200 flex items-center justify-center',
-            'hidden' // Hidden by default
-          )}
-        >
-          <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>
-    );
-  }
-
-  // No banner - show placeholder
-  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/app/(protected)/hackathon-teams/page.tsx

@@ -1,275 +1,179 @@
-import {
+import { FC, ReactElement, useState } from 'react';
-  FC,
-  ReactElement,
-  useState,
-  useEffect,
-  useMemo,
-  useCallback,
-} from 'react';
-import ModalTeamDetail from './_components/modal-team-detail-new';
-import { CityFilterSelect } from '../../../components/city-filter-select';
 import {
   BackofficeWrapper,
   DataTable,
 } from '@imphnen-frontend-service/ui/organisms';
-import { ColumnDef } from '@tanstack/react-table';
+import {
+  ColumnDef,
+  getCoreRowModel,
+  getPaginationRowModel,
+  PaginationState,
+  RowSelectionState,
+  useReactTable,
+} from '@tanstack/react-table';
 import { Button } from '@imphnen-frontend-service/ui/atoms';
 import { cn } from '@imphnen-frontend-service/utils';
-import {
+import { useTeams } from '@imphnen-frontend-service/service';
-  EditOutlined,
+import { EditOutlined } from '@ant-design/icons';
-  TeamOutlined,
-  SearchOutlined,
-  FilterOutlined,
-  PlusOutlined,
-  LoadingOutlined,
-} from '@ant-design/icons';
-import { useQuery } from '@tanstack/react-query';
-import {
-  getAdminTeams,
-  TAdminTeamItem,
-} from '@imphnen-frontend-service/service';
-import { useSearchParams } from 'react-router-dom';
-
-type TeamType = TAdminTeamItem;
 
 export const HackathonTeamsPage: FC = (): ReactElement => {
-  const [searchParams, setSearchParams] = useSearchParams();
+  const { data: teamsData } = useTeams();
-  const currentPage = Math.max(
-    1,
-    parseInt(searchParams.get('page') || '1', 10)
-  );
-  const searchQuery = searchParams.get('search') || '';
-  const perPage = parseInt(searchParams.get('per_page') || '10', 10);
-  const [showDetailModal, setShowDetailModal] = useState(false);
-  const [showNewTeamModal, setShowNewTeamModal] = useState(false);
-  const [selectedTeam, setSelectedTeam] = useState<TeamType | null>(null);
-  useState<TeamType | null>(null);
-  const [globalFilter, setGlobalFilter] = useState(searchQuery);
 
-  // Advanced filtering states
+  const [rowSelection, setRowSelection] = useState<RowSelectionState>({});
-  const [visibilityFilter, setVisibilityFilter] = useState('all');
+  const [pagination, setPagination] = useState<PaginationState>({
-  const [cityFilter, setCityFilter] = useState('all');
+    pageIndex: 0,
-
+    pageSize: 9,
-  // Fetch teams from API
-  const {
-    data: teamsResponse,
-    isLoading,
-    isFetching,
-  } = useQuery({
-    queryKey: [
-      'admin-teams',
-      currentPage,
-      perPage,
-      cityFilter,
-      visibilityFilter,
-      searchQuery,
-    ],
-    queryFn: () =>
-      getAdminTeams({
-        page: currentPage,
-        per_page: perPage,
-        search: searchQuery || undefined,
-      }),
-    staleTime: 30000, // 30 seconds cache
-    gcTime: 5 * 60 * 1000, // 5 minutes
   });
 
-  const totalData = teamsResponse?.meta?.total_data || 0;
+  const mockData: TeamType[] = Array.from({ length: 90 }, (_, i) => ({
-  const totalPages = teamsResponse?.meta?.total_page || 1;
+    id: `team-${i + 1}`,
-
+    name: `Team ${i + 1} - ${i % 3 === 0 ? 'Innovators' : 'Hackers'}`,
-  // Handle page change - update URL query params
+    city: i % 2 === 0 ? 'Jakarta' : 'Bandung',
-  const handlePageChange = useCallback(
+    visibility: i % 4 === 0 ? 'private' : 'public',
-    (newPage: number) => {
+    member_count: Math.floor(Math.random() * 4) + 1,
-      const params = new URLSearchParams();
+    has_submission: i % 3 !== 0,
-      params.set('page', newPage.toString());
+    created_at: new Date().toISOString(),
-      if (perPage !== 10) params.set('per_page', perPage.toString());
+    updated_at: new Date().toISOString(),
-      if (searchQuery) params.set('search', searchQuery);
+    leader: {
-      setSearchParams(params);
+      user: {
-      window.scrollTo({ top: 0, behavior: 'smooth' });
+        fullname: `Leader User ${i}`,
+        email: `leader${i}@example.com`,
+      },
     },
-    [setSearchParams, perPage, searchQuery]
+  }));
-  );
 
-  // Validate page number doesn't exceed total pages
+  interface TeamType {
-  useEffect(() => {
+    id: string;
-    if (!isLoading && totalPages > 0 && currentPage > totalPages) {
+    name: string;
-      setSearchParams({ page: totalPages.toString() });
+    city: string;
-    }
+    visibility: 'public' | 'private';
-  }, [currentPage, totalPages, setSearchParams, isLoading]);
+    member_count: number;
+    has_submission: boolean;
+    created_at: string;
+    updated_at: string;
+    leader?: {
+      user: {
+        fullname: string;
+        email: string;
+      };
+    };
+  }
 
-  // Sync globalFilter with URL search param on mount
+  const columns: ColumnDef<TeamType>[] = [
-  useEffect(() => {
+    {
-    setGlobalFilter(searchQuery);
+      accessorKey: 'id',
-  }, [searchQuery]);
+      header: 'ID',
-
-  // Handle search teams
-  const handleSearch = useCallback(() => {
-    const params = new URLSearchParams();
-    params.set('page', '1');
-    if (perPage !== 10) params.set('per_page', perPage.toString());
-    if (globalFilter.trim()) {
-      params.set('search', globalFilter.trim());
-    }
-    setSearchParams(params);
-  }, [globalFilter, setSearchParams, perPage]);
-
-  // Handle Enter key press in search input
-  const handleSearchKeyPress = useCallback(
-    (e: React.KeyboardEvent<HTMLInputElement>) => {
-      if (e.key === 'Enter') {
-        handleSearch();
-      }
     },
-    [handleSearch]
+    {
-  );
+      accessorKey: 'name',
-
+      header: 'Team Name',
-  // Handle per page change
-  const handlePerPageChange = useCallback(
-    (newPerPage: number) => {
-      const params = new URLSearchParams();
-      params.set('page', '1');
-      params.set('per_page', newPerPage.toString());
-      if (searchQuery) params.set('search', searchQuery);
-      setSearchParams(params);
     },
-    [setSearchParams, searchQuery]
+    {
-  );
+      accessorKey: 'city',
-
+      header: 'City',
-  // Memoize the callback to prevent recreation
+    },
-  const handleShowDetailModal = useCallback((team: TeamType) => {
+    {
-    setSelectedTeam(team);
+      accessorKey: 'visibility',
-    setShowDetailModal(true);
+      header: 'Visibility',
-  }, []);
+      cell: ({ row }) => {
-
+        const isPublic = row.original.visibility === 'public';
-  const handleCloseDetailModal = useCallback(() => {
+        return (
-    setShowDetailModal(false);
+          <span
-    setSelectedTeam(null);
+            className={cn(
-  }, []);
+              'py-2 px-4 text-sm rounded-2xl text-center',
-
+              isPublic
-  const handleShowNewTeamModal = useCallback(() => {
+                ? 'bg-info-200 text-info-700'
-    setShowNewTeamModal(true);
+                : 'bg-gray-200 text-gray-700'
-  }, []);
+            )}
-
+          >
-  const handleCloseNewTeamModal = useCallback(() => {
+            {isPublic ? 'Public' : 'Private'}
-    setShowNewTeamModal(false);
-  }, []);
-
-  // Get teams data from API response
-  const filteredData = useMemo(() => {
-    return teamsResponse?.data || [];
-  }, [teamsResponse]);
-
-  // Memoize columns to prevent recreation on every render
-  const columns: ColumnDef<TeamType>[] = useMemo(
-    () => [
-      {
-        accessorKey: 'name',
-        header: 'Team',
-        cell: ({ row }) => {
-          const team = row.original;
-          return (
-            <div className="flex items-center gap-3">
-              {/* Team Logo */}
-              <div className="w-10 h-10 rounded-full bg-neutral-100 flex items-center justify-center shrink-0 overflow-hidden">
-                {team.logo ? (
-                  <img
-                    src={team.logo}
-                    alt={team.name}
-                    className="w-full h-full object-cover"
-                  />
-                ) : (
-                  <TeamOutlined className="text-neutral-400 text-lg" />
-                )}
-              </div>
-              {/* Team Name */}
-              <div className="min-w-0 flex-1">
-                <p
-                  className="font-medium text-neutral-900 truncate max-w-sm"
-                  title={team.name}
-                >
-                  {team.name}
-                </p>
-              </div>
-            </div>
-          );
-        },
-        enableSorting: true,
-      },
-      {
-        accessorKey: 'city',
-        header: 'City',
-        cell: ({ row }) => (
-          <span className="text-neutral-700">{row.original.city}</span>
-        ),
-        enableSorting: true,
-      },
-      {
-        accessorKey: 'visibility',
-        header: 'Visibility',
-        cell: ({ row }) => {
-          const isPublic = row.original.visibility === 'public';
-          return (
-            <span
-              className={cn(
-                'inline-flex items-center gap-1 px-2 py-1 rounded-2xl text-xs font-medium',
-                isPublic
-                  ? 'bg-success-100 text-success-800'
-                  : 'bg-neutral-100 text-neutral-700'
-              )}
-            >
-              {isPublic ? 'Public' : 'Private'}
-            </span>
-          );
-        },
-        enableSorting: true,
-      },
-      {
-        id: 'leader',
-        header: 'Leader ID',
-        cell: ({ row }) => (
-          <div className="text-sm text-neutral-700 font-mono">
-            {row.original.leader_id}
-          </div>
-        ),
-        enableSorting: false,
-      },
-      {
-        accessorKey: 'created_at',
-        header: 'Created',
-        cell: ({ row }) => (
-          <span className="text-neutral-900 text-sm">
-            {new Date(row.original.created_at).toLocaleDateString('en-UK', {
-              year: 'numeric',
-              month: 'short',
-              day: 'numeric',
-            })}
           </span>
-        ),
+        );
-        enableSorting: true,
-        sortingFn: 'datetime',
       },
-      {
+    },
-        id: 'actions',
+    {
-        header: 'Actions',
+      accessorKey: 'member_count',
-        meta: { cellClassName: cn('w-48') },
+      header: 'Members',
-        cell: ({ row }) => (
+    },
-          <div className="flex items-center gap-2">
+    {
-            <Button
+      id: 'leader',
-              variant="primary"
+      header: 'Leader',
-              size="sm"
+      cell: ({ row }) => {
-              className="flex items-center gap-2 text-sm px-4 py-2"
+        const leader = row.original.leader?.user;
-              onClick={() => handleShowDetailModal(row.original)}
+        return leader ? (
-            >
+          <div>
-              <EditOutlined className="text-sm" />
+            <div className="text-sm font-medium text-gray-900">
-              Manage
+              {leader.fullname}
-            </Button>
+            </div>
+            <div className="text-xs text-gray-500">{leader.email}</div>
           </div>
-        ),
+        ) : (
-        enableSorting: false,
+          <span className="text-gray-400 italic">-</span>
+        );
       },
-    ],
+    },
-    [handleShowDetailModal]
+    {
-  );
+      accessorKey: 'has_submission',
+      header: 'Submitted',
+      cell: ({ row }) => {
+        const hasSubmission = row.original.has_submission;
+        return (
+          <span
+            className={cn(
+              'py-2 px-4 text-sm rounded-2xl text-center',
+              hasSubmission
+                ? 'bg-success-200 text-success-700'
+                : 'bg-danger-200 text-danger-700'
+            )}
+          >
+            {hasSubmission ? 'Yes' : 'No'}
+          </span>
+        );
+      },
+    },
+    {
+      accessorKey: 'updated_at',
+      header: 'Last Updated',
+      cell: ({ row }) => {
+        return new Date(row.original.updated_at).toLocaleDateString();
+      },
+    },
+    {
+      id: 'actions',
+      header: 'Action',
+      meta: { cellClassName: cn('w-48') },
+      cell: ({ row }) => (
+        <div className="flex items-center gap-2">
+          <Button
+            variant="primary"
+            size="sm"
+            className="flex items-center gap-2 w-max"
+            onClick={() => {
+              // View detail logic
+            }}
+          >
+            <EditOutlined className="text-base" /> View & Manage
+          </Button>
+        </div>
+      ),
+    },
+  ];
+
+  const table = useReactTable({
+    data: mockData,
+    columns,
+    state: {
+      pagination,
+      rowSelection,
+    },
+    enableRowSelection: true,
+    onRowSelectionChange: setRowSelection,
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    onPaginationChange: setPagination,
+    pageCount: Math.ceil(mockData.length / pagination.pageSize),
+    manualPagination: false,
+  });
 
   return (
     <BackofficeWrapper title="IMPHNEN x Kolosal.ai Hackathon 2025">
@@ -278,168 +182,27 @@ export const HackathonTeamsPage: FC = (): ReactElement => {
       </h1>
       {/* Filters and actions */}
       <section className="bg-white rounded-md shadow p-8 flex flex-col gap-6">
-        <div className="flex flex-wrap gap-3 items-center justify-between">
+        <div className="flex flex-wrap gap-3 items-center">
-          {/* Left side - Search & filters */}
+          <input
-          <div className="flex flex-wrap gap-3 items-center">
+            type="text"
-            {/* Search bar */}
+            className="border border-neutral-200 rounded-md px-3 py-2 text-label1 w-full sm:w-64"
-            <div className="relative">
+            placeholder="Search name or email"
-              <SearchOutlined className="absolute left-3 top-1/2 transform -translate-y-1/2 text-neutral-400 text-sm" />
+          />
-              <input
+          <select className="border border-neutral-200 rounded-md px-3 py-2 text-label1 w-full sm:w-40">
-                type="text"
+            <option value="all">All Status</option>
-                className="border border-neutral-200 rounded-lg pl-10 pr-4 py-2.5 text-sm w-full sm:w-80 focus:border-primary-500 focus:outline-none"
+            <option value="active">Active</option>
-                placeholder="Search teams by name or city..."
+            <option value="suspended">Suspended</option>
-                value={globalFilter}
+          </select>
-                onChange={(e) => setGlobalFilter(e.target.value)}
+          <select className="border border-neutral-200 rounded-md px-3 py-2 text-label1 w-full sm:w-40">
-                onKeyPress={handleSearchKeyPress}
+            <option value="all">All City</option>
-              />
+            <option value="jakarta">Jakarta</option>
-            </div>
+            <option value="bandung">Bandung</option>
-
+          </select>
-            {/* Per Page Dropdown */}
-            <div className="relative">
-              <select
-                className="border border-neutral-200 rounded-lg px-4 py-2.5 text-sm w-28 focus:border-primary-500 focus:outline-none appearance-none bg-white cursor-pointer"
-                value={perPage}
-                onChange={(e) =>
-                  handlePerPageChange(parseInt(e.target.value, 10))
-                }
-              >
-                <option value={10}>10 / page</option>
-                <option value={20}>20 / page</option>
-                <option value={50}>50 / page</option>
-                <option value={100}>100 / page</option>
-              </select>
-            </div>
-
-            {/* Visibility Filter */}
-            {/* <div className="relative">
-              <FilterOutlined className="absolute left-3 top-1/2 transform -translate-y-1/2 text-neutral-400 text-sm pointer-events-none z-10" />
-              <select
-                className="border border-neutral-200 rounded-lg pl-10 pr-10 py-2.5 text-sm w-full sm:w-40 focus:border-primary-500 focus:outline-none appearance-none bg-white cursor-pointer"
-                value={visibilityFilter}
-                onChange={(e) => setVisibilityFilter(e.target.value)}
-              >
-                <option value="all">All Visibility</option>
-                <option value="public">Public</option>
-                <option value="private">Private</option>
-              </select>
-            </div> */}
-
-            {/* City Filter */}
-            {/* <CityFilterSelect
-              value={cityFilter}
-              onChange={setCityFilter}
-              className="w-full sm:w-44"
-              placeholder="Search cities..."
-              allOptionLabel="All Cities"
-            /> */}
-          </div>
-
-          {/* Right side - Add Team Button */}
-          <div className="flex items-center gap-3">
-            <Button
-              variant="primary"
-              size="md"
-              className="flex items-center gap-2 px-4 py-2"
-              onClick={handleShowNewTeamModal}
-            >
-              <PlusOutlined className="text-sm" />
-              Add Team
-            </Button>
-          </div>
         </div>
-
+        {/* Table */}
-        {/* Active filters display */}
+        <DataTable data={mockData} columns={columns} table={table} />
-        {(visibilityFilter !== 'all' || cityFilter !== 'all') && (
-          <div className="flex flex-wrap gap-2 items-center">
-            <span className="text-sm text-neutral-600">Active filters:</span>
-
-            {/* Visibility filter badge */}
-            {visibilityFilter !== 'all' && (
-              <span className="inline-flex items-center gap-1 px-2 py-1 bg-info-100 text-info-800 rounded-2xl text-sm">
-                Visibility: {visibilityFilter}
-                <button
-                  onClick={() => setVisibilityFilter('all')}
-                  className="text-info-600 hover:text-info-800 cursor-pointer"
-                >
-                  ✕
-                </button>
-              </span>
-            )}
-
-            {/* City filter badge */}
-            {cityFilter !== 'all' && (
-              <span className="inline-flex items-center gap-1 px-2 py-1 bg-green-100 text-green-800 rounded-2xl text-sm">
-                City: {cityFilter}
-                <button
-                  onClick={() => setCityFilter('all')}
-                  className="text-green-600 hover:text-green-800 cursor-pointer"
-                >
-                  ✕
-                </button>
-              </span>
-            )}
-
-            {/* Clear all filters */}
-            <Button
-              variant="secondary"
-              size="sm"
-              onClick={() => {
-                setVisibilityFilter('all');
-                setCityFilter('all');
-                setGlobalFilter('');
-              }}
-              className="text-sm text-neutral-600"
-            >
-              Clear All
-            </Button>
-          </div>
-        )}
-
-        {/* Loading & results display */}
-        {isLoading ? (
-          <div className="flex items-center justify-center py-12">
-            <LoadingOutlined className="text-3xl text-primary-500 animate-spin" />
-            <span className="ml-3 text-neutral-600">Loading teams...</span>
-          </div>
-        ) : filteredData.length > 0 ? (
-          <>
-            <div className="text-sm text-neutral-600">
-              Showing {filteredData.length} of {totalData} teams (Page{' '}
-              {currentPage} of {totalPages})
-              {isFetching && (
-                <span className="ml-2 text-primary-500">(Updating...)</span>
-              )}
-            </div>
-            <DataTable
-              data={filteredData}
-              columns={columns}
-              pageSize={perPage}
-              manualPagination={true}
-              pageCount={totalPages}
-              currentPage={currentPage}
-              onPageChange={handlePageChange}
-            />
-          </>
-        ) : (
-          <div className="text-center py-12 text-neutral-500">
-            No teams found. Try adjusting your filters.
-          </div>
-        )}
       </section>
-
+      {/* Modals extracted into shared backoffice components */}
-      {/* Modals component */}
-      <ModalTeamDetail
-        isOpen={showDetailModal}
-        onClose={handleCloseDetailModal}
-        team={selectedTeam}
-      />
-
-      {/* New Team Modal */}
-      <ModalTeamDetail
-        isOpen={showNewTeamModal}
-        onClose={handleCloseNewTeamModal}
-        team={null} // null indicates creating new team
-      />
     </BackofficeWrapper>
   );
 };

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

@@ -15,10 +15,10 @@ import {
 
 interface UserType {
   id: string;
-  avatar?: string | null;
+  avatar?: string;
   fullname: string;
   bio?: string;
-  location: string | null;
+  location: string;
   is_active: boolean;
   skills: string[];
   created_at: string;
@@ -77,7 +77,7 @@ const ModalUserDetail: FC<ModalProps> = ({ isOpen, onClose, user }) => {
   // Check if required fields are filled
   const isFormValid = useMemo(() => {
     if (!formData) return false;
-    return formData.fullname?.trim() !== '' && formData.location?.trim() !== '';
+    return formData.fullname.trim() !== '' && formData.location.trim() !== '';
   }, [formData]);
 
   const canSave = hasChanges && isFormValid;
@@ -259,13 +259,13 @@ const ModalUserDetail: FC<ModalProps> = ({ isOpen, onClose, user }) => {
               </div>
             </div>
             <button
-              className="p-2 hover:bg-neutral-100 rounded-lg transition-colors cursor-pointer"
+              className="p-2 hover:bg-neutral-100 rounded-lg transition-colors"
               onClick={() => {
                 setShowAvatarMenu(false);
                 handleCancel();
               }}
             >
-              <CloseOutlined className="text-neutral-400 text-lg" />
+              <CloseOutlined className="text-neutral-400 text-lg cursor-pointer" />
             </button>
           </div>
 
@@ -294,15 +294,13 @@ const ModalUserDetail: FC<ModalProps> = ({ isOpen, onClose, user }) => {
                           }
                           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() === ''
-                              formData.fullname.trim() === ''
                               ? 'border-red-300 bg-red-50'
                               : 'border-neutral-300'
                           )}
                           placeholder="Enter full name"
                         />
-                        {(!formData.fullname ||
+                        {formData.fullname.trim() === '' && (
-                          formData.fullname.trim() === '') && (
                           <p className="text-red-500 text-xs mt-1">
                             Full name is required
                           </p>
@@ -318,14 +316,13 @@ const ModalUserDetail: FC<ModalProps> = ({ isOpen, onClose, user }) => {
                           Location <span className="text-red-500">*</span>
                         </label>
                         <select
-                          value={formData.location || ''}
+                          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() === ''
-                              formData.location.trim() === ''
                               ? 'border-red-300 bg-red-50'
                               : 'border-neutral-300'
                           )}
@@ -337,8 +334,7 @@ const ModalUserDetail: FC<ModalProps> = ({ isOpen, onClose, user }) => {
                           <option value="Medan">Medan</option>
                           <option value="Yogyakarta">Yogyakarta</option>
                         </select>
-                        {(!formData.location ||
+                        {formData.location.trim() === '' && (
-                          formData.location.trim() === '') && (
                           <p className="text-red-500 text-xs mt-1">
                             Location is required
                           </p>

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

@@ -1,11 +1,4 @@
-import {
+import { FC, ReactElement, useState, useMemo, useCallback } from 'react';
-  FC,
-  ReactElement,
-  useState,
-  useEffect,
-  useMemo,
-  useCallback,
-} from 'react';
 import ModalUserDetail from './_components/modal-user-detail';
 import {
   BackofficeWrapper,
@@ -20,19 +13,23 @@ import {
   SearchOutlined,
   FilterOutlined,
   PlusOutlined,
-  LoadingOutlined,
 } from '@ant-design/icons';
-import { CityFilterSelect } from '../../../components/city-filter-select';
+// Removed unused SearchOutlined icon after schema revision
-import { useQuery } from '@tanstack/react-query';
-import {
-  getAdminUsers,
-  TAdminUserItem,
-} from '@imphnen-frontend-service/service';
-import { useSearchParams } from 'react-router-dom';
 
-type UserType = TAdminUserItem;
+// Define interface outside component
+interface UserType {
+  id: string; // UUID
+  avatar?: string;
+  fullname: string;
+  bio?: string;
+  location: string;
+  is_active: boolean; // admin can deactivate
+  skills: string[]; // Frontend Developer, Backend Developer, etc.
+  created_at: string;
+  updated_at: string;
+}
 
-// Skills options for filter
+// Move mock data outside component to prevent recreation
 const skillsOptions = [
   'Frontend Developer',
   'Backend Developer',
@@ -44,108 +41,59 @@ const skillsOptions = [
   'Mobile Developer',
 ];
 
+const locations = ['Jakarta', 'Bandung', 'Surabaya', 'Medan', 'Yogyakarta'];
+const bios = [
+  'Passionate developer with 5+ years experience',
+  'Tech enthusiast and problem solver',
+  'Building scalable solutions for modern problems',
+  'Creative designer with technical background',
+  'Data-driven decision maker',
+];
+
+const mockData: UserType[] = Array.from({ length: 50 }, (_, i) => {
+  const randomSkillsCount = Math.floor(Math.random() * 3) + 1; // 1-3 skills
+  const randomSkills = skillsOptions
+    .sort(() => 0.5 - Math.random())
+    .slice(0, randomSkillsCount);
+
+  return {
+    id: `24db9e4d-ca4c-46aa-ac36-8ef04bbe01${String(i).padStart(2, '0')}`,
+    avatar:
+      i % 4 === 0
+        ? `https://ui-avatars.com/api/?name=${encodeURIComponent(
+            i % 3 === 0 ? 'Ahmad Wijuana' : 'Sofia Wijuana'
+          )}&background=random`
+        : undefined,
+    fullname:
+      i % 3 === 0
+        ? 'Ahmad Wijuana'
+        : i % 3 === 1
+        ? 'Sofia Wijuana'
+        : 'Budi Santoso',
+    bio: i % 4 === 0 ? bios[i % bios.length] : undefined,
+    location: locations[i % locations.length],
+    is_active: i % 7 !== 0, // More realistic distribution
+    skills: randomSkills,
+    created_at: new Date(
+      Date.now() - i * 86400000 * (Math.random() * 30 + 1)
+    ).toISOString(), // Random within last 30-60 days
+    updated_at: new Date().toISOString(),
+  };
+});
+
 export const HackathonUsersPage: FC = (): ReactElement => {
-  const [searchParams, setSearchParams] = useSearchParams();
-  const currentPage = Math.max(
-    1,
-    parseInt(searchParams.get('page') || '1', 10)
-  );
-  const searchQuery = searchParams.get('search') || '';
-  const perPage = parseInt(searchParams.get('per_page') || '10', 10);
   const [showDetailModal, setShowDetailModal] = useState(false);
   const [showNewUserModal, setShowNewUserModal] = useState(false);
   const [selectedUser, setSelectedUser] = useState<UserType | null>(null);
-  const [globalFilter, setGlobalFilter] = useState(searchQuery);
+  const [globalFilter, setGlobalFilter] = useState('');
 
   // Advanced filtering states
   const [statusFilter, setStatusFilter] = useState('all');
-  const [cityFilter, setCityFilter] = useState('all');
+  const [locationFilter, setLocationFilter] = useState('all');
   const [skillsFilter, setSkillsFilter] = useState<string[]>([]);
 
-  // Fetch users from API
+  // Constants
-  const {
+  const pageSize = 10;
-    data: usersResponse,
-    isLoading,
-    isFetching,
-  } = useQuery({
-    queryKey: [
-      'admin-users',
-      currentPage,
-      perPage,
-      cityFilter,
-      statusFilter,
-      searchQuery,
-    ],
-    queryFn: () =>
-      getAdminUsers({
-        page: currentPage,
-        per_page: perPage,
-        search: searchQuery || undefined,
-      }),
-    staleTime: 30000, // 30 seconds cache
-    gcTime: 5 * 60 * 1000, // 5 minutes
-  });
-
-  const totalData = usersResponse?.meta?.total_data || 0;
-  const totalPages = usersResponse?.meta?.total_page || 1;
-
-  // Handle page change - update URL query params
-  const handlePageChange = useCallback(
-    (newPage: number) => {
-      const params = new URLSearchParams();
-      params.set('page', newPage.toString());
-      if (perPage !== 10) params.set('per_page', perPage.toString());
-      if (searchQuery) params.set('search', searchQuery);
-      setSearchParams(params);
-      window.scrollTo({ top: 0, behavior: 'smooth' });
-    },
-    [setSearchParams, perPage, searchQuery]
-  );
-
-  // Validate page number doesn't exceed total pages
-  useEffect(() => {
-    if (!isLoading && totalPages > 0 && currentPage > totalPages) {
-      setSearchParams({ page: totalPages.toString() });
-    }
-  }, [currentPage, totalPages, setSearchParams, isLoading]);
-
-  // Sync globalFilter with URL search param on mount
-  useEffect(() => {
-    setGlobalFilter(searchQuery);
-  }, [searchQuery]);
-
-  // Handle search users
-  const handleSearch = useCallback(() => {
-    const params = new URLSearchParams();
-    params.set('page', '1');
-    if (perPage !== 10) params.set('per_page', perPage.toString());
-    if (globalFilter.trim()) {
-      params.set('search', globalFilter.trim());
-    }
-    setSearchParams(params);
-  }, [globalFilter, setSearchParams, perPage]);
-
-  // Handle Enter key press in search input
-  const handleSearchKeyPress = useCallback(
-    (e: React.KeyboardEvent<HTMLInputElement>) => {
-      if (e.key === 'Enter') {
-        handleSearch();
-      }
-    },
-    [handleSearch]
-  );
-
-  // Handle per page change
-  const handlePerPageChange = useCallback(
-    (newPerPage: number) => {
-      const params = new URLSearchParams();
-      params.set('page', '1');
-      params.set('per_page', newPerPage.toString());
-      if (searchQuery) params.set('search', searchQuery);
-      setSearchParams(params);
-    },
-    [setSearchParams, searchQuery]
-  );
 
   // Memoize the callback to prevent recreation
   const handleShowDetailModal = useCallback((user: UserType) => {
@@ -168,26 +116,29 @@ export const HackathonUsersPage: FC = (): ReactElement => {
 
   // Filter data based on current filter states
   const filteredData = useMemo(() => {
-    const usersData = usersResponse?.data || [];
+    return mockData.filter((user) => {
-    return usersData.filter((user: UserType) => {
       // Status filter
       if (statusFilter !== 'all') {
         const isActive = statusFilter === 'active';
         if (user.is_active !== isActive) return false;
       }
 
+      // Location filter
+      if (locationFilter !== 'all' && user.location !== locationFilter) {
+        return false;
+      }
+
       // Skills filter
       if (skillsFilter.length > 0) {
-        const userSkills = user.skills || [];
         const hasMatchingSkill = skillsFilter.some((skill) =>
-          userSkills.includes(skill)
+          user.skills.includes(skill)
         );
         if (!hasMatchingSkill) return false;
       }
 
       return true;
     });
-  }, [usersResponse, statusFilter, skillsFilter]);
+  }, [statusFilter, locationFilter, skillsFilter]);
 
   // Memoize columns to prevent recreation on every render
   const columns: ColumnDef<UserType>[] = useMemo(
@@ -222,32 +173,23 @@ export const HackathonUsersPage: FC = (): ReactElement => {
       {
         accessorKey: 'skills',
         header: 'Skills',
-        cell: ({ row }) => {
+        cell: ({ row }) => (
-          const skills = row.original.skills || [];
+          <div className="flex flex-wrap gap-1 max-w-xs">
-          return (
+            {row.original.skills.slice(0, 2).map((skill, index) => (
-            <div className="flex flex-wrap gap-1 max-w-xs">
+              <span
-              {skills.length > 0 ? (
+                key={index}
-                <>
+                className="inline-flex items-center px-2 py-1 rounded-2xl text-xs font-medium bg-success-100 text-success-800"
-                  {skills.slice(0, 2).map((skill, index) => (
+              >
-                    <span
+                {skill.replace(' Developer', '').replace(' Engineer', '')}
-                      key={index}
+              </span>
-                      className="inline-flex items-center px-2 py-1 rounded-2xl text-xs font-medium bg-success-100 text-success-800"
+            ))}
-                    >
+            {row.original.skills.length > 2 && (
-                      {skill.replace(' Developer', '').replace(' Engineer', '')}
+              <span className="inline-flex items-center px-2 py-1 rounded-2xl text-xs font-medium bg-success-200 text-success-700">
-                    </span>
+                +{row.original.skills.length - 2}
-                  ))}
+              </span>
-                  {skills.length > 2 && (
+            )}
-                    <span className="inline-flex items-center px-2 py-1 rounded-2xl text-xs font-medium bg-success-200 text-success-700">
+          </div>
-                      +{skills.length - 2}
+        ),
-                    </span>
-                  )}
-                </>
-              ) : (
-                <span className="text-neutral-400">-</span>
-              )}
-            </div>
-          );
-        },
         enableSorting: false,
       },
       {
@@ -318,7 +260,7 @@ export const HackathonUsersPage: FC = (): ReactElement => {
               <EditOutlined className="text-sm" />
               Manage
             </Button>
-            {/* <Button
+            <Button
               variant="secondary"
               size="sm"
               className="text-sm px-4 py-2"
@@ -328,7 +270,7 @@ export const HackathonUsersPage: FC = (): ReactElement => {
               }}
             >
               {row.original.is_active ? 'Deactivate' : 'Activate'}
-            </Button> */}
+            </Button>
           </div>
         ),
         enableSorting: false,
@@ -356,28 +298,11 @@ export const HackathonUsersPage: FC = (): ReactElement => {
                 placeholder="Search users by name or location..."
                 value={globalFilter}
                 onChange={(e) => setGlobalFilter(e.target.value)}
-                onKeyPress={handleSearchKeyPress}
               />
             </div>
 
-            {/* Per Page Dropdown */}
-            <div className="relative">
-              <select
-                className="border border-neutral-200 rounded-lg px-4 py-2.5 text-sm w-28 focus:border-primary-500 focus:outline-none appearance-none bg-white cursor-pointer"
-                value={perPage}
-                onChange={(e) =>
-                  handlePerPageChange(parseInt(e.target.value, 10))
-                }
-              >
-                <option value={10}>10 / page</option>
-                <option value={20}>20 / page</option>
-                <option value={50}>50 / page</option>
-                <option value={100}>100 / page</option>
-              </select>
-            </div>
-
             {/* Status Filter */}
-            {/* <div className="relative">
+            <div className="relative">
               <FilterOutlined className="absolute left-3 top-1/2 transform -translate-y-1/2 text-neutral-400 text-sm pointer-events-none z-10" />
               <select
                 className="border border-neutral-200 rounded-lg pl-10 pr-10 py-2.5 text-sm w-full sm:w-36 focus:border-primary-500 focus:outline-none appearance-none bg-white cursor-pointer"
@@ -388,30 +313,27 @@ export const HackathonUsersPage: FC = (): ReactElement => {
                 <option value="active">Active</option>
                 <option value="inactive">Inactive</option>
               </select>
-            </div> */}
+            </div>
 
-            {/* City Filter */}
+            {/* Location Filter */}
-            {/* <CityFilterSelect
+            <div className="relative">
-              value={cityFilter}
+              <FilterOutlined className="absolute left-3 top-1/2 transform -translate-y-1/2 text-neutral-400 text-sm pointer-events-none z-10" />
-              onChange={setCityFilter}
+              <select
-              className="w-full sm:w-44"
+                className="border border-neutral-200 rounded-lg pl-10 pr-10 py-2.5 text-sm w-full sm:w-44 focus:border-primary-500 focus:outline-none appearance-none bg-white cursor-pointer"
-              placeholder="Search cities..."
+                value={locationFilter}
-              allOptionLabel="All Cities"
+                onChange={(e) => setLocationFilter(e.target.value)}
-            />
+              >
-            {cityFilter !== 'all' && (
+                <option value="all">All Locations</option>
-              <span className="inline-flex items-center gap-1 px-2 py-1 bg-green-100 text-green-800 rounded-2xl text-sm">
+                {locations.map((location) => (
-                Location: {cityFilter}
+                  <option key={location} value={location}>
-                <button
+                    {location}
-                  onClick={() => setCityFilter('all')}
+                  </option>
-                  className="text-green-600 hover:text-green-800 cursor-pointer"
+                ))}
-                >
+              </select>
-                  ✕
+            </div>
-                </button>
-              </span>
-            )} */}
 
             {/* Skills Filter with Icon */}
-            {/* <div className="relative">
+            <div className="relative">
               <FilterOutlined className="absolute left-3 top-1/2 transform -translate-y-1/2 text-neutral-400 text-sm pointer-events-none z-10" />
               <select
                 className="border border-neutral-200 rounded-lg pl-10 pr-10 py-2.5 text-sm w-full sm:w-44 focus:border-primary-500 focus:outline-none appearance-none bg-white cursor-pointer"
@@ -436,7 +358,7 @@ export const HackathonUsersPage: FC = (): ReactElement => {
                   </option>
                 ))}
               </select>
-            </div> */}
+            </div>
           </div>
 
           {/* Right side - Add User Button */}
@@ -456,7 +378,7 @@ export const HackathonUsersPage: FC = (): ReactElement => {
         {/* Active filters display */}
         {(skillsFilter.length > 0 ||
           statusFilter !== 'all' ||
-          cityFilter !== 'all') && (
+          locationFilter !== 'all') && (
           <div className="flex flex-wrap gap-2 items-center">
             <span className="text-sm text-neutral-600">Active filters:</span>
 
@@ -474,11 +396,11 @@ export const HackathonUsersPage: FC = (): ReactElement => {
             )}
 
             {/* Location filter badge */}
-            {cityFilter !== 'all' && (
+            {locationFilter !== 'all' && (
               <span className="inline-flex items-center gap-1 px-2 py-1 bg-green-100 text-green-800 rounded-2xl text-sm">
-                City: {cityFilter}
+                Location: {locationFilter}
                 <button
-                  onClick={() => setCityFilter('all')}
+                  onClick={() => setLocationFilter('all')}
                   className="text-green-600 hover:text-green-800 cursor-pointer"
                 >
                   ✕
@@ -510,7 +432,7 @@ export const HackathonUsersPage: FC = (): ReactElement => {
               size="sm"
               onClick={() => {
                 setStatusFilter('all');
-                setCityFilter('all');
+                setLocationFilter('all');
                 setSkillsFilter([]);
                 setGlobalFilter('');
               }}
@@ -521,36 +443,17 @@ export const HackathonUsersPage: FC = (): ReactElement => {
           </div>
         )}
 
-        {/* Loading & results display */}
+        {/* Pagination-aware results display */}
-        {isLoading ? (
+        {filteredData.length > 0 && (
-          <div className="flex items-center justify-center py-12">
+          <div className="text-sm text-neutral-600">
-            <LoadingOutlined className="text-3xl text-primary-500 animate-spin" />
+            Showing {Math.min(pageSize, filteredData.length)} of{' '}
-            <span className="ml-3 text-neutral-600">Loading users...</span>
+            {filteredData.length} users
-          </div>
+            {filteredData.length > pageSize}
-        ) : filteredData.length > 0 ? (
-          <>
-            <div className="text-sm text-neutral-600">
-              Showing {filteredData.length} of {totalData} users (Page{' '}
-              {currentPage} of {totalPages})
-              {isFetching && (
-                <span className="ml-2 text-primary-500">(Updating...)</span>
-              )}
-            </div>
-            <DataTable
-              data={filteredData}
-              columns={columns}
-              pageSize={perPage}
-              manualPagination={true}
-              pageCount={totalPages}
-              currentPage={currentPage}
-              onPageChange={handlePageChange}
-            />
-          </>
-        ) : (
-          <div className="text-center py-12 text-neutral-500">
-            No users found. Try adjusting your filters.
           </div>
         )}
+
+        {/* Table */}
+        <DataTable data={filteredData} columns={columns} pageSize={10} />
       </section>
 
       {/* Modals component */}

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

@@ -23,7 +23,7 @@ export const AppLayout: FC = (): ReactElement => {
             {/* Mobile menu button (shown on small screens) */}
             <button
               type="button"
-              className="lg:hidden p-2 rounded-md hover:bg-gray-100 text-gray-700 cursor-pointer"
+              className="lg:hidden p-2 rounded-md hover:bg-gray-100 text-gray-700"
               onClick={() => setMobileSidebarOpen(true)}
               aria-label="Open sidebar"
             >

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

@@ -2,39 +2,22 @@ import { useForm } from 'react-hook-form';
 import {
   authLoginSchema,
   TLoginRequest,
-  useBackofficeLogin,
 } from '@imphnen-frontend-service/service';
 import { zodResolver } from '@hookform/resolvers/zod';
-import { useNavigate } from 'react-router';
+import { useSession } from '@imphnen-frontend-service/utils';
-import { toast } from 'sonner';
 
 export const useLogin = () => {
-  const navigate = useNavigate();
-  const loginMutation = useBackofficeLogin();
-
   const form = useForm<TLoginRequest>({
     resolver: zodResolver(authLoginSchema),
     mode: 'all',
-    defaultValues: {
-      email: '',
-      password: '',
-    },
   });
 
-  const onSubmit = form.handleSubmit(async (data) => {
+  const { signIn } = useSession();
-    try {
+
-      await loginMutation.mutateAsync(data);
+  const onSubmit = form.handleSubmit((data) => signIn(data));
-      toast.success('Login berhasil!');
-      navigate('/hackathon-dashboard');
-    } catch (error) {
-      console.error('[Backoffice Login] Error:', error);
-      toast.error((error as Error).message || 'Login gagal');
-    }
-  });
 
   return {
     form,
     onSubmit,
-    isLoading: loginMutation.isPending,
   };
 };

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

@@ -4,7 +4,7 @@ import { useLogin } from './_hooks/use-login';
 import { ControlledInputField } from '@imphnen-frontend-service/ui/organisms';
 
 export const Components: FC = (): ReactElement => {
-  const { form, onSubmit, isLoading } = useLogin();
+  const { form, onSubmit } = useLogin();
 
   return (
     <div className="flex justify-center items-center min-h-screen">
@@ -22,7 +22,6 @@ export const Components: FC = (): ReactElement => {
             name="email"
             size="lg"
             className="w-full"
-            disabled={isLoading}
           />
           <ControlledInputField
             control={form.control}
@@ -32,11 +31,10 @@ export const Components: FC = (): ReactElement => {
             name="password"
             size="lg"
             className="w-full"
-            disabled={isLoading}
           />
           <Button
             disabled={
-              isLoading ||
+              form.formState.isSubmitting ||
               form.formState.isValidating ||
               !form.formState.isValid
             }
@@ -44,7 +42,7 @@ export const Components: FC = (): ReactElement => {
             size="md"
             className="w-full"
           >
-            {isLoading ? 'Loading...' : 'Login'}
+            Login
           </Button>
         </form>
       </div>

apps/backoffice/src/app/404.tsx

@@ -1,23 +0,0 @@
-import { Link } from 'react-router-dom';
-
-export default function NotFoundPage() {
-  return (
-    <div className="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-950">
-      <div className="text-center">
-        <h1 className="text-9xl font-bold text-gray-200 mb-4">404</h1>
-        <h2 className="text-3xl font-semibold text-gray-900 dark:text-gray-300 mb-4">
-          Page Not Found
-        </h2>
-        <p className="text-gray-600 dark:text-gray-400 mb-8">
-          The page you are looking for doesn't exist or has been moved.
-        </p>
-        <Link
-          to="/hackathon-dashboard"
-          className="inline-block px-6 py-3 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition-colors"
-        >
-          Go Back Home
-        </Link>
-      </div>
-    </div>
-  );
-}

apps/backoffice/src/app/error.tsx

@@ -1,29 +0,0 @@
-import { useRouteError, isRouteErrorResponse } from 'react-router-dom';
-
-export default function ErrorPage() {
-  const error = useRouteError();
-  let errorMessage: string;
-
-  if (isRouteErrorResponse(error)) {
-    errorMessage = error.statusText;
-  } else if (error instanceof Error) {
-    errorMessage = error.message;
-  } else if (typeof error === 'string') {
-    errorMessage = error;
-  } else {
-    console.error(error);
-    errorMessage = 'Unknown error';
-  }
-
-  return (
-    <div className="min-h-screen flex items-center justify-center bg-gray-50">
-      <div className="text-center">
-        <h1 className="text-6xl font-bold text-red-600 mb-4">Oops!</h1>
-        <p className="text-xl text-gray-700 mb-2">
-          Sorry, an unexpected error has occurred.
-        </p>
-        <p className="text-gray-500 italic">{errorMessage}</p>
-      </div>
-    </div>
-  );
-}

apps/backoffice/src/components/city-filter-select.tsx

@@ -1,148 +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);
-
-  // Filter cities based on search query
-  const filteredCities = INDONESIAN_CITIES.filter((city) =>
-    city.toLowerCase().includes(searchQuery.toLowerCase())
-  );
-
-  // Close dropdown when clicking outside
-  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">
-          {/* All Cities Option */}
-          <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>
-
-          {/* Filtered Cities */}
-          {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/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/middleware.ts

@@ -84,11 +84,11 @@ export const middleware = async ({ request }: LoaderFunctionArgs) => {
     session?.role?.permissions?.map?.((perm) => perm?.name) ?? [];
 
   if (mappingPublicRoutes.includes(pathname)) {
-    if (token) return redirect('/hackathon-dashboard');
+    if (token) return redirect('/dashboard');
     return null;
   }
 
-  if (!session) return redirect('/auth/login');
+  // if (!session) return redirect('/auth/login');
 
   const matchedRoute = mappingRoutePermissions.find(
     (route) => route.path === pathname
@@ -100,7 +100,7 @@ export const middleware = async ({ request }: LoaderFunctionArgs) => {
       matchedRoute.permissions.some((perm) => userPermissions.includes(perm));
 
     if (!hasPermission) {
-      return '/hackathon-dashboard';
+      return '/dashboard';
     }
   }
 

apps/backoffice/vite.config.ts

@@ -8,7 +8,7 @@ export default defineConfig(() => ({
   root: __dirname,
   cacheDir: '../../node_modules/.vite/apps/backoffice',
   server: {
-    port: 3003,
+    port: 3000,
     host: 'localhost',
   },
   preview: {

apps/hackathon/index.html

@@ -18,9 +18,6 @@
       type="image/svg+xml"
       href="/images/imphnen-logo-simple.svg"
     />
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap" rel="stylesheet" />
     <link rel="stylesheet" href="/src/index.css" />
     <meta property="og:type" content="website" />
     <meta property="og:url" content="https://hackathon.imphnen.dev/" />

apps/hackathon/src/app/certificate/[certId]/page.tsx

@@ -3,7 +3,8 @@ import { useParams, useNavigate } from 'react-router';
 import { Button } from '@imphnen-frontend-service/ui/atoms';
 import { decodeCertificateId } from '../../../utils/certificate';
 import {
-  useCertificatePublicData,
+  useTeamById,
+  useTeamSubmission,
   useAuthStore,
 } from '@imphnen-frontend-service/service';
 import QRCode from 'qrcode';
@@ -12,7 +13,6 @@ import html2canvas from 'html2canvas';
 interface DecodedCert {
   teamId: string;
   submissionId: string;
-  userId: string;
 }
 
 const CertificatePage: FC = (): ReactElement => {
@@ -41,16 +41,10 @@ const CertificatePage: FC = (): ReactElement => {
     }
   }, [certId]);
 
-  // Fetch certificate data using the new endpoint
-  const { data: certificateData, isLoading: isLoadingCertificate } =
-    useCertificatePublicData(decodedInfo?.userId || '', !!decodedInfo?.userId);
-
   // Generate QR Code
   useEffect(() => {
     if (certId) {
-      // Use encodeURIComponent to properly encode the certId for the URL
+      const certificateUrl = `${window.location.origin}/certificate/${certId}`;
-      const encodedCertId = encodeURIComponent(certId);
-      const certificateUrl = `${window.location.origin}/certificate/${encodedCertId}`;
       QRCode.toDataURL(certificateUrl, {
         width: 200,
         margin: 1,
@@ -64,18 +58,18 @@ const CertificatePage: FC = (): ReactElement => {
     }
   }, [certId]);
 
-  const certificate = certificateData?.data;
+  const { data: teamData, isLoading: isLoadingTeam } = useTeamById(
-  const team = certificate?.team;
+    decodedInfo?.teamId || '',
-  const submission = certificate?.submission;
+    !!decodedInfo?.teamId
-  const certificateUser = certificate?.user;
+  );
+  const { data: submissionData, isLoading: isLoadingSubmission } =
+    useTeamSubmission(decodedInfo?.teamId || '', !!decodedInfo?.teamId);
 
-  const isLoading = (!decodedInfo && !error) || isLoadingCertificate;
+  const team = teamData?.data;
+  const submission = submissionData?.data;
 
-  // Certificate name from the user data
+  const isLoading =
-  const certificateName = certificateUser?.fullname;
+    (!decodedInfo && !error) || isLoadingTeam || isLoadingSubmission;
-
-  // Check if current user is viewing their own certificate (team member)
-  const isTeamMember = session?.user?.id === decodedInfo?.userId;
 
   // Dynamic font sizing: shrink by 2px if height exceeds 80px
   useEffect(() => {
@@ -104,7 +98,7 @@ const CertificatePage: FC = (): ReactElement => {
     }, 0);
 
     return () => clearTimeout(timer);
-  }, [team?.name, certificateName]);
+  }, [team?.name, session?.user?.fullname]);
 
   // Generate certificate canvas screenshot
   useEffect(() => {
@@ -113,22 +107,19 @@ const CertificatePage: FC = (): ReactElement => {
 
       setIsGenerating(true);
       try {
-        // Wait longer for fonts and images to load properly
+        // Wait a bit for fonts and images to load
-        await new Promise((resolve) => setTimeout(resolve, 1500));
+        await new Promise((resolve) => setTimeout(resolve, 500));
 
         const canvas = await html2canvas(certificateRef.current, {
-          scale: 4,
+          scale: 2,
           useCORS: true,
           backgroundColor: '#ffffff',
           logging: false,
           width: 1000,
           height: (1000 * 2480) / 3508,
-          allowTaint: true,
-          imageTimeout: 0,
-          removeContainer: true,
         });
 
-        const imageUrl = canvas.toDataURL('image/png', 1.0);
+        const imageUrl = canvas.toDataURL('image/png');
         setCertificateImage(imageUrl);
         setShowTemplate(false);
       } catch (error) {
@@ -139,7 +130,7 @@ const CertificatePage: FC = (): ReactElement => {
     };
 
     generateCertificate();
-  }, [team, submission, qrCodeUrl]);
+  }, [team, submission, qrCodeUrl, session?.user?.fullname]);
 
   // Download certificate
   const handleDownloadCertificate = () => {
@@ -211,7 +202,7 @@ const CertificatePage: FC = (): ReactElement => {
     );
   }
 
-  if (!certificateUser) {
+  if (!submission || submission.id !== decodedInfo?.submissionId) {
     return (
       <div className="flex flex-col items-center justify-center min-h-screen bg-gray-50 dark:bg-gray-950">
         <div className="text-6xl mb-4">📄</div>
@@ -219,7 +210,7 @@ const CertificatePage: FC = (): ReactElement => {
           Certificate Not Found
         </h2>
         <p className="text-gray-600 dark:text-gray-400 mb-6">
-          The user associated with this certificate could not be found.
+          The submission associated with this certificate could not be found.
         </p>
         <Button onClick={() => navigate('/')}>Back to Home</Button>
       </div>
@@ -287,14 +278,14 @@ const CertificatePage: FC = (): ReactElement => {
                 {team?.name}
               </p>
             </div>
-            {team && isTeamMember && (
+            <Button
-              <Button
+              variant="secondary"
-                variant="secondary"
+              onClick={() =>
-                onClick={() => navigate(`/teams/${team.id}/submission`)}
+                navigate(`/teams/${decodedInfo?.teamId}/submission`)
-              >
+              }
-                Back to Submission
+            >
-              </Button>
+              Back to Submission
-            )}
+            </Button>
           </div>
         </div>
       </div>
@@ -314,30 +305,57 @@ const CertificatePage: FC = (): ReactElement => {
             id="certificate-template"
             style={{
               position: 'relative',
-              backgroundImage: 'url(/images/blank_cert.svg)',
+              backgroundImage: 'url(/images/blank_cert.png)',
               backgroundSize: 'cover',
               backgroundPosition: 'center',
               width: '1000px',
               height: `${(1000 * 2480) / 3508}px`,
             }}
           >
-            {/* Team Name - positioned in middle between "Diberikan Kepada" and "Telah Berpartisipasi" */}
+            {/* User Name (from session) */}
             <div
               style={{
                 position: 'absolute',
-                top: '41%',
+                top: '40%',
-                left: '3.5%',
+                left: '50%',
-                width: '55%',
+                transform: 'translateX(-50%)',
+                width: '80%',
+              }}
+            >
+              <h3
+                ref={userNameRef}
+                style={{
+                  fontWeight: 'bold',
+                  color: '#111827',
+                  textAlign: 'center',
+                  fontSize: userNameFontSize,
+                  lineHeight: '1.2',
+                  wordBreak: 'break-word',
+                  textShadow: '0 1px 2px rgba(0,0,0,0.1)',
+                  margin: 0,
+                }}
+              >
+                {session?.user?.fullname || 'N/A'}
+              </h3>
+            </div>
+
+            {/* Team Name */}
+            <div
+              style={{
+                position: 'absolute',
+                top: '46%',
+                left: '50%',
+                transform: 'translateX(-50%)',
+                width: '70%',
               }}
             >
               <h3
                 ref={teamNameRef}
                 style={{
-                  fontFamily: 'Poppins, sans-serif',
+                  fontWeight: '600',
-                  fontWeight: 'bold',
+                  color: '#1f2937',
-                  color: '#59bef5',
+                  textAlign: 'center',
-                  textAlign: 'left',
+                  fontSize: teamNameFontSize,
-                  fontSize: '32px',
                   lineHeight: '1.2',
                   wordBreak: 'break-word',
                   margin: 0,
@@ -347,53 +365,84 @@ const CertificatePage: FC = (): ReactElement => {
               </h3>
             </div>
 
-            {/* User Name - positioned below team name */}
+            {/* Participation Text */}
             <div
               style={{
                 position: 'absolute',
-                top: '45%',
+                top: '60%',
-                left: '3.5%',
+                left: '50%',
-                width: '55%',
+                transform: 'translateX(-50%)',
+                width: '70%',
               }}
             >
-              <h3
+              <p
-                ref={userNameRef}
                 style={{
-                  fontFamily: 'Poppins, sans-serif',
+                  textAlign: 'center',
-                  fontWeight: 'bold',
+                  color: '#374151',
-                  color: '#59bef5',
+                  fontSize: '18px',
-                  textAlign: 'left',
+                  fontWeight: '500',
-                  fontSize: '40px',
-                  lineHeight: '1.2',
-                  wordBreak: 'break-word',
                   margin: 0,
                 }}
               >
-                {certificateName || 'N/A'}
+                <span style={{ fontWeight: 'bold' }}>
-              </h3>
+                  Peserta Hackathon IMPHNEN x KOLOSAL AI
+                </span>
+              </p>
             </div>
 
-            {/* QR Code - positioned in the white box area */}
+            {/* QR Code */}
             <div
               style={{
                 position: 'absolute',
-                top: '33%',
+                bottom: '8%',
-                right: '9.3%',
+                left: '8%',
-                width: '190px',
-                height: '190px',
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'center',
               }}
             >
               {qrCodeUrl && (
-                <img
+                <div
-                  src={qrCodeUrl}
+                  style={{
-                  alt="Certificate QR Code"
+                    backgroundColor: '#ffffff',
-                  style={{ width: '190px', height: '190px', display: 'block' }}
+                    padding: '8px',
-                />
+                    borderRadius: '4px',
+                    boxShadow: '0 4px 6px rgba(0,0,0,0.1)',
+                  }}
+                >
+                  <img
+                    src={qrCodeUrl}
+                    alt="Certificate QR Code"
+                    style={{ width: '96px', height: '96px' }}
+                  />
+                </div>
               )}
             </div>
+
+            {/* Date */}
+            <div
+              style={{
+                position: 'absolute',
+                bottom: '8%',
+                right: '8%',
+              }}
+            >
+              <p
+                style={{
+                  fontSize: '14px',
+                  color: '#374151',
+                  margin: 0,
+                }}
+              >
+                {submission.submitted_at
+                  ? new Date(submission.submitted_at).toLocaleDateString(
+                      'id-ID',
+                      {
+                        day: 'numeric',
+                        month: 'long',
+                        year: 'numeric',
+                      }
+                    )
+                  : 'N/A'}
+              </p>
+            </div>
           </div>
         </div>
 
@@ -420,35 +469,33 @@ const CertificatePage: FC = (): ReactElement => {
           )}
 
           {/* Actions */}
-          {isTeamMember && (
+          <div className="bg-gray-50 dark:bg-gray-800 p-6 grid grid-cols-2 xl:grid-cols-3 gap-3 justify-center no-print">
-            <div className="bg-gray-50 dark:bg-gray-900 p-6 grid grid-cols-2 xl:grid-cols-3 gap-3 justify-center no-print">
+            <Button
-              <Button
+              variant="secondary"
-                variant="secondary"
+              onClick={handleDownloadCertificate}
-                onClick={handleDownloadCertificate}
+              className="flex items-center gap-2"
-                className="flex items-center gap-2"
+              disabled={isGenerating}
-                disabled={isGenerating}
+            >
-              >
+              {isGenerating ? '⏳ Generating...' : '📥 Download'}
-                {isGenerating ? '⏳ Generating...' : '📥 Download'}
+            </Button>
-              </Button>
+            <Button
-              <Button
+              variant="secondary"
-                variant="secondary"
+              onClick={handlePrintCertificate}
-                onClick={handlePrintCertificate}
+              className="flex items-center gap-2"
-                className="flex items-center gap-2"
+              disabled={isGenerating}
-                disabled={isGenerating}
+            >
-              >
+              {isGenerating ? '⏳ Generating...' : '🖨️ Print'}
-                {isGenerating ? '⏳ Generating...' : '🖨️ Print'}
+            </Button>
-              </Button>
+            <Button
-              {team && (
+              onClick={() =>
-                <Button
+                navigate(`/teams/${decodedInfo?.teamId}/submission`)
-                  onClick={() => navigate(`/teams/${team.id}/submission`)}
+              }
-                  variant="secondary"
+              variant="secondary"
-                  className="col-span-2 flex items-center gap-2 xl:col-span-1"
+              className="col-span-2 flex items-center gap-2 xl:col-span-1"
-                >
+            >
-                  View Submission
+              View Submission
-                </Button>
+            </Button>
-              )}
+          </div>
-            </div>
-          )}
         </div>
 
         {/* Info Box */}

apps/hackathon/src/app/certificate/winner/[certId]/page.tsx

@@ -1,605 +0,0 @@
-import { FC, ReactElement, useEffect, useMemo, useRef, useState } from 'react';
-import { useNavigate, useParams } from 'react-router';
-import { Button } from '@imphnen-frontend-service/ui/atoms';
-import { Icon } from '@iconify/react';
-import { decodeWinnerCertificateId } from '../../../../utils/certificate';
-import {
-  useAuthStore,
-  useMyTeams,
-  useTeamById,
-  useTeamSubmission,
-  useWinners,
-} from '@imphnen-frontend-service/service';
-import QRCode from 'qrcode';
-import html2canvas from 'html2canvas';
-
-type WinnerEntry = {
-  team_id: string;
-  rank: number;
-  team?: {
-    id: string;
-    name: string;
-  };
-};
-
-const formatOrdinalRank = (rank: number): string => {
-  const mod100 = rank % 100;
-  if (mod100 >= 11 && mod100 <= 13) return `${rank}th`;
-
-  switch (rank % 10) {
-    case 1:
-      return `${rank}st`;
-    case 2:
-      return `${rank}nd`;
-    case 3:
-      return `${rank}rd`;
-    default:
-      return `${rank}th`;
-  }
-};
-
-// Keep the template size aligned with the SVG native size (842x595) using an integer multiplier.
-// This reduces sub-pixel scaling artifacts (blur) on thin lines when rasterizing with html2canvas.
-const CERT_WIDTH = 842 * 2;
-const CERT_HEIGHT = 595 * 2;
-
-// Balance between output sharpness and file size.
-// Output resolution will be (CERT_WIDTH * EXPORT_SCALE) x (CERT_HEIGHT * EXPORT_SCALE).
-const EXPORT_SCALE = 2;
-
-// The original layout was tuned around a ~1000px-wide template.
-// We keep the same visual proportions by scaling fixed pixel values.
-const LAYOUT_BASE_WIDTH = 1000;
-const LAYOUT_SCALE = CERT_WIDTH / LAYOUT_BASE_WIDTH;
-const s = (px: number) => Math.round(px * LAYOUT_SCALE);
-
-const CertificateWinnerPage: FC = (): ReactElement => {
-  const { certId } = useParams<{ certId: string }>();
-  const navigate = useNavigate();
-  const { session } = useAuthStore();
-  const { data: myTeamsData } = useMyTeams();
-  const {
-    data: winnersResponse,
-    isLoading: isLoadingWinners,
-    isError: isWinnersError,
-  } = useWinners();
-
-  const [decodedTeamId, setDecodedTeamId] = useState<string>('');
-  const [error, setError] = useState<string | null>(null);
-
-  const [qrCodeUrl, setQrCodeUrl] = useState<string>('');
-  const certificateRef = useRef<HTMLDivElement>(null);
-  const [isGenerating, setIsGenerating] = useState(false);
-  const [certificateImage, setCertificateImage] = useState<string>('');
-  const [showTemplate, setShowTemplate] = useState(true);
-
-  useEffect(() => {
-    if (!certId) return;
-
-    decodeWinnerCertificateId(certId)
-      .then((decoded) => setDecodedTeamId(decoded.teamId))
-      .catch(() => setError('Invalid certificate ID'));
-  }, [certId]);
-
-  const winners = useMemo(
-    () => (winnersResponse?.data || []) as WinnerEntry[],
-    [winnersResponse?.data]
-  );
-  const winnerEntry = useMemo(() => {
-    if (!decodedTeamId) return undefined;
-    return winners.find((w) => w.team_id === decodedTeamId);
-  }, [decodedTeamId, winners]);
-
-  const rankLabel = useMemo(() => {
-    if (!winnerEntry?.rank) return '';
-    return formatOrdinalRank(winnerEntry.rank);
-  }, [winnerEntry?.rank]);
-
-  const { data: teamData, isLoading: isLoadingTeam } = useTeamById(
-    decodedTeamId,
-    !!decodedTeamId
-  );
-
-  const { data: submissionData, isLoading: isLoadingSubmission } =
-    useTeamSubmission(decodedTeamId, !!decodedTeamId);
-
-  const team = teamData?.data;
-  const submission = submissionData?.data;
-  const submissionName = submission?.project_name || '(Submission unavailable)';
-
-  const memberNames = useMemo(() => {
-    const members = team?.members || [];
-    return members
-      .map((m) => m.user?.fullname)
-      .filter((name): name is string => !!name);
-  }, [team?.members]);
-
-  const isWinnerTeam = !!winnerEntry;
-  const isTeamMember =
-    !!session?.user?.id &&
-    !!decodedTeamId &&
-    (myTeamsData?.data || []).some(
-      (t) => (t as { id?: string } | null | undefined)?.id === decodedTeamId
-    );
-
-  // Generate QR Code (public link)
-  useEffect(() => {
-    if (!certId) return;
-
-    const encodedCertId = encodeURIComponent(certId);
-    const certificateUrl = `${window.location.origin}/certificate/winner/${encodedCertId}`;
-
-    QRCode.toDataURL(certificateUrl, {
-      width: s(200),
-      margin: 1,
-      color: {
-        dark: '#000000',
-        light: '#ffffff',
-      },
-    })
-      .then(setQrCodeUrl)
-      .catch((err) => console.error('QR Code generation failed:', err));
-  }, [certId]);
-
-  // Generate certificate canvas screenshot
-  useEffect(() => {
-    const generateCertificate = async () => {
-      if (!certificateRef.current) return;
-      if (!team?.name) return;
-      if (!qrCodeUrl) return;
-      if (!winnerEntry?.rank) return;
-      if (isLoadingSubmission) return;
-
-      setIsGenerating(true);
-      try {
-        setShowTemplate(true);
-        await new Promise((resolve) => setTimeout(resolve, 1500));
-
-        const canvas = await html2canvas(certificateRef.current, {
-          scale: EXPORT_SCALE,
-          useCORS: true,
-          backgroundColor: '#ffffff',
-          logging: false,
-          width: CERT_WIDTH,
-          height: CERT_HEIGHT,
-          allowTaint: true,
-          imageTimeout: 0,
-          removeContainer: true,
-        });
-
-        const imageUrl = canvas.toDataURL('image/png', 1.0);
-        setCertificateImage(imageUrl);
-        setShowTemplate(false);
-      } catch (e) {
-        console.error('Failed to generate certificate:', e);
-      } finally {
-        setIsGenerating(false);
-      }
-    };
-
-    generateCertificate();
-  }, [
-    team?.name,
-    memberNames,
-    qrCodeUrl,
-    winnerEntry?.rank,
-    isLoadingSubmission,
-    submissionName,
-  ]);
-
-  const handleDownloadCertificate = () => {
-    if (!certificateImage) return;
-
-    const link = document.createElement('a');
-    link.href = certificateImage;
-    link.download = `winner-certificate-${team?.name || 'hackathon'}.png`;
-    link.click();
-  };
-
-  const handlePrintCertificate = () => {
-    if (!certificateImage) return;
-
-    const printWindow = window.open('', '_blank');
-    if (!printWindow) return;
-
-    printWindow.document.write(`
-      <html>
-        <head>
-          <title>Certificate - ${team?.name}</title>
-          <style>
-            body { margin: 0; display: flex; justify-content: center; align-items: center; min-height: 100vh; }
-            img { max-width: 100%; height: auto; }
-            @media print {
-              @page { size: A4 landscape; margin: 0; }
-              body { margin: 0; }
-              img { width: 100%; height: auto; }
-            }
-          </style>
-        </head>
-        <body>
-          <img src="${certificateImage}" />
-        </body>
-      </html>
-    `);
-    printWindow.document.close();
-    printWindow.onload = () => {
-      printWindow.print();
-    };
-  };
-
-  if (error || !certId) {
-    return (
-      <div className="flex flex-col items-center justify-center min-h-screen bg-gray-50 dark:bg-gray-950">
-        <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">
-          Invalid Certificate
-        </h2>
-        <p className="text-gray-600 dark:text-gray-400 mb-6">
-          {error || 'The certificate ID is invalid or malformed.'}
-        </p>
-        <Button onClick={() => navigate('/')}>Back to Home</Button>
-      </div>
-    );
-  }
-
-  if (!decodedTeamId || isLoadingTeam) {
-    return (
-      <div className="flex items-center justify-center min-h-screen bg-gray-50 dark:bg-gray-950">
-        <div className="text-center">
-          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto mb-4"></div>
-          <div className="text-gray-600 dark:text-gray-400">
-            Loading certificate...
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  if (isLoadingWinners) {
-    return (
-      <div className="flex items-center justify-center min-h-screen bg-gray-50 dark:bg-gray-950">
-        <div className="text-center">
-          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto mb-4"></div>
-          <div className="text-gray-600 dark:text-gray-400">
-            Loading winners...
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  if (isWinnersError) {
-    return (
-      <div className="flex flex-col items-center justify-center min-h-screen bg-gray-50 dark:bg-gray-950">
-        <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">
-          Unable to Load Winners
-        </h2>
-        <p className="text-gray-600 dark:text-gray-400 mb-6">
-          Please try again later.
-        </p>
-        <Button onClick={() => navigate('/')}>Back to Home</Button>
-      </div>
-    );
-  }
-
-  if (!isWinnerTeam) {
-    return (
-      <div className="flex flex-col items-center justify-center min-h-screen bg-gray-50 dark:bg-gray-950">
-        <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">
-          Certificate Not Found
-        </h2>
-        <p className="text-gray-600 dark:text-gray-400 mb-6">
-          This team is not listed as a hackathon winner.
-        </p>
-        <Button onClick={() => navigate('/')}>Back to Home</Button>
-      </div>
-    );
-  }
-
-  if (!team?.name) {
-    return (
-      <div className="flex flex-col items-center justify-center min-h-screen bg-gray-50 dark:bg-gray-950">
-        <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">
-          Team Not Found
-        </h2>
-        <p className="text-gray-600 dark:text-gray-400 mb-6">
-          The team associated with this certificate could not be loaded.
-        </p>
-        <Button onClick={() => navigate('/')}>Back to Home</Button>
-      </div>
-    );
-  }
-
-  return (
-    <div className="min-h-screen bg-gray-50 dark:bg-gray-950">
-      {/* Header */}
-      <div className="bg-white dark:bg-gray-900 border-b dark:border-gray-700 no-print">
-        <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
-          <div className="flex items-center justify-between">
-            <div>
-              <h1 className="text-3xl font-bold text-gray-900 dark:text-white">
-                Winner Certificate
-              </h1>
-              <p className="text-gray-600 dark:text-gray-400 mt-1">
-                {team.name}
-              </p>
-            </div>
-            {isTeamMember && (
-              <Button
-                variant="secondary"
-                onClick={() => navigate('/dashboard')}
-              >
-                Back to Dashboard
-              </Button>
-            )}
-          </div>
-        </div>
-      </div>
-
-      <div
-        className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-12"
-        id="certificate-wrapper"
-      >
-        {/* Hidden Template for Canvas Generation */}
-        <div
-          className={showTemplate ? 'block' : 'hidden'}
-          style={{ position: 'absolute', left: '-9999px' }}
-        >
-          <div
-            ref={certificateRef}
-            id="certificate-template"
-            style={{
-              position: 'relative',
-              backgroundImage: 'url(/images/blank_winner_cert.svg)',
-              backgroundSize: '100% 100%',
-              backgroundRepeat: 'no-repeat',
-              backgroundPosition: 'center',
-              width: `${CERT_WIDTH}px`,
-              height: `${CERT_HEIGHT}px`,
-            }}
-          >
-            <style>{`
-              #winner-members li::marker {
-                color: #59bef5;
-              }
-            `}</style>
-
-            {/* Team Name */}
-            <div
-              style={{
-                position: 'absolute',
-                top: '35%',
-                left: '3.5%',
-                width: '55%',
-              }}
-            >
-              <h3
-                style={{
-                  fontFamily: 'Poppins, sans-serif',
-                  fontWeight: 'bold',
-                  color: '#59bef5',
-                  textAlign: 'left',
-                  fontSize: `${s(28)}px`,
-                  lineHeight: '1.2',
-                  wordBreak: 'break-word',
-                  margin: 0,
-                }}
-              >
-                {team.name}
-              </h3>
-            </div>
-
-            {/* Members list */}
-            <div
-              style={{
-                position: 'absolute',
-                top: '40.5%',
-                left: '3.5%',
-                width: '55%',
-              }}
-            >
-              <ul
-                id="winner-members"
-                style={{
-                  margin: 0,
-                  fontFamily: 'Poppins, sans-serif',
-                  fontSize: `${s(18)}px`,
-                  lineHeight: '1.35',
-                  color: '#59bef5',
-                }}
-              >
-                {(memberNames.length
-                  ? memberNames
-                  : ['(Members unavailable)']
-                ).map((name) => (
-                  <li key={name}>• {name}</li>
-                ))}
-              </ul>
-            </div>
-
-            {/* Award text */}
-            <div
-              style={{
-                position: 'absolute',
-                top: '60%',
-                left: '3.5%',
-                width: '60%',
-              }}
-            >
-              <p
-                style={{
-                  margin: 0,
-                  fontFamily: 'Poppins, sans-serif',
-                  fontSize: `${s(18)}px`,
-                  lineHeight: '1.35',
-                  color: '#6B6B6B',
-                }}
-              >
-                Diberikan sebagai penghargaan atas pencapaian meraih
-                <br />
-                <b>JUARA {winnerEntry.rank}</b> pada Hackathon IMPHNEN x
-                Kolosal.ai
-                <br />
-                <span>
-                  dengan nama project: <b>{submissionName}</b>
-                </span>
-              </p>
-            </div>
-
-            {/* Rank badge */}
-            {!!rankLabel && (
-              <div
-                style={{
-                  position: 'absolute',
-                  top: '8%',
-                  right: '8.5%',
-                  width: `${s(190)}px`,
-                  display: 'flex',
-                  justifyContent: 'center',
-                }}
-              >
-                <div
-                  style={{
-                    display: 'inline-flex',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                    padding: `${s(6)}px ${s(16)}px`,
-                    textAlign: 'center',
-                    fontFamily: 'Poppins, sans-serif',
-                    fontWeight: 700,
-                    color: '#78350F',
-                    fontSize: `${s(24)}px`,
-                    lineHeight: '1',
-                  }}
-                >
-                  {rankLabel}
-                </div>
-              </div>
-            )}
-
-            {/* QR Code (same placement as existing certificate page) */}
-            <div
-              style={{
-                position: 'absolute',
-                top: '33%',
-                right: '9.3%',
-                width: `${s(190)}px`,
-                height: `${s(190)}px`,
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-              }}
-            >
-              {qrCodeUrl && (
-                <img
-                  src={qrCodeUrl}
-                  alt="Certificate QR Code"
-                  style={{
-                    width: `${s(190)}px`,
-                    height: `${s(190)}px`,
-                    display: 'block',
-                  }}
-                />
-              )}
-            </div>
-          </div>
-        </div>
-
-        {/* Display Certificate Image */}
-        <div className="bg-white dark:bg-gray-900 rounded-lg shadow-xl dark:shadow-gray-950/50 overflow-hidden p-2">
-          {isGenerating && (
-            <div className="flex items-center justify-center p-12">
-              <div className="text-center">
-                <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto mb-4"></div>
-                <div className="text-gray-600 dark:text-gray-400">
-                  Generating certificate...
-                </div>
-              </div>
-            </div>
-          )}
-
-          {certificateImage && !isGenerating && (
-            <img
-              src={certificateImage}
-              alt="Winner Certificate"
-              className="w-full h-auto"
-              style={{ maxWidth: '100%', height: 'auto' }}
-            />
-          )}
-
-          {/* Actions */}
-          {isTeamMember && (
-            <div className="bg-gray-50 dark:bg-gray-900 p-6 grid grid-cols-2 xl:grid-cols-3 gap-3 justify-center no-print">
-              <Button
-                variant="secondary"
-                onClick={handleDownloadCertificate}
-                className="flex items-center gap-2"
-                disabled={isGenerating}
-              >
-                {isGenerating ? (
-                  <>
-                    <Icon
-                      icon="svg-spinners:ring-resize"
-                      width="18"
-                      height="18"
-                    />
-                    Generating...
-                  </>
-                ) : (
-                  <>
-                    <Icon
-                      icon="heroicons:arrow-down-tray"
-                      width="18"
-                      height="18"
-                    />
-                    Download
-                  </>
-                )}
-              </Button>
-              <Button
-                variant="secondary"
-                onClick={handlePrintCertificate}
-                className="flex items-center gap-2"
-                disabled={isGenerating}
-              >
-                {isGenerating ? (
-                  <>
-                    <Icon
-                      icon="svg-spinners:ring-resize"
-                      width="18"
-                      height="18"
-                    />
-                    Generating...
-                  </>
-                ) : (
-                  <>
-                    <Icon icon="mdi:printer" width="18" height="18" />
-                    Print
-                  </>
-                )}
-              </Button>
-              <Button
-                onClick={() => navigate('/dashboard')}
-                variant="secondary"
-                className="col-span-2 flex items-center gap-2 xl:col-span-1"
-              >
-                Back to Dashboard
-              </Button>
-            </div>
-          )}
-        </div>
-
-        {/* Info Box */}
-        <div className="mt-8 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-6 no-print">
-          <h3 className="font-bold text-blue-900 dark:text-blue-100 mb-2">
-            Certificate Information
-          </h3>
-          <p className="text-sm text-blue-800 dark:text-blue-200">
-            This certificate is a digital record of your hackathon achievement.
-          </p>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default CertificateWinnerPage;

apps/hackathon/src/app/dashboard/page.tsx

@@ -1,17 +1,15 @@
-import { FC, ReactElement, useEffect, useMemo, useState } from 'react';
+import { FC, ReactElement, useEffect, useState } from 'react';
-import { Link, useNavigate } from 'react-router';
+import { Link } from 'react-router';
 import {
   useMyTeams,
   useMyInvitations,
   useRespondToInvitation,
   useAuthStore,
-  useWinners,
 } from '@imphnen-frontend-service/service';
 import { toast } from 'sonner';
 import { Button } from '@imphnen-frontend-service/ui/atoms';
 import { Icon } from '@iconify/react';
 import ProfilePage from '../profile/page';
-import { encodeWinnerCertificateId } from '../../utils/certificate';
 
 // Team features deadline: 2025-11-30 23:59:00 WIB (UTC+7)
 const TEAM_FEATURES_DEADLINE = new Date('2025-11-30T16:59:00Z');
@@ -41,7 +39,6 @@ type Invitation = {
 
 const DashboardPage: FC = (): ReactElement => {
   const { session } = useAuthStore();
-  const navigate = useNavigate();
   const [showProfileModal, setShowProfileModal] = useState(false);
   const [timeLeft, setTimeLeft] = useState<{
     days: number;
@@ -94,7 +91,6 @@ const DashboardPage: FC = (): ReactElement => {
     }
   }, [showProfileModal]);
   const { data: teamsData } = useMyTeams();
-  const { data: winnersResponse } = useWinners();
   const { data: invitationsData } = useMyInvitations();
   const { mutateAsync: respondToInvitation } = useRespondToInvitation();
 
@@ -103,13 +99,6 @@ const DashboardPage: FC = (): ReactElement => {
   const invitations: Invitation[] = (invitationsData?.data ||
     []) as Invitation[];
 
-  const winnerEntry = useMemo(() => {
-    const team = (myTeams[0] as { id?: string } | null | undefined) || null;
-    const winners = winnersResponse?.data || [];
-    if (!team?.id) return null;
-    return winners.find((w) => w.team_id === team.id) || null;
-  }, [myTeams, winnersResponse?.data]);
-
   const handleAcceptInvitation = async (invitationId: string) => {
     try {
       await respondToInvitation({ invitationId, action: 'accept' });
@@ -145,37 +134,6 @@ const DashboardPage: FC = (): ReactElement => {
           )}
         </div>
 
-        {/* Winner Banner */}
-        {winnerEntry && myTeams.length > 0 && (
-          <div className="mb-8 bg-amber-50 dark:bg-amber-900/20 border-2 border-amber-400 dark:border-amber-500 rounded-lg p-6">
-            <div className="flex items-center justify-between flex-wrap gap-4">
-              <div className="flex items-center space-x-3 flex-1 min-w-0">
-                <span className="text-4xl shrink-0">🏆</span>
-                <div className="min-w-0">
-                  <h3 className="font-bold text-amber-900 dark:text-amber-100 text-lg">
-                    Selamat! Tim Anda meraih JUARA {winnerEntry.rank}
-                  </h3>
-                  <p className="text-amber-700 dark:text-amber-300 text-sm">
-                    Anda dapat generate sertifikat penghargaan dan
-                    membagikannya.
-                  </p>
-                </div>
-              </div>
-              <button
-                onClick={async () => {
-                  const team = myTeams[0] as { id?: string } | null | undefined;
-                  if (!team?.id) return;
-                  const certId = await encodeWinnerCertificateId(team.id);
-                  navigate(`/certificate/winner/${encodeURIComponent(certId)}`);
-                }}
-                className="shrink-0 px-6 py-2 bg-amber-600 hover:bg-amber-700 dark:bg-amber-600 dark:hover:bg-amber-700 text-white font-medium rounded-lg transition-colors cursor-pointer"
-              >
-                Generate Sertifikat Juara
-              </button>
-            </div>
-          </div>
-        )}
-
         {/* Countdown Timer */}
         {timeLeft && !isSubmissionDeadlinePassed && (
           <div className="mb-8 bg-blue-50 dark:bg-blue-900/20 border-2 border-blue-500 rounded-lg p-6">
@@ -236,8 +194,7 @@ const DashboardPage: FC = (): ReactElement => {
               <div className="mb-4 bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 rounded-lg p-3">
                 <p className="text-sm text-amber-700 dark:text-amber-300 flex items-center gap-2">
                   <Icon icon="mdi:clock-alert" className="text-lg shrink-0" />
-                  Team features are closed. You can no longer accept
+                  Team features are closed. You can no longer accept invitations.
-                  invitations.
                 </p>
               </div>
             )}
@@ -306,10 +263,7 @@ const DashboardPage: FC = (): ReactElement => {
                         />
                       ) : (
                         <div className="w-16 h-16 rounded-full bg-gray-200 dark:bg-gray-700 flex items-center justify-center shrink-0">
-                          <Icon
+                          <Icon icon="mdi:account-group" className="text-gray-500 dark:text-gray-400 text-2xl" />
-                            icon="mdi:account-group"
-                            className="text-gray-500 dark:text-gray-400 text-2xl"
-                          />
                         </div>
                       )}
                       <div className="flex-1 min-w-0">
@@ -319,33 +273,19 @@ const DashboardPage: FC = (): ReactElement => {
                         <div className="text-sm text-gray-600 dark:text-gray-400 flex items-center gap-3 font-sans mt-2">
                           {team.has_submission && (
                             <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs font-medium bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400 shrink-0">
-                              <Icon
+                              <Icon icon="mdi:check-circle" className="text-sm" />
-                                icon="mdi:check-circle"
-                                className="text-sm"
-                              />
                               Submitted
                             </span>
                           )}
                           {team.city && (
                             <span className="flex items-center gap-1 truncate">
-                              <Icon
+                              <Icon icon="mdi:map-marker" className="shrink-0" />
-                                icon="mdi:map-marker"
-                                className="shrink-0"
-                              />
                               <span className="truncate">{team.city}</span>
                             </span>
                           )}
                           <span className="flex items-center gap-1 shrink-0">
                             <Icon icon="mdi:account-group" />
-                            {team.member_count ||
+                            {team.member_count || team.members?.length || 0} member{(team.member_count || team.members?.length || 0) !== 1 ? 's' : ''}
-                              team.members?.length ||
-                              0}{' '}
-                            member
-                            {(team.member_count ||
-                              team.members?.length ||
-                              0) !== 1
-                              ? 's'
-                              : ''}
                           </span>
                         </div>
                       </div>

apps/hackathon/src/app/layout.tsx

@@ -52,12 +52,6 @@ export default function RootLayout() {
         return;
       }
 
-      // Certificate page - allow public access
-      if (pathname.startsWith('/certificate/')) {
-        setIsChecking(false);
-        return;
-      }
-
       // Require authentication for all other routes
       if (!session) {
         navigate('/auth/login', { replace: true });

apps/hackathon/src/app/page.tsx

@@ -554,7 +554,7 @@ export default function HomePage() {
             {/* Judge 2 */}
             <div className="flex flex-col justify-between bg-white dark:bg-gray-800 rounded-xl px-4 py-8 shadow-lg text-center">
               <h3 className="text-p3 font-bold mb-1 dark:text-white">
-                Muhammad Alif Ramadhan
+                Anka Tama
               </h3>
               <div>
                 <p className="text-primary-500 font-semibold mb-1">Admin</p>

apps/hackathon/src/app/teams/[teamId]/submission/page.tsx

@@ -1,13 +1,12 @@
 import { FC, ReactElement } from 'react';
 import { Button } from '@imphnen-frontend-service/ui/atoms';
 import { useNavigate, useParams } from 'react-router';
-import { useTeamById, useTeamSubmission, useAuthStore } from '@imphnen-frontend-service/service';
+import { useTeamById, useTeamSubmission } from '@imphnen-frontend-service/service';
 import { encodeCertificateId } from '../../../../utils/certificate';
 
 const SubmissionViewPage: FC = (): ReactElement => {
   const { teamId } = useParams<{ teamId: string }>();
   const navigate = useNavigate();
-  const { session } = useAuthStore();
 
   const { data: teamData } = useTeamById(teamId || '');
   const { data: submissionData, isLoading } = useTeamSubmission(teamId || '', !!teamId);
@@ -114,17 +113,13 @@ const SubmissionViewPage: FC = (): ReactElement => {
                     View Your Certificate
                   </h3>
                   <p className="text-amber-700 dark:text-amber-300 text-sm">
-                    Congratulations! Your personalized certificate is ready to download and share.
+                    Congratulations! Your certificate is ready to download and share.
                   </p>
                 </div>
               </div>
               <button
                 onClick={async () => {
-                  const certId = await encodeCertificateId(
+                  const certId = await encodeCertificateId(teamId || '', submission.id);
-                    teamId || '',
-                    submission.id,
-                    session?.user?.id || ''
-                  );
                   navigate(`/certificate/${encodeURIComponent(certId)}`);
                 }}
                 className="shrink-0 px-6 py-2 bg-amber-600 hover:bg-amber-700 dark:bg-amber-600 dark:hover:bg-amber-700 text-white font-medium rounded-lg transition-colors"

apps/hackathon/src/utils/certificate.ts

@@ -3,69 +3,27 @@ import { decryptText, encryptText } from "./aesclient";
 const SECRET_KEY = 'imphnen-hackathon-2025';
 
 /**
- * Encode teamId, submissionId, and userId into a certificate ID
+ * Encode teamId and submissionId into a certificate ID
- * Uses AES encryption for secure encoding
+ * Uses base64 encoding for simple obfuscation
  * @param teamId - The team ID
  * @param submissionId - The submission ID
- * @param userId - The user ID (team member)
  * @returns Encoded certificate ID
  */
-export const encodeCertificateId = async (teamId: string, submissionId: string, userId: string): Promise<string> => {
+export const encodeCertificateId = async (teamId: string, submissionId: string): Promise<string> => {
-  const combined = `${teamId}::${submissionId}::${userId}`;
+  const combined = `${teamId}::${submissionId}`;
   return encryptText(combined, SECRET_KEY);
 };
 
 /**
- * Encode winner certificate ID (team-based)
+ * Decode certificate ID back to teamId and submissionId
- * @param teamId - Winner team ID
- * @returns Encoded winner certificate ID
- */
-export const encodeWinnerCertificateId = async (teamId: string): Promise<string> => {
-  const combined = `winner::${teamId}`;
-  return encryptText(combined, SECRET_KEY);
-};
-
-/**
- * Decode certificate ID back to teamId, submissionId, and userId
  * @param certId - The encoded certificate ID
- * @returns Object containing teamId, submissionId, and userId
+ * @returns Object containing teamId and submissionId
  */
-export const decodeCertificateId = async (certId: string): Promise<{ teamId: string; submissionId: string; userId: string }> => {
+export const decodeCertificateId = async (certId: string): Promise<{ teamId: string; submissionId: string }> => {
   try {
     const decoded = await decryptText(certId, SECRET_KEY);
-    const parts = decoded.split('::');
+    const [teamId, submissionId] = decoded.split('::');
-
+    return { teamId, submissionId };
-    // Handle both old format (teamId::submissionId) and new format (teamId::submissionId::userId)
-    if (parts.length === 2) {
-      const [teamId, submissionId] = parts;
-      return { teamId, submissionId, userId: '' };
-    } else if (parts.length === 3) {
-      const [teamId, submissionId, userId] = parts;
-      return { teamId, submissionId, userId };
-    }
-
-    throw new Error('Invalid certificate format');
-  } catch {
-    throw new Error('Invalid certificate ID');
-  }
-};
-
-/**
- * Decode winner certificate ID back to teamId
- * @param certId - The encoded winner certificate ID
- * @returns Object containing teamId
- */
-export const decodeWinnerCertificateId = async (certId: string): Promise<{ teamId: string }> => {
-  try {
-    const decoded = await decryptText(certId, SECRET_KEY);
-    const parts = decoded.split('::');
-
-    // winner::teamId
-    if (parts.length === 2 && parts[0] === 'winner') {
-      return { teamId: parts[1] };
-    }
-
-    throw new Error('Invalid winner certificate format');
   } catch {
     throw new Error('Invalid certificate ID');
   }

apps/infra/eslint.config.mjs

@@ -1,3 +0,0 @@
-import baseConfig from '../../eslint.config.mjs';
-
-export default [...baseConfig];

apps/infra/index.html

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

apps/infra/postcss.config.mjs

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

apps/infra/project.json

@@ -1,8 +0,0 @@
-{
-  "name": "infra",
-  "$schema": "../../node_modules/nx/schemas/project-schema.json",
-  "sourceRoot": "apps/infra/src",
-  "projectType": "application",
-  "tags": [],
-  "targets": {}
-}

apps/infra/src/app/App.tsx

@@ -1,248 +0,0 @@
-const apps = [
-  { name: 'Landing', domain: 'imphnen.dev', type: 'Next.js', color: 'blue' },
-  { name: 'WWW', domain: 'www.imphnen.dev', type: 'Redirect', color: 'purple' },
-  { name: 'Gacha', domain: 'gacha.imphnen.dev', type: 'Vite', color: 'green' },
-  { name: 'Backoffice', domain: 'backoffice.imphnen.dev', type: 'Vite', color: 'green' },
-  { name: 'Dimentorin', domain: 'dimentorin.imphnen.dev', type: 'Vite', color: 'green' },
-  { name: 'Hackathon', domain: 'hackathon.imphnen.dev', type: 'Vite', color: 'green' },
-  { name: 'QR Campaign', domain: 'qr.imphnen.dev', type: 'Vite', color: 'green' },
-  { name: 'Infra', domain: 'infra.imphnen.dev', type: 'Vite', color: 'green' },
-  { name: 'API QR', domain: 'api-qr.imphnen.dev', type: 'Backend', color: 'orange' },
-];
-
-const techStack = [
-  { category: 'OS', items: ['NixOS 25.05'] },
-  { category: 'Web Server', items: ['Nginx'] },
-  { category: 'SSL', items: ['Let\'s Encrypt (ACME)'] },
-  { category: 'Build', items: ['Nix Flakes', 'Nx Monorepo'] },
-  { category: 'CI/CD', items: ['GitHub Actions', 'Cachix'] },
-  { category: 'Frontend', items: ['React', 'Next.js', 'Vite', 'TailwindCSS'] },
-  { category: 'Backend', items: ['Go', 'Supabase'] },
-  { category: 'Secrets', items: ['sops-nix'] },
-];
-
-export default function App() {
-  return (
-    <div className="min-h-screen bg-[#0a0a0a]">
-      {/* Header */}
-      <header className="border-b border-zinc-800 bg-[#0a0a0a]/80 backdrop-blur-sm sticky top-0 z-50">
-        <div className="container mx-auto px-6 py-4">
-          <div className="flex items-center justify-between">
-            <div className="flex items-center gap-3">
-              <div className="w-8 h-8 bg-blue-500 rounded-lg flex items-center justify-center font-bold">
-                I
-              </div>
-              <span className="text-xl font-semibold">IMPHNEN Infrastructure</span>
-            </div>
-            <a
-              href="https://github.com/IMPHNEN"
-              target="_blank"
-              rel="noopener noreferrer"
-              className="text-zinc-400 hover:text-white transition-colors"
-            >
-              GitHub
-            </a>
-          </div>
-        </div>
-      </header>
-
-      <main className="container mx-auto px-6 py-12">
-        {/* Hero */}
-        <section className="text-center mb-16">
-          <h1 className="text-4xl md:text-5xl font-bold mb-4">
-            Infrastructure Overview
-          </h1>
-          <p className="text-zinc-400 text-lg max-w-2xl mx-auto">
-            Declarative NixOS infrastructure powering IMPHNEN's frontend applications
-            on Hetzner Cloud.
-          </p>
-        </section>
-
-        {/* Architecture Diagram */}
-        <section className="mb-16">
-          <h2 className="text-2xl font-semibold mb-6">Architecture</h2>
-          <div className="card bg-[#141414] border-zinc-800 p-8">
-            <div className="flex flex-col items-center gap-6">
-              {/* Internet */}
-              <div className="flex items-center gap-2 text-zinc-400">
-                <span className="text-2xl">🌐</span>
-                <span>Internet</span>
-              </div>
-              <div className="w-px h-8 bg-zinc-700" />
-
-              {/* Cloudflare */}
-              <div className="card bg-orange-500/10 border-orange-500/30 px-6 py-3">
-                <span className="badge badge-orange">Cloudflare</span>
-                <p className="text-sm text-zinc-400 mt-1">DNS + CDN + DDoS Protection</p>
-              </div>
-              <div className="w-px h-8 bg-zinc-700" />
-
-              {/* Hetzner VPS */}
-              <div className="card bg-[#1a1a1a] border-zinc-700 w-full max-w-3xl">
-                <div className="text-center mb-4">
-                  <span className="badge badge-purple">Hetzner Cloud VPS</span>
-                  <p className="text-sm text-zinc-400 mt-1">NixOS | 167.235.70.37</p>
-                </div>
-
-                {/* Nginx */}
-                <div className="card bg-green-500/10 border-green-500/30 mb-4">
-                  <div className="text-center">
-                    <span className="badge badge-green">Nginx</span>
-                    <p className="text-sm text-zinc-400 mt-1">Reverse Proxy + Static Files + SSL Termination</p>
-                  </div>
-                </div>
-
-                {/* Apps Grid */}
-                <div className="grid grid-cols-2 md:grid-cols-3 gap-3">
-                  {apps.map((app) => (
-                    <div
-                      key={app.name}
-                      className="card bg-[#0a0a0a] border-zinc-800 text-center p-3"
-                    >
-                      <p className="font-medium text-sm">{app.name}</p>
-                      <p className="text-xs text-zinc-500">{app.domain}</p>
-                      <span className={`badge badge-${app.color} mt-2 text-xs`}>
-                        {app.type}
-                      </span>
-                    </div>
-                  ))}
-                </div>
-              </div>
-            </div>
-          </div>
-        </section>
-
-        {/* Deployed Apps */}
-        <section className="mb-16">
-          <h2 className="text-2xl font-semibold mb-6">Deployed Applications</h2>
-          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-4">
-            {apps.map((app) => (
-              <a
-                key={app.name}
-                href={`https://${app.domain}`}
-                target="_blank"
-                rel="noopener noreferrer"
-                className="card bg-[#141414] border-zinc-800 hover:border-zinc-600 transition-colors group"
-              >
-                <div className="flex items-start justify-between">
-                  <div>
-                    <h3 className="font-semibold group-hover:text-blue-400 transition-colors">
-                      {app.name}
-                    </h3>
-                    <p className="text-sm text-zinc-500">{app.domain}</p>
-                  </div>
-                  <span className={`badge badge-${app.color}`}>{app.type}</span>
-                </div>
-              </a>
-            ))}
-          </div>
-        </section>
-
-        {/* Tech Stack */}
-        <section className="mb-16">
-          <h2 className="text-2xl font-semibold mb-6">Technology Stack</h2>
-          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-4">
-            {techStack.map((tech) => (
-              <div key={tech.category} className="card bg-[#141414] border-zinc-800">
-                <h3 className="text-sm text-zinc-500 uppercase tracking-wider mb-2">
-                  {tech.category}
-                </h3>
-                <div className="flex flex-wrap gap-2">
-                  {tech.items.map((item) => (
-                    <span key={item} className="badge badge-blue">
-                      {item}
-                    </span>
-                  ))}
-                </div>
-              </div>
-            ))}
-          </div>
-        </section>
-
-        {/* Deployment Flow */}
-        <section className="mb-16">
-          <h2 className="text-2xl font-semibold mb-6">Deployment Flow</h2>
-          <div className="card bg-[#141414] border-zinc-800">
-            <div className="flex flex-col md:flex-row items-center justify-between gap-4">
-              <div className="text-center">
-                <div className="w-12 h-12 bg-zinc-800 rounded-full flex items-center justify-center mx-auto mb-2">
-                  <span>1</span>
-                </div>
-                <p className="text-sm font-medium">Push to GitHub</p>
-                <p className="text-xs text-zinc-500">develop branch</p>
-              </div>
-              <div className="hidden md:block text-zinc-600">→</div>
-              <div className="text-center">
-                <div className="w-12 h-12 bg-zinc-800 rounded-full flex items-center justify-center mx-auto mb-2">
-                  <span>2</span>
-                </div>
-                <p className="text-sm font-medium">GitHub Actions</p>
-                <p className="text-xs text-zinc-500">nix build</p>
-              </div>
-              <div className="hidden md:block text-zinc-600">→</div>
-              <div className="text-center">
-                <div className="w-12 h-12 bg-orange-500 rounded-full flex items-center justify-center mx-auto mb-2">
-                  <span>3</span>
-                </div>
-                <p className="text-sm font-medium">Push to Cachix</p>
-                <p className="text-xs text-zinc-500">binary cache</p>
-              </div>
-              <div className="hidden md:block text-zinc-600">→</div>
-              <div className="text-center">
-                <div className="w-12 h-12 bg-zinc-800 rounded-full flex items-center justify-center mx-auto mb-2">
-                  <span>4</span>
-                </div>
-                <p className="text-sm font-medium">Server Pull</p>
-                <p className="text-xs text-zinc-500">nixos-rebuild</p>
-              </div>
-              <div className="hidden md:block text-zinc-600">→</div>
-              <div className="text-center">
-                <div className="w-12 h-12 bg-blue-500 rounded-full flex items-center justify-center mx-auto mb-2">
-                  <span>✓</span>
-                </div>
-                <p className="text-sm font-medium">Live</p>
-                <p className="text-xs text-zinc-500">Zero downtime</p>
-              </div>
-            </div>
-          </div>
-        </section>
-
-        {/* Repositories */}
-        <section>
-          <h2 className="text-2xl font-semibold mb-6">Repositories</h2>
-          <div className="grid md:grid-cols-2 gap-4">
-            <a
-              href="https://github.com/IMPHNEN/imphnen-frontend-service"
-              target="_blank"
-              rel="noopener noreferrer"
-              className="card bg-[#141414] border-zinc-800 hover:border-zinc-600 transition-colors"
-            >
-              <h3 className="font-semibold mb-1">imphnen-frontend-service</h3>
-              <p className="text-sm text-zinc-400">
-                Nx monorepo containing all frontend applications
-              </p>
-            </a>
-            <a
-              href="https://github.com/IMPHNEN/imphnen-infrastructure"
-              target="_blank"
-              rel="noopener noreferrer"
-              className="card bg-[#141414] border-zinc-800 hover:border-zinc-600 transition-colors"
-            >
-              <h3 className="font-semibold mb-1">imphnen-infrastructure</h3>
-              <p className="text-sm text-zinc-400">
-                NixOS flake configuration for server deployment
-              </p>
-            </a>
-          </div>
-        </section>
-      </main>
-
-      {/* Footer */}
-      <footer className="border-t border-zinc-800 mt-16">
-        <div className="container mx-auto px-6 py-8 text-center text-zinc-500 text-sm">
-          <p>IMPHNEN Infrastructure &copy; {new Date().getFullYear()}</p>
-        </div>
-      </footer>
-    </div>
-  );
-}

apps/infra/src/index.css

@@ -1,58 +0,0 @@
-@import 'tailwindcss';
-
-@theme {
-  --color-primary: #3b82f6;
-  --color-primary-hover: #2563eb;
-}
-
-@layer base {
-  * {
-    box-sizing: border-box;
-    margin: 0;
-    padding: 0;
-  }
-
-  body {
-    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-    background-color: #0a0a0a;
-    color: #ffffff;
-    line-height: 1.6;
-  }
-}
-
-@layer components {
-  .card {
-    background: #141414;
-    border: 1px solid #27272a;
-    border-radius: 12px;
-    padding: 1.5rem;
-  }
-
-  .badge {
-    display: inline-block;
-    padding: 0.25rem 0.75rem;
-    border-radius: 9999px;
-    font-size: 0.75rem;
-    font-weight: 500;
-  }
-
-  .badge-blue {
-    background: rgba(59, 130, 246, 0.2);
-    color: #60a5fa;
-  }
-
-  .badge-green {
-    background: rgba(34, 197, 94, 0.2);
-    color: #4ade80;
-  }
-
-  .badge-purple {
-    background: rgba(168, 85, 247, 0.2);
-    color: #c084fc;
-  }
-
-  .badge-orange {
-    background: rgba(249, 115, 22, 0.2);
-    color: #fb923c;
-  }
-}

apps/infra/src/main.tsx

@@ -1,14 +0,0 @@
-import { createRoot } from 'react-dom/client';
-import { StrictMode } from 'react';
-import App from './app/App';
-import './index.css';
-
-const rootElement = document.getElementById('root');
-
-if (!rootElement) throw new Error('Failed to find the root element');
-
-createRoot(rootElement).render(
-  <StrictMode>
-    <App />
-  </StrictMode>
-);

apps/infra/tsconfig.app.json

@@ -1,9 +0,0 @@
-{
-  "extends": "./tsconfig.json",
-  "compilerOptions": {
-    "outDir": "../../dist/out-tsc",
-    "types": ["node", "vite/client"]
-  },
-  "exclude": ["src/**/*.spec.ts", "src/**/*.test.ts", "src/**/*.spec.tsx", "src/**/*.test.tsx"],
-  "include": ["src/**/*.js", "src/**/*.jsx", "src/**/*.ts", "src/**/*.tsx"]
-}

apps/infra/tsconfig.json

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

apps/infra/vite.config.ts

@@ -1,27 +0,0 @@
-/// <reference types='vitest' />
-import { defineConfig } from 'vite';
-import react from '@vitejs/plugin-react';
-import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin';
-import { nxCopyAssetsPlugin } from '@nx/vite/plugins/nx-copy-assets.plugin';
-
-export default defineConfig(() => ({
-  root: __dirname,
-  cacheDir: '../../node_modules/.vite/apps/infra',
-  server: {
-    port: 3006,
-    host: 'localhost',
-  },
-  preview: {
-    port: 3007,
-    host: 'localhost',
-  },
-  plugins: [react(), nxViteTsPaths(), nxCopyAssetsPlugin(['*.md'])],
-  build: {
-    outDir: '../../dist/apps/infra',
-    emptyOutDir: true,
-    reportCompressedSize: true,
-    commonjsOptions: {
-      transformMixedEsModules: true,
-    },
-  },
-}));

apps/landing/src/app/(public)/(home)/_components/community-section.tsx

@@ -6,7 +6,6 @@ import { useRef } from 'react';
 import {
   FaArrowRight,
   FaDiscord,
-  FaGithub,
   FaFacebook,
   FaInstagram,
   FaLinkedin,
@@ -46,8 +45,6 @@ export function CommunitySection() {
         return FaFacebook;
       case 'FaDiscord':
         return FaDiscord;
-      case 'FaGithub':
-        return FaGithub;
       case 'FaInstagram':
         return FaInstagram;
       case 'FaTiktok':
@@ -69,10 +66,6 @@ export function CommunitySection() {
         return {
           iconColor: 'text-[#5865F2]',
         };
-      case 'FaGithub':
-        return {
-          iconColor: 'text-[#000000]',
-        };
       case 'FaInstagram':
         return {
           iconColor: 'text-[#E4405F]',

apps/landing/src/app/(public)/(home)/_components/cta-section.tsx

@@ -78,7 +78,7 @@ export function CTASection() {
                 <div className="flex flex-col items-center gap-6 text-white">
                   <LogoSimple className="w-[240px]" />
                   <div className="text-center space-y-2">
-                    <h3 className="text-2xl font-bold">250.000+</h3>
+                    <h3 className="text-2xl font-bold">180.000+</h3>
                     <p className="text-lg">Programmer Sudah Bergabung</p>
                   </div>
                 </div>

apps/landing/src/app/(public)/(home)/_components/hero-section.tsx

@@ -54,19 +54,9 @@ export function HeroSection() {
             animate={{ opacity: 1, y: 0 }}
             transition={{ duration: 0.5 }}
           >
-            <div className="flex flex-wrap items-center gap-2">
+            <span className="inline-flex items-center rounded-full border px-3 py-1 text-sm w-fit">
-              <span className="inline-flex items-center rounded-full border px-3 py-1 text-sm">
+              {communityLabel}
-                {communityLabel}
+            </span>
-              </span>
-              <a
-                href="https://ancikri.com"
-                target="_blank"
-                rel="noopener noreferrer"
-                className="inline-flex items-center rounded-full border px-3 py-1 text-sm hover:bg-muted transition-colors"
-              >
-                Powered By Ancikri
-              </a>
-            </div>
 
             <div className="space-y-4">
               <h1 className="text-4xl md:text-5xl lg:text-6xl xl:text-7xl font-bold tracking-tighter bg-clip-text text-transparent bg-gradient-to-r from-foreground via-foreground to-foreground/70">

apps/landing/src/app/(public)/_components/footer.tsx

@@ -5,7 +5,6 @@ import Link from 'next/link';
 import {
   FaDiscord,
   FaFacebook,
-  FaGithub,
   FaInstagram,
   FaLinkedinIn,
   FaTiktok,
@@ -38,13 +37,6 @@ export default function Footer() {
               >
                 <FaDiscord className="size-6" />
               </Link>
-              <Link
-                href="https://github.com/IMPHNEN/"
-                className="text-muted-foreground hover:text-foreground"
-                target="_blank"
-              >
-                <FaGithub className="size-6" />
-              </Link>
               <Link
                 href="https://www.instagram.com/imphnen.dev"
                 className="text-muted-foreground hover:text-foreground"
@@ -100,25 +92,15 @@ export default function Footer() {
             </ul>
           </div>
           <div className="space-y-4">
-            <h3 className="text-lg font-bold">Partners</h3>
+            <h3 className="text-lg font-bold">Patners</h3>
             <ul className="space-y-2"></ul>
           </div>
         </div>
-        <div className="mt-8 border-t pt-8 text-center space-y-2">
+        <div className="mt-8 border-t pt-8 text-center">
           <p className="text-xs text-muted-foreground">
             © {new Date().getFullYear()} IMPHNEN - Ingin Menjadi Programmer
             Handal, Namun Enggan Ngoding. All rights reserved.
           </p>
-          <p className="text-xs text-muted-foreground">
-            Powered by{' '}
-            <Link
-              href="https://ancikri.com"
-              target="_blank"
-              className="font-medium text-foreground hover:underline"
-            >
-              Ancikri
-            </Link>
-          </p>
         </div>
       </div>
     </footer>

apps/landing/src/data/hero-stats.json

@@ -1,5 +1,5 @@
 [
-  { "value": "250K+", "label": "Member" },
+  { "value": "180K+", "label": "Member" },
   { "value": "500+", "label": "Meme Harian" },
   { "value": "24/7", "label": "Yapping" }
 ]

apps/landing/src/data/socials.json

@@ -13,13 +13,6 @@
     "description": "Real-time collaboration chat",
     "link": "https://discord.gg/imphnen"
   },
-  {
-    "name": "Github",
-    "icon": "FaGithub",
-    "color": "#000000",
-    "description": "Platforms to collaborate on your code",
-    "link": "https://github.com/IMPHNEN/"
-  },
   {
     "name": "Instagram",
     "icon": "FaInstagram",

apps/landing/src/lib/fonts.ts

@@ -1,23 +1,13 @@
-import localFont from 'next/font/local';
+import { Bai_Jamjuree, Poppins } from 'next/font/google';
 
-export const baiJamjureeFont = localFont({
+export const baiJamjureeFont = Bai_Jamjuree({
-  src: [
+  subsets: ['latin'],
-    { path: '../../public/fonts/BaiJamjuree-Light.ttf', weight: '300', style: 'normal' },
+  weight: ['300', '400', '500', '600', '700'],
-    { path: '../../public/fonts/BaiJamjuree-Regular.ttf', weight: '400', style: 'normal' },
-    { path: '../../public/fonts/BaiJamjuree-Medium.ttf', weight: '500', style: 'normal' },
-    { path: '../../public/fonts/BaiJamjuree-SemiBold.ttf', weight: '600', style: 'normal' },
-    { path: '../../public/fonts/BaiJamjuree-Bold.ttf', weight: '700', style: 'normal' },
-  ],
   display: 'swap',
 });
 
-export const poppinsFont = localFont({
+export const poppinsFont = Poppins({
-  src: [
+  subsets: ['latin'],
-    { path: '../../public/fonts/Poppins-Light.ttf', weight: '300', style: 'normal' },
+  weight: ['300', '400', '500', '600', '700'],
-    { path: '../../public/fonts/Poppins-Regular.ttf', weight: '400', style: 'normal' },
-    { path: '../../public/fonts/Poppins-Medium.ttf', weight: '500', style: 'normal' },
-    { path: '../../public/fonts/Poppins-SemiBold.ttf', weight: '600', style: 'normal' },
-    { path: '../../public/fonts/Poppins-Bold.ttf', weight: '700', style: 'normal' },
-  ],
   display: 'swap',
 });

apps/qrcampaign/Dockerfile

@@ -1,17 +0,0 @@
-FROM node:22-alpine AS deps
-WORKDIR /app
-COPY package.json package-lock.json ./
-RUN npm ci --prefer-offline --no-audit --no-fund
-
-FROM node:22-alpine AS builder
-WORKDIR /app
-COPY --from=deps /app/node_modules ./node_modules
-COPY . .
-ENV NX_DAEMON=false
-RUN npm run qrcampaign:build
-
-FROM nginx:alpine AS runner
-RUN rm -rf /usr/share/nginx/html/*
-COPY --from=builder /app/dist/apps/qrcampaign /usr/share/nginx/html
-EXPOSE 80
-CMD ["nginx", "-g", "daemon off;"]

apps/qrcampaign/eslint.config.mjs

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

apps/qrcampaign/index.html

@@ -1,16 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <title>QR Code Generator - IMPHNEN</title>
-    <base href="/" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="description" content="QR Code Generator - IMPHNEN" />
-    <meta name="keywords" content="qr, campaign, imphnen" />
-    <link rel="icon" type="image/svg+xml" href="/images/imphnen-logo.svg" />
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
-  </body>
-</html>

apps/qrcampaign/postcss.config.mjs

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

apps/qrcampaign/project.json

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

apps/qrcampaign/src/app/404.tsx

@@ -1,23 +0,0 @@
-import { Link } from 'react-router-dom';
-
-export default function NotFoundPage() {
-  return (
-    <div className="min-h-screen flex items-center justify-center bg-gray-50">
-      <div className="text-center">
-        <h1 className="text-9xl font-bold text-gray-200 mb-4">404</h1>
-        <h2 className="text-3xl font-semibold text-gray-900 mb-4">
-          Page Not Found
-        </h2>
-        <p className="text-gray-600 mb-8">
-          The page you are looking for doesn't exist or has been moved.
-        </p>
-        <Link
-          to="/"
-          className="inline-block px-6 py-3 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition-colors"
-        >
-          Go Back Home
-        </Link>
-      </div>
-    </div>
-  );
-}

apps/qrcampaign/src/app/admin/campaigns/page.tsx

@@ -1,286 +0,0 @@
-import { useState, useEffect } from 'react';
-import { ColumnDef } from '@tanstack/react-table';
-import { DataTable } from '@imphnen-frontend-service/ui/organisms';
-import {
-  campaignService,
-  Campaign,
-  CreateCampaignRequest,
-} from '../../features/admin/api/campaign.service';
-import {
-  DeleteOutlined,
-  CheckCircleOutlined,
-  PlusOutlined,
-  FileOutlined,
-} from '@ant-design/icons';
-
-export default function CampaignsPage() {
-  const [campaigns, setCampaigns] = useState<Campaign[]>([]);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-  const [showCreateModal, setShowCreateModal] = useState(false);
-  const [createLoading, setCreateLoading] = useState(false);
-  const [formData, setFormData] = useState<CreateCampaignRequest>({
-    name: '',
-    url: '',
-  });
-
-  const fetchCampaigns = async () => {
-    try {
-      setLoading(true);
-      setError(null);
-      const data = await campaignService.getCampaigns();
-      setCampaigns(data);
-    } catch (err) {
-      setError('Failed to load campaigns');
-      console.error('Error fetching campaigns:', err);
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  useEffect(() => {
-    fetchCampaigns();
-  }, []);
-
-  const handleCreateCampaign = async (e: React.FormEvent) => {
-    e.preventDefault();
-    try {
-      setCreateLoading(true);
-      await campaignService.createCampaign(formData);
-      setShowCreateModal(false);
-      setFormData({ name: '', url: '' });
-      await fetchCampaigns();
-    } catch (err) {
-      console.error('Error creating campaign:', err);
-      alert('Failed to create campaign');
-    } finally {
-      setCreateLoading(false);
-    }
-  };
-
-  const handleActivateCampaign = async (campaignId: string) => {
-    try {
-      await campaignService.activateCampaign(campaignId);
-      await fetchCampaigns();
-    } catch (err) {
-      console.error('Error activating campaign:', err);
-      alert('Failed to activate campaign');
-    }
-  };
-
-  const handleDeleteCampaign = async (
-    campaignId: string,
-    campaignName: string
-  ) => {
-    if (!confirm(`Are you sure you want to delete "${campaignName}"?`)) {
-      return;
-    }
-    try {
-      await campaignService.deleteCampaign(campaignId);
-      await fetchCampaigns();
-    } catch (err) {
-      console.error('Error deleting campaign:', err);
-      alert('Failed to delete campaign');
-    }
-  };
-
-  const columns: ColumnDef<Campaign>[] = [
-    {
-      accessorKey: 'name',
-      header: 'Name',
-      cell: ({ row }) => (
-        <div className="font-medium text-gray-900">{row.original.name}</div>
-      ),
-    },
-    {
-      accessorKey: 'url',
-      header: 'URL',
-      cell: ({ row }) => (
-        <a
-          href={row.original.url}
-          target="_blank"
-          rel="noopener noreferrer"
-          className="text-primary-600 hover:underline"
-        >
-          {row.original.url}
-        </a>
-      ),
-    },
-    {
-      accessorKey: 'is_active',
-      header: 'Status',
-      cell: ({ row }) => (
-        <span
-          className={`px-2 py-1 rounded-2xl text-xs font-medium ${
-            row.original.is_active
-              ? 'bg-success-100 text-success-800'
-              : 'bg-gray-100 text-gray-800'
-          }`}
-        >
-          {row.original.is_active ? 'Active' : 'Inactive'}
-        </span>
-      ),
-    },
-    {
-      accessorKey: 'created_at',
-      header: 'Created At',
-      cell: ({ row }) => (
-        <span className="text-gray-600">
-          {new Date(row.original.created_at).toLocaleDateString()}
-        </span>
-      ),
-    },
-    {
-      id: 'actions',
-      header: 'Actions',
-      cell: ({ row }) => (
-        <div className="flex gap-2">
-          {!row.original.is_active && (
-            <button
-              onClick={() => handleActivateCampaign(row.original.id)}
-              className="p-2 text-success-600 hover:bg-success-50 rounded-md transition-colors cursor-pointer"
-              title="Activate Campaign"
-            >
-              <CheckCircleOutlined />
-            </button>
-          )}
-          <button
-            onClick={() =>
-              handleDeleteCampaign(row.original.id, row.original.name)
-            }
-            className="p-2 text-danger-600 hover:bg-danger-50 rounded-md transition-colors cursor-pointer"
-            title="Delete Campaign"
-          >
-            <DeleteOutlined />
-          </button>
-        </div>
-      ),
-    },
-  ];
-
-  if (loading) {
-    return (
-      <div className="p-6">
-        <div className="text-center py-12">
-          <div className="text-gray-600">Loading campaigns...</div>
-        </div>
-      </div>
-    );
-  }
-
-  if (error) {
-    return (
-      <div className="p-6">
-        <div className="bg-red-50 border border-red-200 rounded-lg p-4 text-red-800">
-          {error}
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div className="p-6">
-      <div className="flex justify-between items-center mb-6">
-        <div>
-          <h1 className="text-2xl font-bold text-gray-900">
-            Campaign Management
-          </h1>
-          <p className="text-gray-600 mt-1">Manage your QR campaigns</p>
-        </div>
-        <button
-          onClick={() => setShowCreateModal(true)}
-          className="flex items-center gap-2 bg-primary-500 text-white px-4 py-2 rounded-lg hover:bg-primary-600 transition-colors cursor-pointer"
-        >
-          <PlusOutlined />
-          Create Campaign
-        </button>
-      </div>
-
-      {!campaigns || campaigns.length === 0 ? (
-        <div className="bg-white rounded-lg border border-gray-200 p-12 text-center shadow-sm">
-          <div className="max-w-sm mx-auto">
-            <div className="text-gray-400 mb-4">
-              <FileOutlined className="text-[48px] mx-auto" />
-            </div>
-            <h3 className="text-lg font-medium text-gray-900 mb-2">
-              No campaigns yet
-            </h3>
-            <p className="text-gray-500 mb-6">
-              Get started by creating your first QR campaign.
-            </p>
-            <button
-              onClick={() => setShowCreateModal(true)}
-              className="inline-flex items-center gap-2 bg-primary-500 text-white px-4 py-2 rounded-lg hover:bg-primary-600 transition-colors cursor-pointer"
-            >
-              <PlusOutlined />
-              Create Your First Campaign
-            </button>
-          </div>
-        </div>
-      ) : (
-        <DataTable data={campaigns} columns={columns} pageSize={10} />
-      )}
-
-      {/* Create Campaign Modal */}
-      {showCreateModal && (
-        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
-          <div className="bg-white rounded-lg p-6 w-full max-w-md">
-            <h2 className="text-xl font-bold mb-4">Create New Campaign</h2>
-            <form onSubmit={handleCreateCampaign}>
-              <div className="mb-4">
-                <label className="block text-sm font-medium text-gray-700 mb-2">
-                  Campaign Name
-                </label>
-                <input
-                  type="text"
-                  value={formData.name}
-                  onChange={(e) =>
-                    setFormData({ ...formData, name: e.target.value })
-                  }
-                  className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
-                  placeholder="IMPHNEN Promo Campaign"
-                  required
-                />
-              </div>
-              <div className="mb-6">
-                <label className="block text-sm font-medium text-gray-700 mb-2">
-                  Campaign URL
-                </label>
-                <input
-                  type="url"
-                  value={formData.url}
-                  onChange={(e) =>
-                    setFormData({ ...formData, url: e.target.value })
-                  }
-                  className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
-                  placeholder="https://imphnen.dev/promo"
-                  required
-                />
-              </div>
-              <div className="flex gap-3 justify-end">
-                <button
-                  type="button"
-                  onClick={() => {
-                    setShowCreateModal(false);
-                    setFormData({ name: '', url: '' });
-                  }}
-                  className="px-4 py-2 text-gray-700 bg-gray-100 rounded-md hover:bg-gray-200 transition-colors cursor-pointer"
-                  disabled={createLoading}
-                >
-                  Cancel
-                </button>
-                <button
-                  type="submit"
-                  className="px-4 py-2 bg-primary-500 text-white rounded-md hover:bg-primary-600 transition-colors disabled:opacity-50 cursor-pointer"
-                  disabled={createLoading}
-                >
-                  {createLoading ? 'Creating...' : 'Create'}
-                </button>
-              </div>
-            </form>
-          </div>
-        </div>
-      )}
-    </div>
-  );
-}

apps/qrcampaign/src/app/admin/layout.tsx

@@ -1,10 +0,0 @@
-import { Outlet } from 'react-router-dom';
-import { RequireAdmin } from '../features/admin/components/RequireAdmin';
-
-export default function AdminLayout() {
-  return (
-    <RequireAdmin>
-      <Outlet />
-    </RequireAdmin>
-  );
-}

apps/qrcampaign/src/app/admin/page.tsx

@@ -1,3 +0,0 @@
-export default function AdminPage() {
-  return <div className="p-4">Select a menu item from the sidebar.</div>;
-}

apps/qrcampaign/src/app/admin/users/page.tsx

@@ -1,215 +0,0 @@
-import { useState, useEffect } from 'react';
-import { ColumnDef } from '@tanstack/react-table';
-import { DataTable } from '@imphnen-frontend-service/ui/organisms';
-import { userService, User } from '../../features/admin/api/user.service';
-import { DeleteOutlined, EditOutlined, UserOutlined } from '@ant-design/icons';
-
-export default function UsersPage() {
-  const [users, setUsers] = useState<User[]>([]);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-  const [editingUserId, setEditingUserId] = useState<string | null>(null);
-  const [selectedRole, setSelectedRole] = useState<string>('');
-
-  const fetchUsers = async () => {
-    try {
-      setLoading(true);
-      setError(null);
-      const data = await userService.getUsers();
-      setUsers(data);
-    } catch (err) {
-      setError('Failed to load users');
-      console.error('Error fetching users:', err);
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  useEffect(() => {
-    fetchUsers();
-  }, []);
-
-  const handleUpdateRole = async (userId: string, currentRole: string) => {
-    if (editingUserId === userId) {
-      // Save the role
-      try {
-        await userService.updateUserRole(userId, selectedRole);
-        setEditingUserId(null);
-        setSelectedRole('');
-        await fetchUsers();
-      } catch (err) {
-        console.error('Error updating user role:', err);
-        alert('Failed to update user role');
-      }
-    } else {
-      // Start editing
-      setEditingUserId(userId);
-      setSelectedRole(currentRole);
-    }
-  };
-
-  const handleDeleteUser = async (userId: string, userName: string) => {
-    if (!confirm(`Are you sure you want to delete user "${userName}"?`)) {
-      return;
-    }
-    try {
-      await userService.deleteUser(userId);
-      await fetchUsers();
-    } catch (err) {
-      console.error('Error deleting user:', err);
-      alert('Failed to delete user');
-    }
-  };
-
-  const columns: ColumnDef<User>[] = [
-    {
-      accessorKey: 'name',
-      header: 'Name',
-      cell: ({ row }) => (
-        <div className="font-medium text-gray-900">{row.original.name}</div>
-      ),
-    },
-    {
-      accessorKey: 'email',
-      header: 'Email',
-      cell: ({ row }) => (
-        <div className="text-gray-600">{row.original.email}</div>
-      ),
-    },
-    {
-      accessorKey: 'role',
-      header: 'Role',
-      cell: ({ row }) => {
-        const isEditing = editingUserId === row.original.id;
-        return (
-          <div className="flex items-center gap-2">
-            {isEditing ? (
-              <select
-                value={selectedRole}
-                onChange={(e) => setSelectedRole(e.target.value)}
-                className="px-2 py-1 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
-              >
-                <option value="user">User</option>
-                <option value="admin">Admin</option>
-              </select>
-            ) : (
-              <span
-                className={`px-2 py-1 rounded-2xl text-xs font-medium ${
-                  row.original.role === 'admin'
-                    ? 'bg-danger-100 text-danger-800'
-                    : 'bg-primary-100 text-primary-800'
-                }`}
-              >
-                {row.original.role.charAt(0).toUpperCase() +
-                  row.original.role.slice(1)}
-              </span>
-            )}
-          </div>
-        );
-      },
-    },
-    {
-      accessorKey: 'created_at',
-      header: 'Created At',
-      cell: ({ row }) => (
-        <span className="text-gray-600">
-          {new Date(row.original.created_at).toLocaleDateString()}
-        </span>
-      ),
-    },
-    {
-      id: 'actions',
-      header: 'Actions',
-      cell: ({ row }) => {
-        const isEditing = editingUserId === row.original.id;
-        return (
-          <div className="flex gap-2">
-            <button
-              onClick={() =>
-                handleUpdateRole(row.original.id, row.original.role)
-              }
-              className={`p-2 rounded-md transition-colors cursor-pointer ${
-                isEditing
-                  ? 'text-success-600 hover:bg-success-50'
-                  : 'text-primary-600 hover:bg-primary-50'
-              }`}
-              title={isEditing ? 'Save Role' : 'Change Role'}
-            >
-              <EditOutlined />
-            </button>
-            {isEditing && (
-              <button
-                onClick={() => {
-                  setEditingUserId(null);
-                  setSelectedRole('');
-                }}
-                className="p-2 text-gray-600 hover:bg-gray-50 rounded-md transition-colors cursor-pointer"
-                title="Cancel"
-              >
-                ✕
-              </button>
-            )}
-            {!isEditing && (
-              <button
-                onClick={() =>
-                  handleDeleteUser(row.original.id, row.original.name)
-                }
-                className="p-2 text-danger-600 hover:bg-danger-50 rounded-md transition-colors cursor-pointer"
-                title="Delete User"
-              >
-                <DeleteOutlined />
-              </button>
-            )}
-          </div>
-        );
-      },
-    },
-  ];
-
-  if (loading) {
-    return (
-      <div className="p-6">
-        <div className="text-center py-12">
-          <div className="text-gray-600">Loading users...</div>
-        </div>
-      </div>
-    );
-  }
-
-  if (error) {
-    return (
-      <div className="p-6">
-        <div className="bg-red-50 border border-red-200 rounded-lg p-4 text-red-800">
-          {error}
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div className="p-6">
-      <div className="mb-6">
-        <h1 className="text-2xl font-bold text-gray-900">User Management</h1>
-        <p className="text-gray-600 mt-1">Manage users and their roles</p>
-      </div>
-
-      {!users || users.length === 0 ? (
-        <div className="bg-white rounded-lg border border-gray-200 p-12 text-center shadown-sm">
-          <div className="max-w-sm mx-auto">
-            <div className="text-gray-400 mb-4">
-              <UserOutlined className="text-[48px]" />
-            </div>
-            <h3 className="text-lg font-medium text-gray-900 mb-2">
-              No users found
-            </h3>
-            <p className="text-gray-500">
-              There are currently no users in the system.
-            </p>
-          </div>
-        </div>
-      ) : (
-        <DataTable data={users} columns={columns} pageSize={10} />
-      )}
-    </div>
-  );
-}

apps/qrcampaign/src/app/auth/callback/page.tsx

@@ -1,183 +0,0 @@
-import { FC, ReactElement, useEffect, useState, useRef } from 'react';
-import { useNavigate } from 'react-router';
-import { useGitHubCallback } from '@imphnen-frontend-service/service';
-import { toast } from 'sonner';
-
-const CallbackPage: FC = (): ReactElement => {
-  const navigate = useNavigate();
-  const { mutateAsync: exchangeGitHubCode } = useGitHubCallback();
-  const [isProcessing, setIsProcessing] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-  const hasRunRef = useRef(false);
-
-  useEffect(() => {
-    const handleCallback = async () => {
-      if (hasRunRef.current) {
-        return;
-      }
-      hasRunRef.current = true;
-
-      try {
-        // Check URL hash for Supabase email confirmation callback
-        const hashParams = new URLSearchParams(
-          globalThis.location.hash.substring(1)
-        );
-        const urlParams = new URLSearchParams(globalThis.location.search);
-
-        const type = hashParams.get('type') || urlParams.get('type');
-        const accessToken =
-          hashParams.get('access_token') || urlParams.get('access_token');
-
-        // Debug: log what we received
-        console.log('[Callback] Params:', {
-          type,
-          accessToken: !!accessToken,
-          hash: globalThis.location.hash,
-          search: globalThis.location.search,
-        });
-
-        // Handle Supabase email callbacks (has access_token in hash or query)
-        // This includes: signup confirmation, email confirmation, password recovery
-        if (accessToken) {
-          setIsProcessing(false);
-
-          // Password recovery - type is 'recovery' or we have access_token from reset email
-          if (type === 'recovery' || type === 'magiclink') {
-            toast.success('Email verified! Please set your new password.');
-            navigate('/auth/reset-password?access_token=' + accessToken);
-            return;
-          }
-
-          // Signup/Email confirmation
-          if (type === 'signup' || type === 'email_confirmation') {
-            toast.success(
-              'Email verified successfully! Please log in to continue.'
-            );
-            navigate('/auth/login');
-            return;
-          }
-
-          // If we have access_token but unknown type, assume it's password recovery
-          // (Supabase sometimes sends without explicit type)
-          toast.success('Email verified! Please set your new password.');
-          navigate('/auth/reset-password?access_token=' + accessToken);
-          return;
-        }
-
-        // Get the code from URL query params (GitHub OAuth)
-        const code = urlParams.get('code');
-
-        if (!code) {
-          throw new Error('No authorization code received');
-        }
-
-        // Exchange the code for tokens using backend API (GitHub OAuth)
-        const result = await exchangeGitHubCode({ code });
-
-        toast.success('Login successful!');
-        setIsProcessing(false);
-
-        // Check if user has completed onboarding (has location)
-        if (result.user.location) {
-          globalThis.location.replace('/dashboard');
-        } else {
-          globalThis.location.replace('/onboarding/user');
-        }
-      } catch (err) {
-        console.error('[Callback] Error:', err);
-        setError((err as Error).message);
-        setIsProcessing(false);
-        toast.error('An error occurred during login');
-
-        setTimeout(() => {
-          navigate('/auth/login');
-        }, 3000);
-      }
-    };
-
-    handleCallback();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  if (error) {
-    // Check if error is related to private email
-    const isPrivateEmailError =
-      error.toLowerCase().includes('failed to create user') ||
-      error.toLowerCase().includes('email') ||
-      error.toLowerCase().includes('user record');
-
-    return (
-      <div className="flex justify-center items-center min-h-screen bg-gray-50 px-4">
-        <div className="bg-white w-full max-w-2xl p-8 rounded-2xl shadow-lg border border-red-200">
-          <div className="text-center mb-6">
-            <div className="text-red-500 text-5xl mb-4">⚠️</div>
-            <h2 className="text-2xl font-bold text-gray-900 mb-2">
-              GitHub Login Failed
-            </h2>
-            <p className="text-red-600 mb-4 whitespace-pre-line">{error}</p>
-          </div>
-
-          {isPrivateEmailError && (
-            <div className="bg-amber-50 border border-amber-200 rounded-lg p-4 mb-6">
-              <h3 className="font-semibold text-amber-800 mb-2">
-                Is your GitHub email set to private?
-              </h3>
-              <p className="text-amber-700 text-sm mb-3">
-                GitHub login requires a public email address. Please follow
-                these steps:
-              </p>
-              <ol className="text-amber-700 text-sm list-decimal list-inside space-y-1 mb-3">
-                <li>
-                  Go to{' '}
-                  <a
-                    href="https://github.com/settings/emails"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    className="underline hover:text-amber-900"
-                  >
-                    GitHub Email Settings
-                  </a>
-                </li>
-                <li>Uncheck "Keep my email addresses private"</li>
-                <li>
-                  Or go to{' '}
-                  <a
-                    href="https://github.com/settings/profile"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    className="underline hover:text-amber-900"
-                  >
-                    Profile Settings
-                  </a>{' '}
-                  and set a public email
-                </li>
-                <li>Try signing in with GitHub again</li>
-              </ol>
-              <p className="text-amber-600 text-xs">
-                Alternatively, you can sign up using email and password instead.
-              </p>
-            </div>
-          )}
-
-          <p className="text-gray-600 text-sm mt-6 text-center">
-            Redirecting to login page in 3 seconds...
-          </p>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div className="flex justify-center items-center min-h-screen bg-gray-50">
-      <div className="text-center">
-        <div className="inline-block animate-spin rounded-full h-12 w-12 border-b-2 border-primary-600 mb-4"></div>
-        <h2 className="text-xl font-semibold text-gray-900 mb-2">
-          Completing login...
-        </h2>
-        <p className="text-gray-600">Please wait</p>
-      </div>
-    </div>
-  );
-};
-
-export default CallbackPage;

apps/qrcampaign/src/app/auth/forgot-password/page.tsx

@@ -1,125 +0,0 @@
-import { useState } from 'react';
-import { useForgotPassword } from '@imphnen-frontend-service/service';
-import { Link, useNavigate } from 'react-router';
-import { toast } from 'sonner';
-import { Icon } from '@iconify/react';
-
-export default function ForgotPasswordPage() {
-  const [email, setEmail] = useState('');
-  const [emailSent, setEmailSent] = useState(false);
-  const navigate = useNavigate();
-  const forgotPasswordMutation = useForgotPassword();
-
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-
-    if (!email) {
-      toast.error('Please enter your email');
-      return;
-    }
-
-    try {
-      await forgotPasswordMutation.mutateAsync({ email });
-
-      setEmailSent(true);
-      toast.success('Password reset email sent! Check your inbox.');
-    } catch (err) {
-      toast.error((err as Error).message || 'Failed to send reset email');
-    }
-  };
-
-  if (emailSent) {
-    return (
-      <div className="flex justify-center items-center min-h-screen bg-gray-50 p-4">
-        <div className="bg-white w-full max-w-md p-8 rounded-2xl shadow-lg border border-gray-200 text-center">
-          <div className="mb-6">
-            <div className="mx-auto w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mb-4">
-              <span className="text-3xl">✓</span>
-            </div>
-            <h2 className="text-3xl font-bold text-gray-900 mb-2">
-              Check Your Email
-            </h2>
-            <p className="text-gray-600">
-              We've sent a password reset link to <strong>{email}</strong>
-            </p>
-          </div>
-
-          <div className="space-y-4">
-            <p className="text-sm text-gray-600">
-              Click the link in the email to reset your password. The link will
-              expire in 1 hour.
-            </p>
-
-            <Link to="/auth/login">
-              <button className="w-full py-3 bg-primary-600 text-white rounded-lg font-semibold hover:bg-primary-700 transition-colors">
-                Back to Login
-              </button>
-            </Link>
-
-            <button
-              onClick={() => setEmailSent(false)}
-              className="w-full py-3 text-gray-600 hover:text-gray-900 transition-colors"
-            >
-              Send another email
-            </button>
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div className="flex justify-center items-center min-h-screen bg-gray-50 p-4">
-      <div className="bg-white w-full max-w-md p-8 rounded-2xl shadow-lg border border-gray-200">
-        <div className="flex items-center justify-between mb-6">
-          <button
-            onClick={() => navigate('/auth/login')}
-            className="cursor-pointer text-primary-500 hover:text-primary-600 text-base font-sans flex items-center"
-          >
-            <Icon icon="ic:baseline-chevron-left" width="24" height="24" />
-            Back to Login
-          </button>
-        </div>
-        <div className="text-center mb-8">
-          <h2 className="text-3xl font-bold text-gray-900 mb-2">
-            Forgot Password?
-          </h2>
-          <p className="text-gray-600">
-            No worries, we'll send you reset instructions
-          </p>
-        </div>
-
-        <form onSubmit={handleSubmit} className="space-y-4">
-          <div>
-            <label
-              htmlFor="email"
-              className="block text-sm font-medium text-gray-700 mb-1"
-            >
-              Email Address
-            </label>
-            <input
-              id="email"
-              type="email"
-              value={email}
-              onChange={(e) => setEmail(e.target.value)}
-              placeholder="your@email.com"
-              disabled={forgotPasswordMutation.isPending}
-              className="bg-white text-gray-900 w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent disabled:bg-gray-100 disabled:cursor-not-allowed"
-              required
-            />
-          </div>
-
-          <button
-            type="submit"
-            disabled={forgotPasswordMutation.isPending}
-            className="w-full py-3 bg-primary-600 text-white rounded-lg font-semibold hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 disabled:bg-gray-400 disabled:cursor-not-allowed transition-colors"
-          >
-            {forgotPasswordMutation.isPending
-              ? 'Sending...'
-              : 'Send Reset Link'}
-          </button>
-        </form>
-      </div>
-    </div>
-  );
-}

apps/qrcampaign/src/app/auth/login/page.tsx

@@ -1,234 +0,0 @@
-import { useState, useEffect } from 'react';
-import { GithubOutlined } from '@ant-design/icons';
-import { useNavigate, Link } from 'react-router';
-import { toast } from 'sonner';
-import { Icon } from '@iconify/react';
-import { useAuthStore } from '../../features/auth/store/auth.store';
-
-export default function LoginPage() {
-  const navigate = useNavigate();
-  const login = useAuthStore((state) => state.login);
-  const isAuthenticated = useAuthStore((state) => state.isAuthenticated);
-
-  const [isGithubLoading, setIsGithubLoading] = useState(false);
-  const [email, setEmail] = useState('');
-  const [password, setPassword] = useState('');
-  const [error, setError] = useState<string | null>(null);
-  const [showPassword, setShowPassword] = useState(false);
-  const [isSubmitting, setIsSubmitting] = useState(false);
-
-  useEffect(() => {
-    if (isAuthenticated) {
-      navigate('/');
-    }
-  }, [isAuthenticated, navigate]);
-
-  // Check for password reset tokens in URL and redirect to reset-password page
-  useEffect(() => {
-    const hashParams = new URLSearchParams(
-      globalThis.location.hash.substring(1)
-    );
-    const urlParams = new URLSearchParams(globalThis.location.search);
-
-    const accessToken =
-      hashParams.get('access_token') || urlParams.get('access_token');
-    const type = hashParams.get('type') || urlParams.get('type');
-
-    // If we have an access_token, this is likely a password reset redirect that landed on the wrong page
-    if (accessToken) {
-      console.log(
-        '[Login] Detected access_token, redirecting to reset-password page'
-      );
-
-      // Check if it's a password recovery
-      if (type === 'recovery' || type === 'magiclink' || !type) {
-        toast.info('Redirecting to password reset...');
-        navigate('/auth/reset-password?access_token=' + accessToken);
-      }
-    }
-  }, [navigate]);
-
-  const handleEmailLogin = async (e: React.FormEvent) => {
-    e.preventDefault();
-    setError(null);
-
-    if (!email || !password) {
-      setError('Please enter both email and password');
-      return;
-    }
-
-    setIsSubmitting(true);
-    try {
-      const success = await login(email, password);
-
-      if (success) {
-        toast.success('Login successful!');
-        navigate('/');
-      } else {
-        setError('Login failed. Please check your credentials.');
-      }
-    } catch (err) {
-      console.error('[Login] Email login failed:', err);
-      setError('Login failed. Please try again.');
-    } finally {
-      setIsSubmitting(false);
-    }
-  };
-
-  const handleGithubLogin = async () => {
-    // TODO: Implement GitHub login with new auth service if needed
-    toast.info('GitHub login coming soon');
-  };
-
-  return (
-    <div className="flex justify-center items-center min-h-screen bg-gray-50 p-4">
-      <div className="bg-white w-full max-w-md p-8 rounded-2xl shadow-lg border border-gray-200">
-        {/* <div className="flex items-center justify-between mb-6">
-          <button
-            onClick={() => navigate('/')}
-            className="cursor-pointer text-primary-500 hover:text-primary-600 text-base font-sans flex items-center"
-          >
-            <Icon icon="ic:baseline-chevron-left" width="24" height="24" />
-            Back to Homepage
-          </button>
-        </div> */}
-
-        <div className="text-center mb-8">
-          <h2 className="text-3xl font-bold text-gray-900 mb-2">
-            Welcome Back
-          </h2>
-          <p className="text-gray-600">Sign in to continue to IMPHNEN</p>
-        </div>
-
-        {error && (
-          <div className="mb-6 p-3 bg-red-50 border border-red-200 rounded-lg">
-            <p className="text-red-600 text-sm">{error}</p>
-          </div>
-        )}
-
-        {/* Traditional Login Form */}
-        <form onSubmit={handleEmailLogin} className="space-y-4 mb-6">
-          <div>
-            <label
-              htmlFor="email"
-              className="block text-sm font-medium text-gray-700 mb-1"
-            >
-              Email
-            </label>
-            <input
-              id="email"
-              type="email"
-              value={email}
-              onChange={(e) => setEmail(e.target.value)}
-              placeholder="yourname@example.com"
-              disabled={isSubmitting}
-              className="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent bg-white text-gray-900 placeholder:text-gray-400 disabled:bg-gray-100 disabled:cursor-not-allowed"
-              required
-            />
-          </div>
-
-          <div>
-            <div className="flex items-center justify-between mb-1">
-              <label
-                htmlFor="password"
-                className="block text-sm font-medium text-gray-700"
-              >
-                Password
-              </label>
-              <Link
-                to="/auth/forgot-password"
-                className="text-sm text-primary-600 hover:text-primary-700 font-medium"
-              >
-                Forgot password?
-              </Link>
-            </div>
-            <div className="relative">
-              <input
-                id="password"
-                type={showPassword ? 'text' : 'password'}
-                value={password}
-                onChange={(e) => setPassword(e.target.value)}
-                placeholder="••••••••"
-                disabled={isSubmitting}
-                className="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent bg-white text-gray-900 placeholder:text-gray-400 disabled:bg-gray-100 disabled:cursor-not-allowed pr-10"
-                required
-              />
-              <button
-                type="button"
-                onClick={() => setShowPassword(!showPassword)}
-                className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 hover:text-gray-700"
-              >
-                <Icon
-                  icon={showPassword ? 'mdi:eye-off' : 'mdi:eye'}
-                  className="text-xl"
-                />
-              </button>
-            </div>
-          </div>
-
-          <button
-            type="submit"
-            disabled={isSubmitting}
-            className="w-full py-3 bg-primary-600 text-white rounded-lg font-semibold hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 disabled:bg-gray-400 disabled:cursor-not-allowed transition-colors cursor-pointer"
-          >
-            {isSubmitting ? 'Signing in...' : 'Sign in'}
-          </button>
-        </form>
-
-        <div className="relative my-6">
-          <div className="absolute inset-0 flex items-center">
-            <div className="w-full border-t border-gray-300"></div>
-          </div>
-          <div className="relative flex justify-center text-sm">
-            <span className="px-2 bg-white text-gray-500">
-              Or continue with
-            </span>
-          </div>
-        </div>
-
-        <button
-          onClick={handleGithubLogin}
-          disabled={isGithubLoading}
-          type="button"
-          className="w-full py-3 flex items-center justify-center gap-2 bg-gray-100 border border-gray-300 rounded-lg font-semibold text-gray-900 hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 disabled:bg-gray-100 disabled:cursor-not-allowed transition-colors cursor-pointer"
-        >
-          <GithubOutlined className="text-xl" />
-          <span>
-            {isGithubLoading ? 'Connecting...' : 'Sign in with GitHub'}
-          </span>
-        </button>
-
-        <p className="mt-3 text-xs text-center text-gray-500">
-          Make sure your GitHub email is{' '}
-          <a
-            href="https://github.com/settings/emails"
-            target="_blank"
-            rel="noopener noreferrer"
-            className="text-primary-600 hover:underline"
-          >
-            set to public
-          </a>{' '}
-          for GitHub sign in to work.
-        </p>
-
-        <div className="mt-6 text-center">
-          <p className="text-gray-600 text-sm">
-            Don't have an account?{' '}
-            <Link
-              to="/auth/signup"
-              className="text-primary-600 hover:text-primary-700 font-semibold"
-            >
-              Sign up
-            </Link>
-          </p>
-        </div>
-
-        <div className="mt-6 text-center">
-          <p className="text-gray-500 text-xs">
-            By signing in, you agree to our Terms of Service and Privacy Policy
-          </p>
-        </div>
-      </div>
-    </div>
-  );
-}

apps/qrcampaign/src/app/auth/reset-password/page.tsx

@@ -1,171 +0,0 @@
-import { useState, useEffect } from 'react';
-import {
-  useResetPassword,
-  useAuthStore,
-} from '@imphnen-frontend-service/service';
-import { useNavigate } from 'react-router';
-import { toast } from 'sonner';
-import { Icon } from '@iconify/react';
-
-export default function ResetPasswordPage() {
-  const navigate = useNavigate();
-  const { clearSession } = useAuthStore();
-  const resetPasswordMutation = useResetPassword();
-  const [password, setPassword] = useState('');
-  const [confirmPassword, setConfirmPassword] = useState('');
-  const [accessToken, setAccessToken] = useState<string | null>(null);
-  const [showPassword, setShowPassword] = useState(false);
-  const [showConfirmPassword, setShowConfirmPassword] = useState(false);
-
-  useEffect(() => {
-    // Get the access_token from URL hash (Supabase sends it as hash fragment)
-    // or from query params (when redirected from callback page)
-    const hashParams = new URLSearchParams(
-      globalThis.location.hash.substring(1)
-    );
-    const queryParams = new URLSearchParams(globalThis.location.search);
-    const token =
-      hashParams.get('access_token') || queryParams.get('access_token');
-
-    if (token) {
-      setAccessToken(token);
-    } else {
-      toast.error('Invalid or expired reset link');
-      setTimeout(() => navigate('/auth/forgot-password'), 2000);
-    }
-  }, [navigate]);
-
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-
-    if (password !== confirmPassword) {
-      toast.error('Passwords do not match');
-      return;
-    }
-
-    if (password.length < 6) {
-      toast.error('Password must be at least 6 characters');
-      return;
-    }
-
-    if (!accessToken) {
-      toast.error('Invalid reset token');
-      return;
-    }
-
-    try {
-      await resetPasswordMutation.mutateAsync({
-        access_token: accessToken,
-        new_password: password,
-      });
-
-      toast.success('Password updated successfully!');
-
-      // Clear session and redirect to login
-      clearSession();
-      navigate('/auth/login');
-    } catch (err) {
-      toast.error((err as Error).message || 'Failed to reset password');
-    }
-  };
-
-  if (!accessToken) {
-    return (
-      <div className="flex justify-center items-center min-h-screen bg-gray-50">
-        <div className="text-center">
-          <div className="inline-block animate-spin rounded-full h-12 w-12 border-b-2 border-primary-600 mb-4"></div>
-          <p className="text-gray-600">Verifying reset link...</p>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div className="flex justify-center items-center min-h-screen bg-gray-50 p-4">
-      <div className="bg-white w-full max-w-md p-8 rounded-2xl shadow-lg border border-gray-200">
-        <div className="text-center mb-8">
-          <h2 className="text-3xl font-bold text-gray-900 mb-2">
-            Set New Password
-          </h2>
-          <p className="text-gray-600">Enter your new password below</p>
-        </div>
-
-        <form onSubmit={handleSubmit} className="space-y-4">
-          <div>
-            <label
-              htmlFor="password"
-              className="block text-sm font-medium text-gray-700 mb-1"
-            >
-              New Password
-            </label>
-            <div className="relative">
-              <input
-                id="password"
-                type={showPassword ? 'text' : 'password'}
-                value={password}
-                onChange={(e) => setPassword(e.target.value)}
-                placeholder="••••••••"
-                disabled={resetPasswordMutation.isPending}
-                className="w-full px-4 py-2.5 pr-12 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent disabled:bg-gray-100 disabled:cursor-not-allowed bg-white text-gray-900"
-                required
-                minLength={6}
-              />
-              <button
-                type="button"
-                onClick={() => setShowPassword(!showPassword)}
-                className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 hover:text-gray-700"
-              >
-                <Icon
-                  icon={showPassword ? 'mdi:eye-off' : 'mdi:eye'}
-                  className="text-xl"
-                />
-              </button>
-            </div>
-          </div>
-
-          <div>
-            <label
-              htmlFor="confirmPassword"
-              className="block text-sm font-medium text-gray-700 mb-1"
-            >
-              Confirm New Password
-            </label>
-            <div className="relative">
-              <input
-                id="confirmPassword"
-                type={showConfirmPassword ? 'text' : 'password'}
-                value={confirmPassword}
-                onChange={(e) => setConfirmPassword(e.target.value)}
-                placeholder="••••••••"
-                disabled={resetPasswordMutation.isPending}
-                className="w-full px-4 py-2.5 pr-12 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent disabled:bg-gray-100 disabled:cursor-not-allowed bg-white text-gray-900"
-                required
-                minLength={6}
-              />
-              <button
-                type="button"
-                onClick={() => setShowConfirmPassword(!showConfirmPassword)}
-                className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 hover:text-gray-700"
-              >
-                <Icon
-                  icon={showConfirmPassword ? 'mdi:eye-off' : 'mdi:eye'}
-                  className="text-xl"
-                />
-              </button>
-            </div>
-          </div>
-
-          <button
-            type="submit"
-            disabled={resetPasswordMutation.isPending}
-            className="w-full py-3 bg-primary-600 text-white rounded-lg font-semibold hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 disabled:bg-gray-400 disabled:cursor-not-allowed transition-colors"
-          >
-            {resetPasswordMutation.isPending
-              ? 'Updating...'
-              : 'Update Password'}
-          </button>
-        </form>
-      </div>
-    </div>
-  );
-}

apps/qrcampaign/src/app/auth/signup/page.tsx

@@ -1,305 +0,0 @@
-import { useState } from 'react';
-import { useGitHubAuth } from '@imphnen-frontend-service/service';
-import { GithubOutlined } from '@ant-design/icons';
-import { useNavigate, Link } from 'react-router';
-import { toast } from 'sonner';
-import { Icon } from '@iconify/react';
-import { useAuthStore } from '../../features/auth/store/auth.store';
-import { useForm } from 'react-hook-form';
-import { zodResolver } from '@hookform/resolvers/zod';
-import { z } from 'zod';
-
-const signupSchema = z
-  .object({
-    fullname: z
-      .string()
-      .min(1, 'Full name is required')
-      .min(2, 'Full name must be at least 2 characters'),
-    email: z
-      .string()
-      .min(1, 'Email is required')
-      .email('Please enter a valid email address'),
-    password: z
-      .string()
-      .min(1, 'Password is required')
-      .min(6, 'Password must be at least 6 characters'),
-    confirmPassword: z.string().min(1, 'Please confirm your password'),
-  })
-  .refine((data) => data.password === data.confirmPassword, {
-    message: 'Passwords do not match',
-    path: ['confirmPassword'],
-  });
-
-type SignupFormData = z.infer<typeof signupSchema>;
-
-export default function SignupPage() {
-  const navigate = useNavigate();
-  const registerUser = useAuthStore((state) => state.register);
-
-  const { signInWithGitHub } = useGitHubAuth();
-  const [isGithubLoading, setIsGithubLoading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-  const [isSubmitting, setIsSubmitting] = useState(false);
-  const [showPassword, setShowPassword] = useState(false);
-  const [showConfirmPassword, setShowConfirmPassword] = useState(false);
-
-  const {
-    register,
-    handleSubmit,
-    formState: { errors, isValid },
-  } = useForm<SignupFormData>({
-    resolver: zodResolver(signupSchema),
-    mode: 'onChange',
-  });
-
-  const onSubmit = async (data: SignupFormData) => {
-    setError(null);
-    setIsSubmitting(true);
-
-    try {
-      await registerUser(data.fullname, data.email, data.password);
-      toast.success('Registration successful! Redirecting...');
-      navigate('/');
-    } catch (err: any) {
-      console.error('[Signup] Email signup failed:', err);
-      // Construct a user-friendly error message
-      const errorMessage =
-        err.response?.data?.message || err.message || 'Signup failed';
-      setError(errorMessage);
-    } finally {
-      setIsSubmitting(false);
-    }
-  };
-
-  const handleGithubLogin = async () => {
-    try {
-      setIsGithubLoading(true);
-
-      const result = await signInWithGitHub();
-
-      if (result?.url) {
-        globalThis.location.href = result.url;
-      } else {
-        setIsGithubLoading(false);
-        setError('Failed to get GitHub OAuth URL');
-      }
-    } catch (err) {
-      console.error('[Signup] GitHub login failed:', err);
-      setError((err as Error).message || 'GitHub login failed');
-      setIsGithubLoading(false);
-    }
-  };
-
-  const inputBaseClass =
-    'w-full px-4 py-2.5 border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent bg-white text-gray-900 placeholder:text-gray-400 disabled:bg-gray-100 disabled:cursor-not-allowed';
-  const inputErrorClass = 'border-red-500';
-  const inputNormalClass = 'border-gray-300';
-
-  return (
-    <div className="flex justify-center items-center min-h-screen bg-gray-50 p-4">
-      <div className="bg-white w-full max-w-md p-8 rounded-2xl shadow-lg border border-gray-200">
-        <div className="flex items-center justify-between mb-6">
-          <button
-            onClick={() => navigate('/')}
-            className="cursor-pointer text-primary-500 hover:text-primary-600 text-base font-sans flex items-center"
-          >
-            <Icon icon="ic:baseline-chevron-left" width="24" height="24" />
-            Back to Homepage
-          </button>
-        </div>
-
-        <div className="text-center mb-8">
-          <h2 className="text-3xl font-bold text-gray-900 mb-2">
-            Create Account
-          </h2>
-          <p className="text-gray-600">Join IMPHNEN community</p>
-        </div>
-
-        {error && (
-          <div className="mb-6 p-3 bg-red-50 border border-red-200 rounded-lg">
-            <p className="text-red-600 text-sm">{error}</p>
-          </div>
-        )}
-
-        <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
-          <div>
-            <label
-              htmlFor="fullname"
-              className="block text-sm font-medium text-gray-700 mb-1"
-            >
-              Full Name
-            </label>
-            <input
-              id="fullname"
-              type="text"
-              {...register('fullname')}
-              placeholder="John Doe"
-              disabled={isSubmitting}
-              className={`${inputBaseClass} ${
-                errors.fullname ? inputErrorClass : inputNormalClass
-              }`}
-            />
-            {errors.fullname && (
-              <p className="mt-1 text-sm text-red-500">
-                {errors.fullname.message}
-              </p>
-            )}
-          </div>
-
-          <div>
-            <label
-              htmlFor="email"
-              className="block text-sm font-medium text-gray-700 mb-1"
-            >
-              Email
-            </label>
-            <input
-              id="email"
-              type="email"
-              {...register('email')}
-              placeholder="yourname@example.com"
-              disabled={isSubmitting}
-              className={`${inputBaseClass} ${
-                errors.email ? inputErrorClass : inputNormalClass
-              }`}
-            />
-            {errors.email && (
-              <p className="mt-1 text-sm text-red-500">
-                {errors.email.message}
-              </p>
-            )}
-          </div>
-
-          <div>
-            <label
-              htmlFor="password"
-              className="block text-sm font-medium text-gray-700 mb-1"
-            >
-              Password
-            </label>
-            <div className="relative">
-              <input
-                id="password"
-                type={showPassword ? 'text' : 'password'}
-                {...register('password')}
-                placeholder="••••••••"
-                disabled={isSubmitting}
-                className={`${inputBaseClass} pr-12 ${
-                  errors.password ? inputErrorClass : inputNormalClass
-                }`}
-              />
-              <button
-                type="button"
-                onClick={() => setShowPassword(!showPassword)}
-                className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 hover:text-gray-700"
-              >
-                <Icon
-                  icon={showPassword ? 'mdi:eye-off' : 'mdi:eye'}
-                  className="text-xl"
-                />
-              </button>
-            </div>
-            {errors.password && (
-              <p className="mt-1 text-sm text-red-500">
-                {errors.password.message}
-              </p>
-            )}
-          </div>
-
-          <div>
-            <label
-              htmlFor="confirmPassword"
-              className="block text-sm font-medium text-gray-700 mb-1"
-            >
-              Confirm Password
-            </label>
-            <div className="relative">
-              <input
-                id="confirmPassword"
-                type={showConfirmPassword ? 'text' : 'password'}
-                {...register('confirmPassword')}
-                placeholder="••••••••"
-                disabled={isSubmitting}
-                className={`${inputBaseClass} pr-12 ${
-                  errors.confirmPassword ? inputErrorClass : inputNormalClass
-                }`}
-              />
-              <button
-                type="button"
-                onClick={() => setShowConfirmPassword(!showConfirmPassword)}
-                className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 hover:text-gray-700"
-              >
-                <Icon
-                  icon={showConfirmPassword ? 'mdi:eye-off' : 'mdi:eye'}
-                  className="text-xl"
-                />
-              </button>
-            </div>
-            {errors.confirmPassword && (
-              <p className="mt-1 text-sm text-red-500">
-                {errors.confirmPassword.message}
-              </p>
-            )}
-          </div>
-
-          <button
-            type="submit"
-            disabled={!isValid || isSubmitting}
-            className="w-full py-3 bg-primary-600 text-white rounded-lg font-semibold hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 disabled:bg-gray-400 disabled:cursor-not-allowed transition-colors cursor-pointer"
-          >
-            {isSubmitting ? 'Creating account...' : 'Create Account'}
-          </button>
-        </form>
-
-        <div className="my-6 flex items-center">
-          <div className="flex-1 border-t border-gray-300"></div>
-          <span className="px-4 text-sm text-gray-500">OR</span>
-          <div className="flex-1 border-t border-gray-300"></div>
-        </div>
-
-        <button
-          onClick={handleGithubLogin}
-          disabled={isGithubLoading}
-          type="button"
-          className="w-full py-3 flex items-center justify-center gap-2 bg-gray-100 border border-gray-300 rounded-lg font-semibold text-gray-900 hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 disabled:bg-gray-100 disabled:cursor-not-allowed transition-colors cursor-pointer"
-        >
-          <GithubOutlined className="text-xl" />
-          <span>
-            {isGithubLoading ? 'Connecting...' : 'Sign up with GitHub'}
-          </span>
-        </button>
-
-        <p className="mt-3 text-xs text-center text-gray-500">
-          Make sure your GitHub email is{' '}
-          <a
-            href="https://github.com/settings/emails"
-            target="_blank"
-            rel="noopener noreferrer"
-            className="text-primary-600 hover:underline"
-          >
-            set to public
-          </a>{' '}
-          for GitHub sign up to work.
-        </p>
-
-        <div className="mt-6 text-center">
-          <p className="text-gray-600 text-sm">
-            Already have an account?{' '}
-            <Link
-              to="/auth/login"
-              className="text-primary-600 hover:text-primary-700 font-semibold"
-            >
-              Sign in
-            </Link>
-          </p>
-        </div>
-
-        <div className="mt-6 text-center">
-          <p className="text-gray-500 text-xs">
-            By signing up, you agree to our Terms of Service and Privacy Policy
-          </p>
-        </div>
-      </div>
-    </div>
-  );
-}

apps/qrcampaign/src/app/error.tsx

@@ -1,29 +0,0 @@
-import { useRouteError, isRouteErrorResponse } from 'react-router-dom';
-
-export default function ErrorPage() {
-  const error = useRouteError();
-  let errorMessage: string;
-
-  if (isRouteErrorResponse(error)) {
-    errorMessage = error.statusText;
-  } else if (error instanceof Error) {
-    errorMessage = error.message;
-  } else if (typeof error === 'string') {
-    errorMessage = error;
-  } else {
-    console.error(error);
-    errorMessage = 'Unknown error';
-  }
-
-  return (
-    <div className="min-h-screen flex items-center justify-center bg-gray-50">
-      <div className="text-center">
-        <h1 className="text-6xl font-bold text-red-600 mb-4">Oops!</h1>
-        <p className="text-xl text-gray-700 mb-2">
-          Sorry, an unexpected error has occurred.
-        </p>
-        <p className="text-gray-500 italic">{errorMessage}</p>
-      </div>
-    </div>
-  );
-}

apps/qrcampaign/src/app/features/admin/api/campaign.service.ts

@@ -1,56 +0,0 @@
-import { api } from '../../auth/api/auth.service';
-
-// Types
-export interface Campaign {
-  id: string;
-  name: string;
-  url: string;
-  is_active: boolean;
-  created_at: string;
-  updated_at: string;
-}
-
-export interface CreateCampaignRequest {
-  name: string;
-  url: string;
-}
-
-interface CampaignsResponse {
-  success: boolean;
-  message: string;
-  data: Campaign[];
-}
-
-interface CampaignResponse {
-  success: boolean;
-  message: string;
-  data: Campaign;
-}
-
-interface DeleteResponse {
-  success: boolean;
-  message: string;
-}
-
-export const campaignService = {
-  getCampaigns: async (): Promise<Campaign[]> => {
-    const response = await api.get<CampaignsResponse>('/campaigns');
-    return response.data.data;
-  },
-
-  createCampaign: async (data: CreateCampaignRequest): Promise<Campaign> => {
-    const response = await api.post<CampaignResponse>('/campaigns', data);
-    return response.data.data;
-  },
-
-  activateCampaign: async (campaignId: string): Promise<Campaign> => {
-    const response = await api.put<CampaignResponse>(
-      `/campaigns/${campaignId}/activate`
-    );
-    return response.data.data;
-  },
-
-  deleteCampaign: async (campaignId: string): Promise<void> => {
-    await api.delete<DeleteResponse>(`/campaigns/${campaignId}`);
-  },
-};

apps/qrcampaign/src/app/features/admin/api/user.service.ts

@@ -1,53 +0,0 @@
-import { api } from '../../auth/api/auth.service';
-
-// Types
-export interface User {
-  id: string;
-  email: string;
-  name: string;
-  role: string;
-  created_at: string;
-  updated_at: string;
-}
-
-export interface UpdateUserRoleRequest {
-  role: string;
-}
-
-interface UsersResponse {
-  success: boolean;
-  message: string;
-  data: User[];
-}
-
-interface UserResponse {
-  success: boolean;
-  message: string;
-  data: User;
-}
-
-interface DeleteResponse {
-  success: boolean;
-  message: string;
-}
-
-export const userService = {
-  getUsers: async (): Promise<User[]> => {
-    const response = await api.get<UsersResponse>('/users');
-    return response.data.data;
-  },
-
-  updateUserRole: async (
-    userId: string,
-    role: string
-  ): Promise<User> => {
-    const response = await api.put<UserResponse>(`/users/${userId}/role`, {
-      role,
-    });
-    return response.data.data;
-  },
-
-  deleteUser: async (userId: string): Promise<void> => {
-    await api.delete<DeleteResponse>(`/users/${userId}`);
-  },
-};

apps/qrcampaign/src/app/features/admin/components/RequireAdmin.tsx

@@ -1,27 +0,0 @@
-import React from 'react';
-import { Navigate, useLocation } from 'react-router-dom';
-import { useAuthStore } from '../../auth/store/auth.store';
-
-interface RequireAdminProps {
-  children: JSX.Element;
-}
-
-export const RequireAdmin = ({ children }: RequireAdminProps) => {
-  const user = useAuthStore((state) => state.user);
-  const isAuthenticated = useAuthStore((state) => state.isAuthenticated);
-  const location = useLocation();
-
-  if (!isAuthenticated) {
-    return <Navigate to="/login" state={{ from: location }} replace />;
-  }
-
-  // Check if user has admin role
-  // user.role is now an object { id, name, permissions }
-  const userRole = user?.role?.name;
-  if (userRole !== 'Admin' && userRole !== 'Super Admin') {
-    // Redirect non-admins to home
-    return <Navigate to="/" replace />;
-  }
-
-  return children;
-};

apps/qrcampaign/src/app/features/admin/pages/AdminDashboard.tsx

@@ -1,64 +0,0 @@
-import { Outlet, Link, useLocation } from 'react-router-dom';
-import { useAuthStore } from '../../auth/store/auth.store';
-
-export const AdminDashboard = () => {
-  const logout = useAuthStore((state) => state.logout);
-  const location = useLocation();
-
-  const isActive = (path: string) => location.pathname.startsWith(path);
-
-  return (
-    <div className="min-h-screen bg-slate-100 flex">
-      {/* Sidebar */}
-      <aside className="w-64 bg-white border-r border-slate-200 flex flex-col">
-        <div className="p-6 border-b border-slate-200">
-          <h1 className="text-xl font-bold text-slate-800">Admin Panel</h1>
-          <p className="text-xs text-slate-500 mt-1">QR Campaign Manager</p>
-        </div>
-
-        <nav className="flex-1 p-4 space-y-1">
-          <Link
-            to="/admin/campaigns"
-            className={`block px-4 py-2 rounded-md transition-colors ${
-              isActive('/admin/campaigns')
-                ? 'bg-blue-50 text-blue-700'
-                : 'text-slate-600 hover:bg-slate-50'
-            }`}
-          >
-            Campaigns
-          </Link>
-          <Link
-            to="/admin/users"
-            className={`block px-4 py-2 rounded-md transition-colors ${
-              isActive('/admin/users')
-                ? 'bg-blue-50 text-blue-700'
-                : 'text-slate-600 hover:bg-slate-50'
-            }`}
-          >
-            Users
-          </Link>
-        </nav>
-
-        <div className="p-4 border-t border-slate-200">
-          <Link
-            to="/"
-            className="block px-4 py-2 text-sm text-slate-600 hover:text-slate-900 mb-2"
-          >
-            &larr; Back to App
-          </Link>
-          <button
-            onClick={logout}
-            className="w-full px-4 py-2 text-sm text-red-600 hover:bg-red-50 rounded-md transition-colors text-left"
-          >
-            Logout
-          </button>
-        </div>
-      </aside>
-
-      {/* Main Content */}
-      <main className="flex-1 p-8 overflow-auto">
-        <Outlet />
-      </main>
-    </div>
-  );
-};

apps/qrcampaign/src/app/features/admin/pages/CampaignManagement.tsx

@@ -1,237 +0,0 @@
-import { useState } from 'react';
-import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
-import axios from 'axios';
-import { useForm } from 'react-hook-form';
-import { toast } from 'sonner';
-
-interface Campaign {
-  id: string;
-  name: string;
-  url: string;
-  image_url?: string; // QR code image URL if we want to show it
-  is_active: boolean;
-  created_at: string;
-}
-
-interface CreateCampaignInputs {
-  name: string;
-  url: string;
-}
-
-export const CampaignManagement = () => {
-  const queryClient = useQueryClient();
-  const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
-  const {
-    register,
-    handleSubmit,
-    reset,
-    formState: { errors },
-  } = useForm<CreateCampaignInputs>();
-
-  // Fetch Campaigns
-  const {
-    data: campaigns,
-    isLoading,
-    isError,
-  } = useQuery({
-    queryKey: ['campaigns'],
-    queryFn: async () => {
-      const res = await axios.get('http://localhost:8080/api/v1/campaigns');
-      return res.data.data as Campaign[];
-    },
-  });
-
-  // Create Campaign
-  const createMutation = useMutation({
-    mutationFn: async (data: CreateCampaignInputs) => {
-      await axios.post('http://localhost:8080/api/v1/campaigns', data);
-    },
-    onSuccess: () => {
-      toast.success('Campaign created successfully');
-      queryClient.invalidateQueries({ queryKey: ['campaigns'] });
-      setIsCreateModalOpen(false);
-      reset();
-    },
-    onError: (error: any) => {
-      toast.error(error.response?.data?.message || 'Failed to create campaign');
-    },
-  });
-
-  // Activate Campaign
-  const activateMutation = useMutation({
-    mutationFn: async (id: string) => {
-      await axios.put(`http://localhost:8080/api/v1/campaigns/${id}/activate`);
-    },
-    onSuccess: () => {
-      toast.success('Campaign activated');
-      queryClient.invalidateQueries({ queryKey: ['campaigns'] });
-      // Also invalidate active QR for the main app
-      queryClient.invalidateQueries({ queryKey: ['active-campaign-qr'] });
-    },
-    onError: () => toast.error('Failed to activate campaign'),
-  });
-
-  // Delete Campaign
-  const deleteMutation = useMutation({
-    mutationFn: async (id: string) => {
-      await axios.delete(`http://localhost:8080/api/v1/campaigns/${id}`);
-    },
-    onSuccess: () => {
-      toast.success('Campaign deleted');
-      queryClient.invalidateQueries({ queryKey: ['campaigns'] });
-    },
-    onError: () => toast.error('Failed to delete campaign'),
-  });
-
-  const onCreateSubmit = (data: CreateCampaignInputs) => {
-    createMutation.mutate(data);
-  };
-
-  if (isLoading) return <div>Loading campaigns...</div>;
-  if (isError) return <div>Error loading campaigns.</div>;
-
-  return (
-    <div>
-      <div className="flex justify-between items-center mb-6">
-        <h2 className="text-2xl font-bold text-slate-800">Campaigns</h2>
-        <button
-          onClick={() => setIsCreateModalOpen(true)}
-          className="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 transition-colors"
-        >
-          + New Campaign
-        </button>
-      </div>
-
-      <div className="bg-white rounded-lg shadow overflow-hidden">
-        <table className="w-full text-left">
-          <thead className="bg-slate-50 text-slate-500 text-xs uppercase font-medium">
-            <tr>
-              <th className="px-6 py-3">Name</th>
-              <th className="px-6 py-3">URL</th>
-              <th className="px-6 py-3">Status</th>
-              <th className="px-6 py-3">Actions</th>
-            </tr>
-          </thead>
-          <tbody className="divide-y divide-slate-200">
-            {campaigns?.map((campaign) => (
-              <tr key={campaign.id} className="hover:bg-slate-50">
-                <td className="px-6 py-4 font-medium text-slate-900">
-                  {campaign.name}
-                </td>
-                <td className="px-6 py-4 text-slate-500 text-sm max-w-xs truncate">
-                  {campaign.url}
-                </td>
-                <td className="px-6 py-4">
-                  {campaign.is_active ? (
-                    <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-sm font-medium bg-green-100 text-green-800">
-                      Active
-                    </span>
-                  ) : (
-                    <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-slate-100 text-slate-800">
-                      Inactive
-                    </span>
-                  )}
-                </td>
-                <td className="px-6 py-4 space-x-2">
-                  {!campaign.is_active && (
-                    <button
-                      onClick={() => activateMutation.mutate(campaign.id)}
-                      className="text-blue-600 hover:text-blue-800 text-sm font-medium"
-                    >
-                      Activate
-                    </button>
-                  )}
-                  <button
-                    onClick={() => {
-                      if (
-                        window.confirm(
-                          'Are you sure you want to delete this campaign?'
-                        )
-                      ) {
-                        deleteMutation.mutate(campaign.id);
-                      }
-                    }}
-                    className="text-red-600 hover:text-red-800 text-sm font-medium"
-                  >
-                    Delete
-                  </button>
-                </td>
-              </tr>
-            ))}
-            {campaigns?.length === 0 && (
-              <tr>
-                <td
-                  colSpan={4}
-                  className="px-6 py-8 text-center text-slate-500"
-                >
-                  No campaigns found. Create one to get started.
-                </td>
-              </tr>
-            )}
-          </tbody>
-        </table>
-      </div>
-
-      {/* Basic Create Modal */}
-      {isCreateModalOpen && (
-        <div className="fixed inset-0 bg-black/50 flex items-center justify-center p-4 z-50">
-          <div className="bg-white rounded-lg shadow-xl max-w-md w-full p-6">
-            <h3 className="text-xl font-bold mb-4 text-slate-900">
-              Create New Campaign
-            </h3>
-            <form onSubmit={handleSubmit(onCreateSubmit)} className="space-y-4">
-              <div>
-                <label className="block text-sm font-medium text-slate-700 mb-1">
-                  Campaign Name
-                </label>
-                <input
-                  type="text"
-                  {...register('name', { required: 'Name is required' })}
-                  className="w-full px-3 py-2 border border-slate-300 rounded-md bg-white"
-                  placeholder="e.g. Summer Sale 2026"
-                />
-                {errors.name && (
-                  <p className="text-red-500 text-sm mt-1">
-                    {errors.name.message}
-                  </p>
-                )}
-              </div>
-              <div>
-                <label className="block text-sm font-medium text-slate-700 mb-1">
-                  Target URL
-                </label>
-                <input
-                  type="url"
-                  {...register('url', { required: 'URL is required' })}
-                  className="w-full px-3 py-2 border border-slate-300 rounded-md bg-white"
-                  placeholder="https://example.com/promo"
-                />
-                {errors.url && (
-                  <p className="text-red-500 text-sm mt-1">
-                    {errors.url.message}
-                  </p>
-                )}
-              </div>
-              <div className="flex justify-end gap-2 mt-6">
-                <button
-                  type="button"
-                  onClick={() => setIsCreateModalOpen(false)}
-                  className="px-4 py-2 text-slate-700 hover:bg-slate-100 rounded-md"
-                >
-                  Cancel
-                </button>
-                <button
-                  type="submit"
-                  disabled={createMutation.isPending}
-                  className="px-4 py-2 bg-blue-600 text-white hover:bg-blue-700 rounded-md disabled:opacity-50"
-                >
-                  {createMutation.isPending ? 'Creating...' : 'Create Campaign'}
-                </button>
-              </div>
-            </form>
-          </div>
-        </div>
-      )}
-    </div>
-  );
-};

apps/qrcampaign/src/app/features/admin/pages/UserManagement.tsx

@@ -1,121 +0,0 @@
-import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
-import axios from 'axios';
-import { toast } from 'sonner';
-
-interface User {
-  id: string;
-  name: string;
-  email: string;
-  role: string;
-  created_at: string;
-}
-
-export const UserManagement = () => {
-  const queryClient = useQueryClient();
-
-  // Fetch Users
-  const {
-    data: users,
-    isLoading,
-    isError,
-  } = useQuery({
-    queryKey: ['users'],
-    queryFn: async () => {
-      const res = await axios.get('http://localhost:8080/api/v1/users');
-      return res.data.data as User[];
-    },
-  });
-
-  // Update Role
-  const updateRoleMutation = useMutation({
-    mutationFn: async ({ id, role }: { id: string; role: string }) => {
-      await axios.put(`http://localhost:8080/api/v1/users/${id}/role`, {
-        role,
-      });
-    },
-    onSuccess: () => {
-      toast.success('User role updated');
-      queryClient.invalidateQueries({ queryKey: ['users'] });
-    },
-    onError: () => toast.error('Failed to update user role'),
-  });
-
-  // Delete User
-  const deleteMutation = useMutation({
-    mutationFn: async (id: string) => {
-      await axios.delete(`http://localhost:8080/api/v1/users/${id}`);
-    },
-    onSuccess: () => {
-      toast.success('User deleted');
-      queryClient.invalidateQueries({ queryKey: ['users'] });
-    },
-    onError: () => toast.error('Failed to delete user'),
-  });
-
-  if (isLoading) return <div>Loading users...</div>;
-  if (isError) return <div>Error loading users.</div>;
-
-  return (
-    <div>
-      <h2 className="text-2xl font-bold text-slate-800 mb-6">Users</h2>
-
-      <div className="bg-white rounded-lg shadow overflow-hidden">
-        <table className="w-full text-left">
-          <thead className="bg-slate-50 text-slate-500 text-xs uppercase font-medium">
-            <tr>
-              <th className="px-6 py-3">Name</th>
-              <th className="px-6 py-3">Email</th>
-              <th className="px-6 py-3">Role</th>
-              <th className="px-6 py-3">Actions</th>
-            </tr>
-          </thead>
-          <tbody className="divide-y divide-slate-200">
-            {users?.map((user) => (
-              <tr key={user.id} className="hover:bg-slate-50">
-                <td className="px-6 py-4 font-medium text-slate-900">
-                  {user.name}
-                </td>
-                <td className="px-6 py-4 text-slate-500 text-sm">
-                  {user.email}
-                </td>
-                <td className="px-6 py-4">
-                  <select
-                    value={user.role}
-                    onChange={(e) =>
-                      updateRoleMutation.mutate({
-                        id: user.id,
-                        role: e.target.value,
-                      })
-                    }
-                    disabled={user.email === 'admin@demo.com'} // Prevent changing main admin role for safety in demo
-                    className="bg-transparent border border-slate-300 rounded text-sm px-2 py-1 text-slate-700 focus:outline-none focus:ring-2 focus:ring-blue-500"
-                  >
-                    <option value="user">User</option>
-                    <option value="admin">Admin</option>
-                  </select>
-                </td>
-                <td className="px-6 py-4">
-                  <button
-                    onClick={() => {
-                      if (
-                        window.confirm(
-                          'Are you sure you want to delete this user?'
-                        )
-                      ) {
-                        deleteMutation.mutate(user.id);
-                      }
-                    }}
-                    disabled={user.email === 'admin@demo.com'}
-                    className="text-red-600 hover:text-red-800 text-sm font-medium disabled:opacity-50 disabled:cursor-not-allowed"
-                  >
-                    Delete
-                  </button>
-                </td>
-              </tr>
-            ))}
-          </tbody>
-        </table>
-      </div>
-    </div>
-  );
-};

apps/qrcampaign/src/app/features/auth/api/auth.service.ts

@@ -1,129 +0,0 @@
-import axios from 'axios';
-
-// Define the base URL for the API
-const API_URL = 'https://api-qr.imphnen.dev/api/v1';
-
-// Create a configured axios instance
-export const api = axios.create({
-  baseURL: API_URL,
-  headers: {
-    'Content-Type': 'application/json',
-  },
-});
-
-// Add interceptor to add token to requests
-api.interceptors.request.use(
-  (config) => {
-    const token = localStorage.getItem('token');
-    if (token) {
-      config.headers['Authorization'] = `Bearer ${token}`;
-    }
-    return config;
-  },
-  (error) => Promise.reject(error)
-);
-
-// Types
-export interface LoginRequest {
-  email: string;
-  password: string;
-}
-
-export interface RegisterRequest {
-  name: string;
-  email: string;
-  password: string;
-}
-
-// Backend user response
-interface BackendUser {
-  id: string;
-  email: string;
-  name: string;
-  role: string;
-  provider: string;
-  created_at: string;
-  updated_at: string;
-}
-
-// Frontend user type
-export interface User {
-  id: string;
-  email: string;
-  fullname: string;
-  role?: {
-    id: string;
-    name: string;
-    permissions: string[];
-  };
-}
-
-// Backend auth response
-interface BackendAuthResponse {
-  success: boolean;
-  message: string;
-  data: {
-    tokens: {
-      access_token: string;
-      refresh_token: string;
-    };
-    user: BackendUser;
-  };
-}
-
-export interface AuthResponse {
-  success: boolean;
-  message: string;
-  data: {
-    tokens: {
-      access_token: string;
-      refresh_token: string;
-    };
-    user: User;
-  };
-}
-
-// Helper to transform backend user to frontend user
-const transformUser = (backendUser: BackendUser): User => {
-  return {
-    id: backendUser.id,
-    email: backendUser.email,
-    fullname: backendUser.name,
-    role: {
-      id: '',
-      name: backendUser.role === 'admin' ? 'Admin' : backendUser.role === 'user' ? 'User' : 'User',
-      permissions: [],
-    },
-  };
-};
-
-export const authService = {
-  login: async (data: LoginRequest): Promise<AuthResponse> => {
-    const response = await api.post<BackendAuthResponse>('/auth/login', data);
-    return {
-      success: response.data.success,
-      message: response.data.message,
-      data: {
-        tokens: response.data.data.tokens,
-        user: transformUser(response.data.data.user),
-      },
-    };
-  },
-
-  register: async (data: RegisterRequest): Promise<AuthResponse> => {
-    const response = await api.post<BackendAuthResponse>('/auth/register', data);
-    return {
-      success: response.data.success,
-      message: response.data.message,
-      data: {
-        tokens: response.data.data.tokens,
-        user: transformUser(response.data.data.user),
-      },
-    };
-  },
-
-  getProfile: async (): Promise<User> => {
-    const response = await api.get<User>('/users/me');
-    return response.data;
-  },
-};

apps/qrcampaign/src/app/features/auth/components/RequireAuth.tsx

@@ -1,21 +0,0 @@
-import React from 'react';
-import { Navigate, useLocation } from 'react-router-dom';
-import { useAuthStore } from '../../../features/auth/store/auth.store';
-
-interface RequireAuthProps {
-  children: JSX.Element;
-}
-
-export const RequireAuth = ({ children }: RequireAuthProps) => {
-  const isAuthenticated = useAuthStore((state) => state.isAuthenticated);
-  const location = useLocation();
-
-  if (!isAuthenticated) {
-    // Redirect them to the /login page, but save the current location they were
-    // trying to go to when they were redirected. This allows us to send them
-    // along to that page after they login, which is a nicer user experience.
-    return <Navigate to="/login" state={{ from: location }} replace />;
-  }
-
-  return children;
-};

apps/qrcampaign/src/app/features/auth/pages/LoginPage.tsx

@@ -1,102 +0,0 @@
-import React, { useEffect } from 'react';
-import { useForm } from 'react-hook-form';
-import { useAuthStore } from '../store/auth.store';
-import { useNavigate, useLocation } from 'react-router-dom';
-
-// Reusing UI components logic or standard HTML for now to keep it simple and dependency-free if UI lib issues arise
-// But user mentioned shared UI libs, let's try to use standard Tailwind first to ensure speed.
-
-interface LoginFormInputs {
-  email: string;
-  pass: string;
-}
-
-export const LoginPage = () => {
-  const {
-    register,
-    handleSubmit,
-    formState: { errors, isSubmitting },
-  } = useForm<LoginFormInputs>();
-  const login = useAuthStore((state) => state.login);
-  const isAuthenticated = useAuthStore((state) => state.isAuthenticated);
-  const navigate = useNavigate();
-  const location = useLocation();
-
-  const from = location.state?.from?.pathname || '/';
-
-  useEffect(() => {
-    if (isAuthenticated) {
-      navigate(from, { replace: true });
-    }
-  }, [isAuthenticated, navigate, from]);
-
-  const onSubmit = async (data: LoginFormInputs) => {
-    const success = await login(data.email, data.pass);
-    if (success) {
-      // Get user from store to check role
-      const user = useAuthStore.getState().user;
-      const userRole = user?.role?.name;
-
-      // Redirect admin to admin dashboard
-      if (userRole === 'Admin' || userRole === 'Super Admin') {
-        navigate('/admin/campaigns', { replace: true });
-      } else {
-        navigate(from, { replace: true });
-      }
-    }
-  };
-
-  return (
-    <div className="min-h-screen flex items-center justify-center bg-slate-50 p-4">
-      <div className="w-full max-w-md bg-white rounded-lg shadow-lg p-8">
-        <h1 className="text-2xl font-bold text-center mb-6 text-slate-800">
-          Login
-        </h1>
-
-        <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
-          <div>
-            <label className="block text-sm font-medium text-slate-700 mb-1">
-              Email
-            </label>
-            <input
-              type="email"
-              {...register('email', { required: 'Email is required' })}
-              className="w-full px-3 py-2 border border-slate-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
-            />
-            {errors.email && (
-              <p className="text-red-500 text-sm mt-1">
-                {errors.email.message}
-              </p>
-            )}
-          </div>
-
-          <div>
-            <label className="block text-sm font-medium text-slate-700 mb-1">
-              Password
-            </label>
-            <input
-              type="password"
-              {...register('pass', { required: 'Password is required' })}
-              className="w-full px-3 py-2 border border-slate-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
-            />
-            {errors.pass && (
-              <p className="text-red-500 text-sm mt-1">{errors.pass.message}</p>
-            )}
-          </div>
-
-          <button
-            type="submit"
-            disabled={isSubmitting}
-            className="w-full bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed font-medium"
-          >
-            {isSubmitting ? 'Logging in...' : 'Login'}
-          </button>
-        </form>
-
-        <div className="mt-4 text-center text-sm text-slate-500">
-          <p>Demo credentials available in backend seeder.</p>
-        </div>
-      </div>
-    </div>
-  );
-};