fix(qr): update API url to https

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

.direnv/bin/nix-direnv-reload

@@ -0,0 +1,19 @@
+#!/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

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

.direnv/flake-inputs/8hx8jwa24q6rkzhca9iqy5ckk9rbphi1-source

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

.direnv/flake-inputs/jizz7ld5r2w11y03wrmnvwsskc45krj9-source

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

.direnv/flake-inputs/yj1wxm9hh8610iyzqnz75kvs6xl8j3my-source

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

.direnv/flake-profile-a5d5b61aa8a61b7d9d765e1daf971a9a578f1cfa

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

.env.example

@@ -1,3 +0,0 @@
-
-VITE_SUPABASE_URL=https://your-project-id.supabase.co
-VITE_SUPABASE_ANON_KEY=your-anon-key-here

.envrc

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

.github/workflows/nix-build.yml

@@ -0,0 +1,40 @@
+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,6 +10,7 @@ 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
 
@@ -54,6 +55,10 @@ Use the following commands to run in development mode:
   ```sh
   npm run landing:dev
   ```
+- **QR Campaign**:
+  ```sh
+  npm run qrcampaign:dev
+  ```
 
 ### Build
 
@@ -75,6 +80,10 @@ Use the following commands to build the applications:
   ```sh
   npm run landing:build
   ```
+- **QR Campaign**:
+  ```sh
+  npm run qrcampaign:build
+  ```
 
 ### Production
 
@@ -96,6 +105,10 @@ 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/hackathon/src/app/certificate/winner-data.json

@@ -1,236 +0,0 @@
-{
-  "message": "Success",
-  "data": [
-    {
-      "id": "afbead4b-2ffa-435e-ae7b-91f26e111fc6",
-      "team_id": "ab436f6e-027f-4831-873b-474345273491",
-      "team": {
-        "id": "ab436f6e-027f-4831-873b-474345273491",
-        "name": "nama timnya apa ya @All",
-        "description": "pikri carry",
-        "city": "Kota Depok",
-        "visibility": "public",
-        "logo": null,
-        "banner": "https://voymsjeqmvwrryetfldy.supabase.co/storage/v1/object/public/hackathon-uploads/teams/9a6dc902-c91b-4276-89cf-31e821531158-1764517227821.png",
-        "leader_id": "9a6dc902-c91b-4276-89cf-31e821531158",
-        "created_at": "2025-11-30T15:40:29.865564Z",
-        "updated_at": "2025-11-30T15:48:52.520850Z"
-      },
-      "rank": 1,
-      "prize": "Rp6.000.000",
-      "announced_at": "2025-12-15T16:41:01.931757Z",
-      "created_at": "2025-12-15T16:41:01.931757Z",
-      "updated_at": "2025-12-15T16:41:01.931757Z"
-    },
-    {
-      "id": "8e591dc6-3cff-4019-bdfc-5e42ea081208",
-      "team_id": "06cbf0f4-cdad-40d0-b0d0-1fa8a3d50968",
-      "team": {
-        "id": "06cbf0f4-cdad-40d0-b0d0-1fa8a3d50968",
-        "name": "TheLastOfUs",
-        "description": "We truly believe in Meaning First — designing innovation, powered by technology.",
-        "city": "Bandung",
-        "visibility": "private",
-        "logo": "https://voymsjeqmvwrryetfldy.supabase.co/storage/v1/object/public/hackathon-uploads/teams/a32c0e81-1fbd-4bec-8e91-4cd6d10f553b-1764074851150.png",
-        "banner": "https://voymsjeqmvwrryetfldy.supabase.co/storage/v1/object/public/hackathon-uploads/teams/a32c0e81-1fbd-4bec-8e91-4cd6d10f553b-1764074852181.png",
-        "leader_id": "a32c0e81-1fbd-4bec-8e91-4cd6d10f553b",
-        "created_at": "2025-11-25T12:47:33.040330Z",
-        "updated_at": "2025-11-25T12:47:33.040330Z"
-      },
-      "rank": 2,
-      "prize": "Rp4.000.000",
-      "announced_at": "2025-12-15T16:41:32.534295Z",
-      "created_at": "2025-12-15T16:41:32.534295Z",
-      "updated_at": "2025-12-15T16:41:32.534295Z"
-    },
-    {
-      "id": "5ca29971-5726-40dd-872c-853a6bfa03d9",
-      "team_id": "9d9ed9db-3523-47ae-a387-66c36dbec983",
-      "team": {
-        "id": "9d9ed9db-3523-47ae-a387-66c36dbec983",
-        "name": "Pecinta Capybara",
-        "description": "Ingin ikut meramaikan suasana.",
-        "city": "Tangerang",
-        "visibility": "public",
-        "logo": "https://voymsjeqmvwrryetfldy.supabase.co/storage/v1/object/public/hackathon-uploads/teams/648f6d3d-a92e-49cc-805e-2f600de87074-1764205746897.jpg",
-        "banner": "https://voymsjeqmvwrryetfldy.supabase.co/storage/v1/object/public/hackathon-uploads/teams/648f6d3d-a92e-49cc-805e-2f600de87074-1764205747479.png",
-        "leader_id": "648f6d3d-a92e-49cc-805e-2f600de87074",
-        "created_at": "2025-11-27T01:09:32.787150Z",
-        "updated_at": "2025-11-29T15:30:43.334609Z"
-      },
-      "rank": 3,
-      "prize": "Rp2.500.000",
-      "announced_at": "2025-12-15T16:41:59.091294Z",
-      "created_at": "2025-12-15T16:41:59.091294Z",
-      "updated_at": "2025-12-15T16:41:59.091294Z"
-    },
-    {
-      "id": "e9f82de6-f5d0-43c1-a0bd-4687f2e4ed5e",
-      "team_id": "95f782f4-433f-489d-a06d-eed89ca83beb",
-      "team": {
-        "id": "95f782f4-433f-489d-a06d-eed89ca83beb",
-        "name": "Savora",
-        "description": "a complete food ordering application for Indonesian SMEs (UMKM)",
-        "city": "Bandung",
-        "visibility": "private",
-        "logo": "https://voymsjeqmvwrryetfldy.supabase.co/storage/v1/object/public/hackathon-uploads/teams/748de15d-374a-4756-89e2-75754e90542f-1764071952995.png",
-        "banner": "https://voymsjeqmvwrryetfldy.supabase.co/storage/v1/object/public/hackathon-uploads/teams/748de15d-374a-4756-89e2-75754e90542f-1764071953753.png",
-        "leader_id": "748de15d-374a-4756-89e2-75754e90542f",
-        "created_at": "2025-11-25T11:57:52.098043Z",
-        "updated_at": "2025-11-25T11:59:14.508877Z"
-      },
-      "rank": 4,
-      "prize": "Rp500.000",
-      "announced_at": "2025-12-15T16:42:39.361469Z",
-      "created_at": "2025-12-15T16:42:39.361469Z",
-      "updated_at": "2025-12-15T16:42:39.361469Z"
-    },
-    {
-      "id": "ed93e080-0913-4c70-b69d-fce9bc0cdda7",
-      "team_id": "f9747574-8c01-4c3e-b20a-7ac1a70b947a",
-      "team": {
-        "id": "f9747574-8c01-4c3e-b20a-7ac1a70b947a",
-        "name": "AMBANET Corporation 🙀😸🤓",
-        "description": "Bersiaplah ambanet bakal mengguncang seluruh team hackathon ygy",
-        "city": "Kota Padang",
-        "visibility": "public",
-        "logo": "https://voymsjeqmvwrryetfldy.supabase.co/storage/v1/object/public/hackathon-uploads/teams/a5ea628a-24d9-4754-b461-3eda53da53bf-1764351234491.png",
-        "banner": "https://voymsjeqmvwrryetfldy.supabase.co/storage/v1/object/public/hackathon-uploads/teams/a5ea628a-24d9-4754-b461-3eda53da53bf-1764219109981.gif",
-        "leader_id": "a5ea628a-24d9-4754-b461-3eda53da53bf",
-        "created_at": "2025-11-27T04:48:53.080955Z",
-        "updated_at": "2025-11-29T13:31:51.276246Z"
-      },
-      "rank": 5,
-      "prize": "Rp500.000",
-      "announced_at": "2025-12-15T16:42:57.065225Z",
-      "created_at": "2025-12-15T16:42:57.065225Z",
-      "updated_at": "2025-12-15T16:42:57.065225Z"
-    },
-    {
-      "id": "7ed55b12-d585-419d-bae2-1a362a57798e",
-      "team_id": "4f3e2e85-3f3f-4880-9104-b3f66bb1c9d9",
-      "team": {
-        "id": "4f3e2e85-3f3f-4880-9104-b3f66bb1c9d9",
-        "name": "Pemuja Deadline Anti Refund",
-        "description": "Diusahakan banyak deadline tapi kg refund ~ \"Angga Kentod\"",
-        "city": "Kota Bandung",
-        "visibility": "public",
-        "logo": "https://voymsjeqmvwrryetfldy.supabase.co/storage/v1/object/public/hackathon-uploads/teams/6cf045e2-d853-4480-91b8-244fb0b76b7f-1764332887921.jpg",
-        "banner": null,
-        "leader_id": "6cf045e2-d853-4480-91b8-244fb0b76b7f",
-        "created_at": "2025-11-27T05:02:35.128625Z",
-        "updated_at": "2025-11-28T12:28:09.697222Z"
-      },
-      "rank": 6,
-      "prize": "Rp200.000",
-      "announced_at": "2025-12-15T16:43:09.471633Z",
-      "created_at": "2025-12-15T16:43:09.471633Z",
-      "updated_at": "2025-12-15T16:43:09.471633Z"
-    },
-    {
-      "id": "0b3a0b5c-2038-4d09-85a7-ae4709702951",
-      "team_id": "9d8cd404-8e69-4efd-a125-fc0863d7afc7",
-      "team": {
-        "id": "9d8cd404-8e69-4efd-a125-fc0863d7afc7",
-        "name": "Aku nak meletup",
-        "description": "masih pemula bg",
-        "city": "Boyolali",
-        "visibility": "public",
-        "logo": "https://voymsjeqmvwrryetfldy.supabase.co/storage/v1/object/public/hackathon-uploads/teams/c79d4b2b-e63f-4187-a8cd-520fde333ab3-1764211224866.jpg",
-        "banner": null,
-        "leader_id": "c79d4b2b-e63f-4187-a8cd-520fde333ab3",
-        "created_at": "2025-11-27T02:40:25.376372Z",
-        "updated_at": "2025-11-27T02:40:25.376372Z"
-      },
-      "rank": 7,
-      "prize": "Rp200.000",
-      "announced_at": "2025-12-15T16:43:22.467439Z",
-      "created_at": "2025-12-15T16:43:22.467439Z",
-      "updated_at": "2025-12-15T16:43:22.467439Z"
-    },
-    {
-      "id": "bb0706b9-b723-4a49-b0b0-3be9af70225b",
-      "team_id": "dd6c62dd-2632-4156-9da5-8ff9a3560f06",
-      "team": {
-        "id": "dd6c62dd-2632-4156-9da5-8ff9a3560f06",
-        "name": "Iseng Hackathon",
-        "description": "HME ITB Oke Champ",
-        "city": "Kota Bandung",
-        "visibility": "public",
-        "logo": null,
-        "banner": null,
-        "leader_id": "d1e4e3bf-098f-453e-bf00-612685d311d9",
-        "created_at": "2025-11-30T03:58:52.429673Z",
-        "updated_at": "2025-11-30T03:58:52.429673Z"
-      },
-      "rank": 8,
-      "prize": "Rp200.000",
-      "announced_at": "2025-12-15T16:43:34.191207Z",
-      "created_at": "2025-12-15T16:43:34.191207Z",
-      "updated_at": "2025-12-15T16:43:34.191207Z"
-    },
-    {
-      "id": "4a3e807c-2cf2-4557-a6af-99fcc726cebb",
-      "team_id": "52316c25-5697-4436-bfc2-02baef8ca956",
-      "team": {
-        "id": "52316c25-5697-4436-bfc2-02baef8ca956",
-        "name": "Gorengan 3 Ronde",
-        "description": "Jam 10 izin turun",
-        "city": "Kota Medan",
-        "visibility": "public",
-        "logo": "https://voymsjeqmvwrryetfldy.supabase.co/storage/v1/object/public/hackathon-uploads/teams/e7bec056-7f63-4642-a763-afa39c3c340e-1764509780084.png",
-        "banner": "https://voymsjeqmvwrryetfldy.supabase.co/storage/v1/object/public/hackathon-uploads/teams/e7bec056-7f63-4642-a763-afa39c3c340e-1764509810717.png",
-        "leader_id": "e7bec056-7f63-4642-a763-afa39c3c340e",
-        "created_at": "2025-11-30T13:36:52.344019Z",
-        "updated_at": "2025-11-30T13:36:52.344019Z"
-      },
-      "rank": 9,
-      "prize": "Rp200.000",
-      "announced_at": "2025-12-15T16:43:51.988908Z",
-      "created_at": "2025-12-15T16:43:51.988908Z",
-      "updated_at": "2025-12-15T16:43:51.988908Z"
-    },
-    {
-      "id": "e18827dd-839d-4e54-9126-c1faebce2c2c",
-      "team_id": "d2b2fb99-e934-405c-836e-711352e0f8a0",
-      "team": {
-        "id": "d2b2fb99-e934-405c-836e-711352e0f8a0",
-        "name": "Spark Developer",
-        "description": "Yang penting yakin untuk menang.",
-        "city": "Kota Batam",
-        "visibility": "public",
-        "logo": "https://voymsjeqmvwrryetfldy.supabase.co/storage/v1/object/public/hackathon-uploads/teams/087921fb-2d17-423b-9628-73de2176360f-1764486044138.png",
-        "banner": "https://voymsjeqmvwrryetfldy.supabase.co/storage/v1/object/public/hackathon-uploads/teams/087921fb-2d17-423b-9628-73de2176360f-1764486059581.jpg",
-        "leader_id": "087921fb-2d17-423b-9628-73de2176360f",
-        "created_at": "2025-11-29T04:49:54.266394Z",
-        "updated_at": "2025-11-30T07:01:02.316185Z"
-      },
-      "rank": 10,
-      "prize": "Rp200.000",
-      "announced_at": "2025-12-15T16:44:02.680036Z",
-      "created_at": "2025-12-15T16:44:02.680036Z",
-      "updated_at": "2025-12-15T16:44:02.680036Z"
-    },
-    {
-      "id": "a0ed8e58-f8e3-491c-8c03-20e82090d6f8",
-      "team_id": "d30d7d03-dce7-4220-9e7f-a537a45c54e0",
-      "team": {
-        "id": "d30d7d03-dce7-4220-9e7f-a537a45c54e0",
-        "name": "Eye of Horus",
-        "description": "Eye of horus",
-        "city": "Garut",
-        "visibility": "public",
-        "logo": "https://voymsjeqmvwrryetfldy.supabase.co/storage/v1/object/public/hackathon-uploads/teams/96dc1c2b-a1ef-441a-93d5-da2ccad37d81-1764145807852.png",
-        "banner": "https://voymsjeqmvwrryetfldy.supabase.co/storage/v1/object/public/hackathon-uploads/teams/96dc1c2b-a1ef-441a-93d5-da2ccad37d81-1764145810329.jpeg",
-        "leader_id": "96dc1c2b-a1ef-441a-93d5-da2ccad37d81",
-        "created_at": "2025-11-26T08:30:10.385714Z",
-        "updated_at": "2025-11-26T09:35:12.386986Z"
-      },
-      "rank": 11,
-      "prize": "hadiah",
-      "announced_at": "2025-12-16T04:19:09.502015Z",
-      "created_at": "2025-12-16T04:19:09.502015Z",
-      "updated_at": "2025-12-16T04:19:09.502015Z"
-    }
-  ]
-}

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

@@ -7,6 +7,7 @@ import {
   useAuthStore,
   useMyTeams,
   useTeamById,
+  useTeamSubmission,
   useWinners,
 } from '@imphnen-frontend-service/service';
 import QRCode from 'qrcode';
@@ -37,8 +38,20 @@ const formatOrdinalRank = (rank: number): string => {
   }
 };
 
-const CERT_WIDTH = 1000;
+// Keep the template size aligned with the SVG native size (842x595) using an integer multiplier.
-const CERT_HEIGHT = (CERT_WIDTH * 595) / 842; // matches blank_winner_cert.svg aspect ratio
+// 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 }>();
@@ -87,7 +100,12 @@ const CertificateWinnerPage: FC = (): ReactElement => {
     !!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 || [];
@@ -112,7 +130,7 @@ const CertificateWinnerPage: FC = (): ReactElement => {
     const certificateUrl = `${window.location.origin}/certificate/winner/${encodedCertId}`;
 
     QRCode.toDataURL(certificateUrl, {
-      width: 200,
+      width: s(200),
       margin: 1,
       color: {
         dark: '#000000',
@@ -130,13 +148,15 @@ const CertificateWinnerPage: FC = (): ReactElement => {
       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: 4,
+          scale: EXPORT_SCALE,
           useCORS: true,
           backgroundColor: '#ffffff',
           logging: false,
@@ -158,7 +178,14 @@ const CertificateWinnerPage: FC = (): ReactElement => {
     };
 
     generateCertificate();
-  }, [team?.name, memberNames, qrCodeUrl, winnerEntry?.rank]);
+  }, [
+    team?.name,
+    memberNames,
+    qrCodeUrl,
+    winnerEntry?.rank,
+    isLoadingSubmission,
+    submissionName,
+  ]);
 
   const handleDownloadCertificate = () => {
     if (!certificateImage) return;
@@ -323,7 +350,8 @@ const CertificateWinnerPage: FC = (): ReactElement => {
             style={{
               position: 'relative',
               backgroundImage: 'url(/images/blank_winner_cert.svg)',
-              backgroundSize: 'cover',
+              backgroundSize: '100% 100%',
+              backgroundRepeat: 'no-repeat',
               backgroundPosition: 'center',
               width: `${CERT_WIDTH}px`,
               height: `${CERT_HEIGHT}px`,
@@ -339,7 +367,7 @@ const CertificateWinnerPage: FC = (): ReactElement => {
             <div
               style={{
                 position: 'absolute',
-                top: '37%',
+                top: '35%',
                 left: '3.5%',
                 width: '55%',
               }}
@@ -350,7 +378,7 @@ const CertificateWinnerPage: FC = (): ReactElement => {
                   fontWeight: 'bold',
                   color: '#59bef5',
                   textAlign: 'left',
-                  fontSize: '28px',
+                  fontSize: `${s(28)}px`,
                   lineHeight: '1.2',
                   wordBreak: 'break-word',
                   margin: 0,
@@ -364,7 +392,7 @@ const CertificateWinnerPage: FC = (): ReactElement => {
             <div
               style={{
                 position: 'absolute',
-                top: '42.5%',
+                top: '40.5%',
                 left: '3.5%',
                 width: '55%',
               }}
@@ -374,7 +402,7 @@ const CertificateWinnerPage: FC = (): ReactElement => {
                 style={{
                   margin: 0,
                   fontFamily: 'Poppins, sans-serif',
-                  fontSize: '18px',
+                  fontSize: `${s(18)}px`,
                   lineHeight: '1.35',
                   color: '#59bef5',
                 }}
@@ -392,7 +420,7 @@ const CertificateWinnerPage: FC = (): ReactElement => {
             <div
               style={{
                 position: 'absolute',
-                top: '62%',
+                top: '60%',
                 left: '3.5%',
                 width: '60%',
               }}
@@ -401,7 +429,7 @@ const CertificateWinnerPage: FC = (): ReactElement => {
                 style={{
                   margin: 0,
                   fontFamily: 'Poppins, sans-serif',
-                  fontSize: '18px',
+                  fontSize: `${s(18)}px`,
                   lineHeight: '1.35',
                   color: '#6B6B6B',
                 }}
@@ -410,6 +438,10 @@ const CertificateWinnerPage: FC = (): ReactElement => {
                 <br />
                 <b>JUARA {winnerEntry.rank}</b> pada Hackathon IMPHNEN x
                 Kolosal.ai
+                <br />
+                <span>
+                  dengan nama project: <b>{submissionName}</b>
+                </span>
               </p>
             </div>
 
@@ -420,7 +452,7 @@ const CertificateWinnerPage: FC = (): ReactElement => {
                   position: 'absolute',
                   top: '8%',
                   right: '8.5%',
-                  width: '190px',
+                  width: `${s(190)}px`,
                   display: 'flex',
                   justifyContent: 'center',
                 }}
@@ -430,12 +462,12 @@ const CertificateWinnerPage: FC = (): ReactElement => {
                     display: 'inline-flex',
                     alignItems: 'center',
                     justifyContent: 'center',
-                    padding: '6px 16px',
+                    padding: `${s(6)}px ${s(16)}px`,
                     textAlign: 'center',
                     fontFamily: 'Poppins, sans-serif',
                     fontWeight: 700,
                     color: '#78350F',
-                    fontSize: '24px',
+                    fontSize: `${s(24)}px`,
                     lineHeight: '1',
                   }}
                 >
@@ -450,8 +482,8 @@ const CertificateWinnerPage: FC = (): ReactElement => {
                 position: 'absolute',
                 top: '33%',
                 right: '9.3%',
-                width: '190px',
+                width: `${s(190)}px`,
-                height: '190px',
+                height: `${s(190)}px`,
                 display: 'flex',
                 alignItems: 'center',
                 justifyContent: 'center',
@@ -461,7 +493,11 @@ const CertificateWinnerPage: FC = (): ReactElement => {
                 <img
                   src={qrCodeUrl}
                   alt="Certificate QR Code"
-                  style={{ width: '190px', height: '190px', display: 'block' }}
+                  style={{
+                    width: `${s(190)}px`,
+                    height: `${s(190)}px`,
+                    display: 'block',
+                  }}
                 />
               )}
             </div>

apps/infra/eslint.config.mjs

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

apps/infra/index.html

@@ -0,0 +1,15 @@
+<!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

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

apps/infra/project.json

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

apps/infra/src/app/App.tsx

@@ -0,0 +1,248 @@
+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

@@ -0,0 +1,58 @@
+@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

@@ -0,0 +1,14 @@
+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

@@ -0,0 +1,9 @@
+{
+  "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

@@ -0,0 +1,18 @@
+{
+  "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

@@ -0,0 +1,27 @@
+/// <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/hero-section.tsx

@@ -54,9 +54,19 @@ export function HeroSection() {
             animate={{ opacity: 1, y: 0 }}
             transition={{ duration: 0.5 }}
           >
-            <span className="inline-flex items-center rounded-full border px-3 py-1 text-sm w-fit">
+            <div className="flex flex-wrap items-center gap-2">
-              {communityLabel}
+              <span className="inline-flex items-center rounded-full border px-3 py-1 text-sm">
-            </span>
+                {communityLabel}
+              </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

@@ -104,11 +104,21 @@ export default function Footer() {
             <ul className="space-y-2"></ul>
           </div>
         </div>
-        <div className="mt-8 border-t pt-8 text-center">
+        <div className="mt-8 border-t pt-8 text-center space-y-2">
           <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/lib/fonts.ts

@@ -1,13 +1,23 @@
-import { Bai_Jamjuree, Poppins } from 'next/font/google';
+import localFont from 'next/font/local';
 
-export const baiJamjureeFont = Bai_Jamjuree({
+export const baiJamjureeFont = localFont({
-  subsets: ['latin'],
+  src: [
-  weight: ['300', '400', '500', '600', '700'],
+    { path: '../../public/fonts/BaiJamjuree-Light.ttf', weight: '300', style: 'normal' },
+    { 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 = Poppins({
+export const poppinsFont = localFont({
-  subsets: ['latin'],
+  src: [
-  weight: ['300', '400', '500', '600', '700'],
+    { path: '../../public/fonts/Poppins-Light.ttf', weight: '300', style: 'normal' },
+    { 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

@@ -0,0 +1,17 @@
+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

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

apps/qrcampaign/index.html

@@ -0,0 +1,16 @@
+<!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

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

apps/qrcampaign/project.json

@@ -0,0 +1,9 @@
+{
+  "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

@@ -0,0 +1,23 @@
+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

@@ -0,0 +1,262 @@
+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,
+} 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>
+
+      <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

@@ -0,0 +1,10 @@
+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

@@ -0,0 +1,3 @@
+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

@@ -0,0 +1,199 @@
+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 } 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>
+
+      <DataTable data={users} columns={columns} pageSize={10} />
+    </div>
+  );
+}

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

@@ -0,0 +1,183 @@
+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;