fix(qr): fix empty state logic in the user management page

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

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

.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

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/infra/src/app/App.tsx

@@ -1,18 +1,23 @@
 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 24.11'] },
+  { 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'] },
 ];
 
@@ -171,15 +176,23 @@ export default function App() {
                 <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">Update Flake</p>
-                <p className="text-xs text-zinc-500">nix flake update</p>
+                <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>3</span>
+                  <span>4</span>
                 </div>
-                <p className="text-sm font-medium">Remote Build</p>
+                <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>

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,286 @@
+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

@@ -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,215 @@
+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

@@ -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;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,102 @@
+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>
+  );
+};

apps/qrcampaign/src/app/features/auth/store/auth.store.ts

@@ -0,0 +1,84 @@
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
+import { authService, User } from '../api/auth.service';
+
+interface AuthState {
+  user: User | null;
+  token: string | null;
+  isAuthenticated: boolean;
+  login: (email: string, pass: string) => Promise<boolean>;
+  register: (name: string, email: string, pass: string) => Promise<boolean>;
+  logout: () => void;
+  setUser: (user: User) => void;
+}
+
+export const useAuthStore = create<AuthState>()(
+  persist(
+    (set) => ({
+      user: null,
+      token: null,
+      isAuthenticated: false,
+
+      login: async (email, password) => {
+        try {
+          const response = await authService.login({ email, password });
+          
+          const token = response.data.tokens.access_token;
+          const refreshToken = response.data.tokens.refresh_token;
+          
+          localStorage.setItem('token', token);
+          localStorage.setItem('refreshToken', refreshToken);
+          
+          set({ 
+            user: response.data.user, 
+            token: token, 
+            isAuthenticated: true 
+          });
+          
+          return true;
+        } catch (error) {
+          console.error('Login failed:', error);
+          return false;
+        }
+      },
+
+      register: async (name, email, password) => {
+        try {
+          const response = await authService.register({ name, email, password });
+          
+          const token = response.data.tokens.access_token;
+          const refreshToken = response.data.tokens.refresh_token;
+          
+          localStorage.setItem('token', token);
+          localStorage.setItem('refreshToken', refreshToken);
+          
+          set({ 
+            user: response.data.user, 
+            token: token, 
+            isAuthenticated: true 
+          });
+          
+          return true;
+        } catch (error) {
+          console.error('Registration failed:', error);
+          throw error;
+        }
+      },
+
+      logout: () => {
+        localStorage.removeItem('token');
+        set({ user: null, token: null, isAuthenticated: false });
+      },
+
+      setUser: (user) => set({ user }),
+    }),
+    {
+      name: 'auth-storage', // name of the item in the storage (must be unique)
+      partialize: (state) => ({ 
+        user: state.user, 
+        token: state.token, 
+        isAuthenticated: state.isAuthenticated 
+      }),
+    }
+  )
+);

apps/qrcampaign/src/app/features/campaign/api/useActiveCampaignQR.ts

@@ -0,0 +1,17 @@
+import { useQuery } from '@tanstack/react-query';
+import axios from 'axios';
+
+export const useActiveCampaignQR = () => {
+  return useQuery({
+    queryKey: ['active-campaign-qr'],
+    queryFn: async () => {
+      // Assuming backend is running on localhost:8080
+      // In production, this should be an env var or relative path if proxied
+      const response = await axios.get('http://localhost:8080/api/v1/campaigns/active/qr', {
+        responseType: 'blob',
+      });
+      return URL.createObjectURL(response.data);
+    },
+    staleTime: 1000 * 60 * 5, // 5 minutes
+  });
+};

apps/qrcampaign/src/app/features/watermark/components/Dropzone.tsx

@@ -0,0 +1,99 @@
+import React, { useCallback, useState } from 'react';
+import { toast } from 'sonner';
+
+interface DropzoneProps {
+  onImageDropped: (file: File) => void;
+}
+
+export const Dropzone: React.FC<DropzoneProps> = ({ onImageDropped }) => {
+  const [isDragging, setIsDragging] = useState(false);
+
+  const handleDragOver = useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+    setIsDragging(true);
+  }, []);
+
+  const handleDragLeave = useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+    setIsDragging(false);
+  }, []);
+
+  const handleDrop = useCallback(
+    (e: React.DragEvent) => {
+      e.preventDefault();
+      setIsDragging(false);
+
+      const files = Array.from(e.dataTransfer.files);
+      if (files.length === 0) return;
+
+      const file = files[0];
+      if (!file.type.startsWith('image/')) {
+        toast.error('Please upload an image file.');
+        return;
+      }
+
+      onImageDropped(file);
+    },
+    [onImageDropped]
+  );
+
+  const handleFileInput = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      const files = e.target.files;
+      if (files && files.length > 0) {
+        const file = files[0];
+        if (!file.type.startsWith('image/')) {
+          toast.error('Please upload an image file.');
+          return;
+        }
+        onImageDropped(file);
+      }
+    },
+    [onImageDropped]
+  );
+
+  return (
+    <div
+      onDragOver={handleDragOver}
+      onDragLeave={handleDragLeave}
+      onDrop={handleDrop}
+      className={`border-2 border-dashed rounded-lg p-12 text-center transition-colors cursor-pointer ${
+        isDragging
+          ? 'border-blue-500 bg-blue-50'
+          : 'border-slate-300 hover:border-slate-400'
+      }`}
+      onClick={() => document.getElementById('file-upload')?.click()}
+    >
+      <input
+        id="file-upload"
+        type="file"
+        className="hidden"
+        accept="image/png, image/jpeg, image/jpg"
+        onChange={handleFileInput}
+      />
+      <div className="space-y-2">
+        <div className="flex justify-center">
+          {/* Simple upload icon */}
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+            strokeWidth={1.5}
+            stroke="currentColor"
+            className="w-12 h-12 text-slate-400"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5"
+            />
+          </svg>
+        </div>
+        <p className="text-lg font-medium text-slate-700">
+          Drop your image here, or click to upload
+        </p>
+        <p className="text-sm text-slate-500">Supports JPG and PNG</p>
+      </div>
+    </div>
+  );
+};

apps/qrcampaign/src/app/features/watermark/components/WatermarkEditor.tsx

@@ -0,0 +1,188 @@
+import React, { useState, useRef, useEffect, useCallback } from 'react';
+import html2canvas from 'html2canvas';
+import { toast } from 'sonner';
+
+interface WatermarkEditorProps {
+  imageFile: File;
+  qrCodeUrl: string;
+  onReset: () => void;
+}
+
+export const WatermarkEditor: React.FC<WatermarkEditorProps> = ({
+  imageFile,
+  qrCodeUrl,
+  onReset,
+}) => {
+  const [imageUrl, setImageUrl] = useState<string | null>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const qrRef = useRef<HTMLDivElement>(null);
+
+  // State for QR code
+  const [position, setPosition] = useState({ x: 20, y: 20 });
+  const [size, setSize] = useState(100);
+  const [isDragging, setIsDragging] = useState(false);
+  const [isResizing, setIsResizing] = useState(false);
+  const [dragOffset, setDragOffset] = useState({ x: 0, y: 0 });
+  const [startResizePos, setStartResizePos] = useState({ x: 0, y: 0 });
+  const [startResizeSize, setStartResizeSize] = useState(100);
+
+  // Load image
+  useEffect(() => {
+    const url = URL.createObjectURL(imageFile);
+    setImageUrl(url);
+    return () => URL.revokeObjectURL(url);
+  }, [imageFile]);
+
+  // Drag handlers
+  const handleMouseDown = (e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragging(true);
+    setDragOffset({
+      x: e.clientX - position.x,
+      y: e.clientY - position.y,
+    });
+  };
+
+  const handleResizeMouseDown = (e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsResizing(true);
+    setStartResizePos({ x: e.clientX, y: e.clientY });
+    setStartResizeSize(size);
+  };
+
+  const handleMouseMove = useCallback(
+    (e: MouseEvent) => {
+      if (isDragging) {
+        const newX = e.clientX - dragOffset.x;
+        const newY = e.clientY - dragOffset.y;
+
+        // Boundaries check (optional, but good UX)
+        if (containerRef.current) {
+          // const container = containerRef.current.getBoundingClientRect();
+          // Simple clamp? Or allow partial off-screen?
+          // Let's allow it to move freely within container
+        }
+
+        setPosition({ x: newX, y: newY });
+      }
+
+      if (isResizing) {
+        const deltaX = e.clientX - startResizePos.x;
+        const newSize = Math.max(50, startResizeSize + deltaX); // Min size 50px
+        setSize(newSize);
+      }
+    },
+    [isDragging, isResizing, dragOffset, startResizePos, startResizeSize]
+  );
+
+  const handleMouseUp = useCallback(() => {
+    setIsDragging(false);
+    setIsResizing(false);
+  }, []);
+
+  useEffect(() => {
+    if (isDragging || isResizing) {
+      window.addEventListener('mousemove', handleMouseMove);
+      window.addEventListener('mouseup', handleMouseUp);
+    } else {
+      window.removeEventListener('mousemove', handleMouseMove);
+      window.removeEventListener('mouseup', handleMouseUp);
+    }
+    return () => {
+      window.removeEventListener('mousemove', handleMouseMove);
+      window.removeEventListener('mouseup', handleMouseUp);
+    };
+  }, [isDragging, isResizing, handleMouseMove, handleMouseUp]);
+
+  const handleDownload = async () => {
+    if (!containerRef.current) return;
+
+    try {
+      const canvas = await html2canvas(containerRef.current, {
+        useCORS: true, // Important for QR if from external URL
+        backgroundColor: null,
+      });
+
+      const link = document.createElement('a');
+      link.download = `qr-campaign-${Date.now()}.png`;
+      link.href = canvas.toDataURL('image/png');
+      link.click();
+      toast.success('Image downloaded successfully!');
+    } catch (error) {
+      console.error('Download failed:', error);
+      toast.error('Failed to download image.');
+    }
+  };
+
+  if (!imageUrl) return <div>Loading image...</div>;
+
+  return (
+    <div className="flex flex-col items-center gap-4 w-full h-full">
+      <div className="flex gap-2 mb-4">
+        <button
+          onClick={onReset}
+          className="px-4 py-2 bg-slate-200 text-slate-700 rounded hover:bg-slate-300 transition-colors"
+        >
+          Change Image
+        </button>
+        <button
+          onClick={handleDownload}
+          className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 transition-colors shadow-lg"
+        >
+          Download Image
+        </button>
+      </div>
+
+      <div className="border border-slate-200 shadow-xl rounded-lg overflow-hidden bg-slate-50 inline-block relative">
+        <div
+          ref={containerRef}
+          className="relative inline-block"
+          style={{ lineHeight: 0 }}
+        >
+          <img
+            src={imageUrl}
+            alt="Uploaded"
+            className="max-h-[70vh] w-auto h-auto object-contain select-none"
+            draggable={false}
+          />
+
+          <div
+            ref={qrRef}
+            className="absolute cursor-move select-none group"
+            style={{
+              left: position.x,
+              top: position.y,
+              width: size,
+              height: size,
+              zIndex: 10,
+            }}
+            onMouseDown={handleMouseDown}
+          >
+            <img
+              src={qrCodeUrl}
+              alt="QR Code"
+              className="w-full h-full select-none pointer-events-none"
+              crossOrigin="anonymous" // Important for html2canvas
+            />
+
+            {/* Outline on hover/interaction */}
+            <div className="absolute inset-0 border-2 border-transparent group-hover:border-blue-400 group-active:border-blue-500 pointer-events-none rounded-sm transition-colors" />
+
+            {/* Resize handle */}
+            <div
+              className="absolute bottom-0 right-0 w-4 h-4 bg-blue-500 rounded-full cursor-nwse-resize opacity-0 group-hover:opacity-100 transition-opacity"
+              onMouseDown={handleResizeMouseDown}
+              style={{ transform: 'translate(50%, 50%)' }}
+            />
+          </div>
+        </div>
+      </div>
+
+      <p className="text-sm text-slate-500 mt-2">
+        Drag to move the QR code. Drag the blue dot to resize.
+      </p>
+    </div>
+  );
+};

apps/qrcampaign/src/app/layout.tsx

@@ -0,0 +1,83 @@
+import {
+  Outlet,
+  ScrollRestoration,
+  useLocation,
+  useNavigate,
+} from 'react-router-dom';
+import { useEffect, useState } from 'react';
+import { useAuthStore } from './features/auth/store/auth.store';
+import { Sidebar } from '../components/Sidebar';
+import { MenuOutlined } from '@ant-design/icons';
+
+// Helper to determine route types
+const isPublicRoute = (pathname: string) => {
+  return pathname.startsWith('/auth') || pathname === '/auth/callback';
+};
+
+export default function RootLayout() {
+  const location = useLocation();
+  const navigate = useNavigate();
+  const { isAuthenticated } = useAuthStore();
+  const [mobileSidebarOpen, setMobileSidebarOpen] = useState(false);
+
+  useEffect(() => {
+    // If we're on a public route, no auth check needed
+    if (isPublicRoute(location.pathname)) {
+      return;
+    }
+
+    // AUTH CHECK
+    if (!isAuthenticated) {
+      // No session -> Redirect to login
+      navigate('/auth/login', { replace: true });
+      return;
+    }
+  }, [location.pathname, navigate, isAuthenticated]);
+
+  // RENDER LOGIC
+
+  // 1. Public Pages (Full Layout Control)
+  if (isPublicRoute(location.pathname)) {
+    return (
+      <>
+        <Outlet />
+        <ScrollRestoration />
+      </>
+    );
+  }
+
+  // 2. Protected Pages
+  if (!isAuthenticated) {
+    return null;
+  }
+
+  return (
+    <div className="flex min-h-screen bg-gray-50">
+      <Sidebar
+        isOpen={mobileSidebarOpen}
+        onClose={() => setMobileSidebarOpen(false)}
+      />
+
+      <div className="flex-1 flex flex-col min-w-0 overflow-hidden">
+        {/* Mobile Header */}
+        <header className="lg:hidden bg-white border-b border-gray-200 px-4 py-3 flex items-center justify-between sticky top-0 z-30">
+          <div className="flex items-center gap-3">
+            <button
+              onClick={() => setMobileSidebarOpen(true)}
+              className="p-2 -ml-2 rounded-md hover:bg-gray-100 text-gray-700"
+            >
+              <MenuOutlined className="text-lg" />
+            </button>
+            <h1 className="font-semibold text-gray-900">QR Campaign</h1>
+          </div>
+        </header>
+
+        <main className="flex-1 overflow-y-auto p-4 md:p-8">
+          <Outlet />
+        </main>
+      </div>
+
+      <ScrollRestoration />
+    </div>
+  );
+}

apps/qrcampaign/src/app/page.tsx

@@ -0,0 +1,144 @@
+import { useState } from 'react';
+import { Dropzone } from './features/watermark/components/Dropzone';
+import { Button } from '@imphnen-frontend-service/ui/atoms';
+import { toast } from 'sonner';
+import { api } from './features/auth/api/auth.service';
+
+export default function HomePage() {
+  const [imageFile, setImageFile] = useState<File | null>(null);
+  const [generatedImage, setGeneratedImage] = useState<string | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+
+  const handleImageDropped = (file: File) => {
+    setImageFile(file);
+    setGeneratedImage(null); // Reset previous result
+    toast.success('Image selected ready for generation!');
+  };
+
+  const handleReset = () => {
+    setImageFile(null);
+    setGeneratedImage(null);
+  };
+
+  const handleGenerate = async () => {
+    if (!imageFile) return;
+
+    setIsLoading(true);
+    const formData = new FormData();
+    formData.append('image', imageFile);
+
+    try {
+      const response = await api.post('/campaigns/process-image', formData, {
+        headers: {
+          'Content-Type': 'multipart/form-data',
+        },
+        responseType: 'blob',
+      });
+
+      const imageUrl = URL.createObjectURL(response.data);
+      setGeneratedImage(imageUrl);
+      toast.success('QR Code generated successfully!');
+    } catch (error: any) {
+      console.error(error);
+      const message =
+        error.response?.data?.message || 'Failed to generate QR code.';
+      toast.error(message);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleDownload = () => {
+    if (!generatedImage) return;
+    const link = document.createElement('a');
+    link.href = generatedImage;
+    link.download = `qr-campaign-${Date.now()}.png`;
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+  };
+
+  return (
+    <div className="max-w-4xl mx-auto py-8 px-4 flex flex-col gap-8">
+      <header className="text-center mb-8">
+        <h1 className="text-3xl font-bold text-gray-900 mb-2">
+          QR Code Generator
+        </h1>
+        <p className="text-gray-600">
+          Upload your image to add the campaign QR code watermark.
+        </p>
+      </header>
+
+      <div className="bg-white rounded-xl shadow-sm border border-gray-100 p-8">
+        {!imageFile ? (
+          <Dropzone onImageDropped={handleImageDropped} />
+        ) : (
+          <div className="flex flex-col items-center gap-6">
+            <div className="relative w-full max-w-2xl bg-gray-50 rounded-lg overflow-hidden border border-gray-200">
+              {isLoading ? (
+                <div className="flex flex-col items-center justify-center p-20 gap-4">
+                  <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary-600"></div>
+                  <p className="text-gray-500 font-medium">
+                    Processing image...
+                  </p>
+                </div>
+              ) : generatedImage ? (
+                <img
+                  src={generatedImage}
+                  alt="Generated with QR"
+                  className="w-full h-auto object-contain max-h-[600px]"
+                />
+              ) : (
+                <div className="relative">
+                  <img
+                    src={URL.createObjectURL(imageFile)}
+                    alt="Original"
+                    className="w-full h-auto object-contain max-h-[400px]"
+                  />
+                  <div className="absolute inset-0 bg-black/5 flex items-center justify-center pointer-events-none">
+                    <span className="bg-black/60 text-white px-3 py-1 rounded-2xl text-sm">
+                      Original Image
+                    </span>
+                  </div>
+                </div>
+              )}
+            </div>
+
+            <div className="flex gap-4">
+              {!generatedImage && !isLoading && (
+                <>
+                  <Button
+                    variant="bordered"
+                    onClick={handleReset}
+                    className="w-32"
+                  >
+                    Cancel
+                  </Button>
+                  <Button
+                    variant="primary"
+                    onClick={handleGenerate}
+                    className="w-40"
+                    disabled={isLoading}
+                  >
+                    Generate QR
+                  </Button>
+                </>
+              )}
+
+              {generatedImage && (
+                <>
+                  <Button variant="bordered" onClick={handleReset}>
+                    Upload Another
+                  </Button>
+                  <Button variant="primary" onClick={handleDownload}>
+                    Download
+                  </Button>
+                </>
+              )}
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

apps/qrcampaign/src/components/Sidebar.tsx

@@ -0,0 +1,229 @@
+import {
+  AppstoreOutlined,
+  UsergroupAddOutlined,
+  QrcodeOutlined,
+  LogoutOutlined,
+  DownOutlined,
+  RightOutlined,
+} from '@ant-design/icons';
+import { Button } from '@imphnen-frontend-service/ui/atoms';
+import { FC, ReactElement, useState } from 'react';
+import { Link, useLocation } from 'react-router-dom';
+import { cn, For } from '@imphnen-frontend-service/utils';
+import { useAuthStore } from '../app/features/auth/store/auth.store';
+
+type MenuItem = {
+  label: string;
+  href?: string;
+  icon?: ReactElement;
+  children?: Array<{ label: string; href: string; icon?: ReactElement }>;
+  roles?: string[]; // Roles that can see this menu
+};
+
+const MENUS: MenuItem[] = [
+  {
+    label: 'QR Generator',
+    href: '/',
+    icon: <QrcodeOutlined className="text-[20px]" />,
+    roles: ['User', 'Admin', 'Super Admin'],
+  },
+  {
+    label: 'Campaign Management',
+    href: '/admin/campaigns',
+    icon: <AppstoreOutlined className="text-[20px]" />,
+    roles: ['Admin', 'Super Admin'],
+  },
+  {
+    label: 'User Management',
+    href: '/admin/users',
+    icon: <UsergroupAddOutlined className="text-[20px]" />,
+    roles: ['Admin', 'Super Admin'],
+  },
+];
+
+interface SidebarProps {
+  isOpen?: boolean;
+  onClose?: () => void;
+}
+
+export const Sidebar: FC<SidebarProps> = ({
+  isOpen = false,
+  onClose,
+}): ReactElement => {
+  const { user, logout } = useAuthStore();
+  const location = useLocation();
+  const [openGroups, setOpenGroups] = useState<Record<string, boolean>>({});
+
+  const userRole = user?.role?.name || 'User';
+
+  const isActive = (path: string) => {
+    if (path === '/' && location.pathname !== '/') return false;
+    return location.pathname.startsWith(path);
+  };
+
+  const toggleGroup = (groupLabel: string) => {
+    setOpenGroups((prev) => ({ ...prev, [groupLabel]: !prev[groupLabel] }));
+  };
+
+  // Filter menus based on role
+  const filteredMenus = MENUS.filter((menu) => {
+    if (!menu.roles) return true;
+    return menu.roles.includes(userRole);
+  });
+
+  const sidebarContent = (
+    <div className="w-[280px] bg-white h-dvh px-7 shadow-xl flex flex-col border-r border-gray-100">
+      <div className="shrink-0 py-10 lg:py-[60px]">
+        <div className="flex justify-between lg:justify-center items-center w-full">
+          <img
+            src="/images/imphnen-logo.svg"
+            alt="IMPHNEN Logo"
+            className="w-[150px]"
+          />
+          {onClose && (
+            <button
+              onClick={onClose}
+              className="lg:hidden p-2 rounded-lg hover:bg-gray-100 transition-colors cursor-pointer"
+              aria-label="Close sidebar"
+            >
+              <svg
+                className="w-5 h-5 text-gray-500"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M6 18L18 6M6 6l12 12"
+                />
+              </svg>
+            </button>
+          )}
+        </div>
+      </div>
+
+      {/* Navigation - Scrollable area */}
+      <nav className="flex-1 flex flex-col gap-4 w-full overflow-y-auto min-h-0 pb-4">
+        <For data={filteredMenus}>
+          {(menu) =>
+            menu.children && menu.children.length > 0 ? (
+              <div key={menu.label} className="w-full">
+                <button
+                  type="button"
+                  onClick={() => toggleGroup(menu.label)}
+                  className={cn(
+                    'flex items-center justify-between w-full gap-3 px-2 py-2.5 rounded-md cursor-pointer',
+                    openGroups[menu.label]
+                      ? 'bg-primary-50 text-primary-700'
+                      : 'text-gray-700 hover:bg-gray-50'
+                  )}
+                >
+                  <div className="flex items-center gap-3">
+                    {menu.icon}
+                    <span className="text-sm font-medium">{menu.label}</span>
+                  </div>
+                  <span className="text-xs">
+                    {openGroups[menu.label] ? (
+                      <DownOutlined />
+                    ) : (
+                      <RightOutlined />
+                    )}
+                  </span>
+                </button>
+
+                {openGroups[menu.label] && (
+                  <div className="mt-2 ml-6 flex flex-col gap-2">
+                    {menu.children.map((child) => (
+                      <Link
+                        key={child.href}
+                        to={child.href}
+                        className={cn(
+                          'flex items-center gap-3 px-2 py-2.5 rounded-md',
+                          isActive(child.href)
+                            ? 'bg-primary-100 text-primary-700'
+                            : 'text-gray-600 hover:bg-gray-50'
+                        )}
+                      >
+                        {child.icon}
+                        <span className="text-sm font-medium">
+                          {child.label}
+                        </span>
+                      </Link>
+                    ))}
+                  </div>
+                )}
+              </div>
+            ) : (
+              <Link
+                key={menu.href ?? menu.label}
+                to={menu.href ?? '#'}
+                className={cn(
+                  'flex items-center justify-start gap-3 px-2 py-2.5 rounded-md transition-colors',
+                  menu.href && isActive(menu.href)
+                    ? 'bg-primary-500 text-white hover:bg-primary-600 shadow-sm'
+                    : 'text-gray-700 hover:bg-gray-100'
+                )}
+              >
+                {menu.icon}
+                <span className="text-sm font-medium">{menu.label}</span>
+              </Link>
+            )
+          }
+        </For>
+      </nav>
+
+      {/* Footer - Fixed at bottom */}
+      <div className="shrink-0 w-full pb-10 lg:pb-[60px]">
+        <hr className="mb-5 border-gray-100" />
+        <div className="px-2 mb-4">
+          <div className="text-xs text-gray-500 font-medium uppercase mb-2 select-none">
+            Signed in as
+          </div>
+          <div className="flex items-center gap-3">
+            <div className="w-8 h-8 rounded-full bg-primary-100 flex items-center justify-center text-primary-600 font-bold text-xs ring-2 ring-white">
+              {user?.fullname?.charAt(0) || 'U'}
+            </div>
+            <div className="flex flex-col overflow-hidden">
+              <span className="text-sm font-medium truncate text-gray-900">
+                {user?.fullname}
+              </span>
+              <span className="text-xs text-gray-500 truncate">
+                {user?.role?.name}
+              </span>
+            </div>
+          </div>
+        </div>
+        <Button
+          onClick={logout}
+          variant="text"
+          className="items-center justify-start gap-3 px-2 py-2.5 text-gray-600 hover:text-red-600 dark:hover:text-red-600 hover:bg-red-50 dark:hover:bg-red-50 transition-colors w-full rounded-md"
+        >
+          <LogoutOutlined className="text-lg" />
+          <span className="text-sm font-medium">Log Out</span>
+        </Button>
+      </div>
+    </div>
+  );
+
+  return (
+    <>
+      <div className="hidden lg:block sticky top-0 h-screen overflow-y-auto border-r border-gray-200">
+        {sidebarContent}
+      </div>
+
+      {isOpen && (
+        <div className="lg:hidden fixed inset-0 z-50">
+          <div
+            className="fixed inset-0 bg-black/50 transition-opacity backdrop-blur-sm"
+            onClick={onClose}
+          />
+          <div className="fixed inset-y-0 left-0 z-50 transform transition-transform duration-300 ease-in-out">
+            {sidebarContent}
+          </div>
+        </div>
+      )}
+    </>
+  );
+};

apps/qrcampaign/src/index.css

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

apps/qrcampaign/src/main.tsx

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

apps/qrcampaign/src/styles.css

@@ -0,0 +1 @@
+/* You can add global styles to this file, and also import other style files */

apps/qrcampaign/tsconfig.app.json

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

apps/qrcampaign/tsconfig.json

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

apps/qrcampaign/tsconfig.spec.json

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

apps/qrcampaign/vite.config.mts

@@ -0,0 +1,43 @@
+/// <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: import.meta.dirname,
+  cacheDir: '../../node_modules/.vite/apps/qrcampaign',
+  server: {
+    port: 3008,
+    host: 'localhost',
+  },
+  preview: {
+    port: 3008,
+    host: 'localhost',
+  },
+  plugins: [react(), nxViteTsPaths(), nxCopyAssetsPlugin(['*.md'])],
+  // Uncomment this if you are using workers.
+  // worker: {
+  //  plugins: [ nxViteTsPaths() ],
+  // },
+  build: {
+    outDir: '../../dist/apps/qrcampaign',
+    emptyOutDir: true,
+    reportCompressedSize: true,
+    commonjsOptions: {
+      transformMixedEsModules: true,
+    },
+  },
+  test: {
+    name: 'qrcampaign',
+    watch: false,
+    globals: true,
+    environment: 'jsdom',
+    include: ['{src,tests}/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
+    reporters: ['default'],
+    coverage: {
+      reportsDirectory: '../../coverage/apps/qrcampaign',
+      provider: 'v8' as const,
+    },
+  },
+}));

docker-compose-qrcampaign.yml

@@ -0,0 +1,9 @@
+services:
+  qrcampaign:
+    build:
+      context: .
+      dockerfile: docker/qrcampaign.Dockerfile
+    ports:
+      - '127.0.0.1:3006:80'
+    restart: unless-stopped
+    container_name: qrcampaign

docker/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;"]

flake.lock

@@ -0,0 +1,61 @@
+{
+  "nodes": {
+    "flake-utils": {
+      "inputs": {
+        "systems": "systems"
+      },
+      "locked": {
+        "lastModified": 1731533236,
+        "narHash": "sha256-l0KFg5HjrsfsO/JpG+r7fRrqm12kzFHyUHqHCVpMMbI=",
+        "owner": "numtide",
+        "repo": "flake-utils",
+        "rev": "11707dc2f618dd54ca8739b309ec4fc024de578b",
+        "type": "github"
+      },
+      "original": {
+        "owner": "numtide",
+        "repo": "flake-utils",
+        "type": "github"
+      }
+    },
+    "nixpkgs": {
+      "locked": {
+        "lastModified": 1769170682,
+        "narHash": "sha256-oMmN1lVQU0F0W2k6OI3bgdzp2YOHWYUAw79qzDSjenU=",
+        "owner": "NixOS",
+        "repo": "nixpkgs",
+        "rev": "c5296fdd05cfa2c187990dd909864da9658df755",
+        "type": "github"
+      },
+      "original": {
+        "owner": "NixOS",
+        "ref": "nixos-unstable",
+        "repo": "nixpkgs",
+        "type": "github"
+      }
+    },
+    "root": {
+      "inputs": {
+        "flake-utils": "flake-utils",
+        "nixpkgs": "nixpkgs"
+      }
+    },
+    "systems": {
+      "locked": {
+        "lastModified": 1681028828,
+        "narHash": "sha256-Vy1rq5AaRuLzOxct8nz4T6wlgyUR7zLU309k9mBC768=",
+        "owner": "nix-systems",
+        "repo": "default",
+        "rev": "da67096a3b9bf56a91d16901293e51ba5b49a27e",
+        "type": "github"
+      },
+      "original": {
+        "owner": "nix-systems",
+        "repo": "default",
+        "type": "github"
+      }
+    }
+  },
+  "root": "root",
+  "version": 7
+}

flake.nix

@@ -12,7 +12,7 @@
         pkgs = import nixpkgs { inherit system; };
 
         # NPM dependencies hash (update with: nix run nixpkgs#prefetch-npm-deps -- package-lock.json)
-        npmDepsHash = "sha256-xmG0ej6GJk1HIFFmrB9CpovNA20sJ7RanFLMBCxKdy0=";
+        npmDepsHash = "sha256-6O36QDvjiD7j5MgBhID3+5IeJ47MUeK/025ZTKD0ltU=";
 
         # Import helpers
         mkViteApp = import ./nix/mkViteApp.nix {
@@ -33,6 +33,7 @@
           dimentorin = mkViteApp { name = "dimentorin"; buildScript = "dimentorin:build"; };
           hackathon = mkViteApp { name = "hackathon"; buildScript = "hackathon:build"; };
           infra = mkViteApp { name = "infra"; buildScript = "infra:build"; };
+          qrcampaign = mkViteApp { name = "qrcampaign"; buildScript = "qrcampaign:build"; };
 
           # Next.js app
           landing = landingApp;
@@ -44,7 +45,7 @@
         # Development shell
         devShells.default = pkgs.mkShell {
           buildInputs = with pkgs; [
-            nodejs_22
+            nodejs
             nodePackages.npm
             bun
 
@@ -63,7 +64,7 @@
             echo "  nx dev <app>    - Start development server"
             echo "  nx build <app>  - Build an app"
             echo ""
-            echo "Apps: landing, backoffice, gacha, dimentorin, hackathon"
+            echo "Apps: landing, backoffice, gacha, dimentorin, hackathon, qrcampaign"
             echo ""
             echo "Build packages with:"
             echo "  nix build .#landing"
@@ -71,6 +72,7 @@
             echo "  nix build .#gacha"
             echo "  nix build .#dimentorin"
             echo "  nix build .#hackathon"
+            echo "  nix build .#qrcampaign"
           '';
         };
       }
@@ -84,6 +86,7 @@
         dimentorin = import ./nix/modules/static-app.nix { inherit self; } { appName = "dimentorin"; };
         hackathon = import ./nix/modules/static-app.nix { inherit self; } { appName = "hackathon"; };
         infra = import ./nix/modules/static-app.nix { inherit self; } { appName = "infra"; };
+        qrcampaign = import ./nix/modules/static-app.nix { inherit self; } { appName = "qrcampaign"; };
 
         # All-in-one module that enables all apps
         all = { config, lib, pkgs, ... }: {
@@ -94,6 +97,7 @@
             self.nixosModules.dimentorin
             self.nixosModules.hackathon
             self.nixosModules.infra
+            self.nixosModules.qrcampaign
           ];
         };
       };
@@ -107,11 +111,12 @@
           dimentorin = self.packages.${final.system}.dimentorin;
           hackathon = self.packages.${final.system}.hackathon;
           infra = self.packages.${final.system}.infra;
+          qrcampaign = self.packages.${final.system}.qrcampaign;
           # Function to build hackathon with custom environment variables (e.g., Supabase)
           mkHackathonWithEnv = envVars: import ./nix/mkViteApp.nix {
             pkgs = final;
             src = self;
-            npmDepsHash = "sha256-xmG0ej6GJk1HIFFmrB9CpovNA20sJ7RanFLMBCxKdy0=";
+            npmDepsHash = "sha256-6O36QDvjiD7j5MgBhID3+5IeJ47MUeK/025ZTKD0ltU=";
           } { name = "hackathon"; buildScript = "hackathon:build"; inherit envVars; };
         };
       };

nix/landing.nix

@@ -10,7 +10,7 @@ pkgs.buildNpmPackage {
   makeCacheWritable = true;
 
   nativeBuildInputs = with pkgs; [
-    nodejs_22
+    nodejs
     nodePackages.npm
     python3  # Required for node-gyp (sharp, etc.)
   ];
@@ -48,7 +48,7 @@ pkgs.buildNpmPackage {
     cat > $out/bin/imphnen-landing <<EOF
     #!${pkgs.bash}/bin/bash
     cd $out/share/landing
-    exec ${pkgs.nodejs_22}/bin/node --jitless apps/landing/server.js "\$@"
+    exec ${pkgs.nodejs}/bin/node --jitless apps/landing/server.js "\$@"
     EOF
     chmod +x $out/bin/imphnen-landing
 

nix/mkViteApp.nix

@@ -12,7 +12,7 @@ pkgs.buildNpmPackage {
   makeCacheWritable = true;
 
   nativeBuildInputs = with pkgs; [
-    nodejs_22
+    nodejs
     nodePackages.npm
     util-linux  # For script command to create pseudo-terminal
   ];

nx.json

@@ -53,6 +53,13 @@
       "options": {
         "targetName": "e2e"
       }
+    },
+    {
+      "plugin": "@nx/vitest",
+      "options": {
+        "testTargetName": "vitest:test",
+        "ciTargetName": "test-ci"
+      }
     }
   ],
   "generators": {

package-lock.json

@@ -71,7 +71,7 @@
         "@tailwindcss/postcss": "^4.0.13",
         "@testing-library/dom": "10.4.0",
         "@testing-library/jest-dom": "^6.6.3",
-        "@testing-library/react": "^16.1.0",
+        "@testing-library/react": "16.1.0",
         "@testing-library/user-event": "^14.6.1",
         "@types/js-cookie": "^3.0.6",
         "@types/node": "^22.12.0",
@@ -9051,9 +9051,9 @@
       "license": "MIT"
     },
     "node_modules/@testing-library/react": {
-      "version": "16.3.0",
-      "resolved": "https://registry.npmjs.org/@testing-library/react/-/react-16.3.0.tgz",
-      "integrity": "sha512-kFSyxiEDwv1WLl2fgsq6pPBbw5aWKrsY2/noi1Id0TK0UParSF62oFQFGHXIyaG4pp2tEub/Zlel+fjjZILDsw==",
+      "version": "16.1.0",
+      "resolved": "https://registry.npmjs.org/@testing-library/react/-/react-16.1.0.tgz",
+      "integrity": "sha512-Q2ToPvg0KsVL0ohND9A3zLJWcOXXcO8IDu3fj11KhNt0UlCWyFyvnCIBkd12tidB2lkiVRG8VFqdhcqhqnAQtg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {

package.json

@@ -27,6 +27,10 @@
     "landing:build": "nx build landing",
     "landing:prod": "cd ./dist/apps/landing && npx next start",
     "landing:openapi": "npx openapi-typescript https://api.imphnen.dev/openapi.json -o ./apps/landing/src/openapi-types.ts",
+    "qrcampaign:dev": "nx dev qrcampaign",
+    "qrcampaign:build": "nx build qrcampaign",
+    "qrcampaign:test": "nx test qrcampaign",
+    "qrcampaign:prod": "serve ./dist/apps/qrcampaign",
     "ui:test": "nx test ui",
     "ui:build": "nx build ui"
   },
@@ -94,7 +98,7 @@
     "@tailwindcss/postcss": "^4.0.13",
     "@testing-library/dom": "10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/react": "^16.1.0",
+    "@testing-library/react": "16.1.0",
     "@testing-library/user-event": "^14.6.1",
     "@types/js-cookie": "^3.0.6",
     "@types/node": "^22.12.0",