Revert package-lock.json to ensure ci (Nix build & cache) successful

Revert package.json to fix ci
Add deployment script
2026-02-14 17:06:39 +07:00 · 2026-02-14 17:01:39 +07:00 · 2026-02-14 16:44:23 +07:00 · 2026-02-14 16:38:15 +07:00 · 2026-02-13 20:01:51 +07:00
47 changed files with 3627 additions and 2 deletions
@@ -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
@@ -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;"]
@@ -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: {},
  },
 ];
@@ -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>
@@ -0,0 +1,9 @@
 import { join } from 'path';
 export default {
  plugins: {
    '@tailwindcss/postcss': {
      base: join(import.meta.dirname, '../../'),
    },
  },
 };
@@ -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": {}
 }
@@ -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>
  );
 }
@@ -0,0 +1,262 @@
 import { useState, useEffect } from 'react';
 import { ColumnDef } from '@tanstack/react-table';
 import { DataTable } from '@imphnen-frontend-service/ui/organisms';
 import {
  campaignService,
  Campaign,
  CreateCampaignRequest,
 } from '../../features/admin/api/campaign.service';
 import {
  DeleteOutlined,
  CheckCircleOutlined,
  PlusOutlined,
 } from '@ant-design/icons';
 export default function CampaignsPage() {
  const [campaigns, setCampaigns] = useState<Campaign[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [showCreateModal, setShowCreateModal] = useState(false);
  const [createLoading, setCreateLoading] = useState(false);
  const [formData, setFormData] = useState<CreateCampaignRequest>({
    name: '',
    url: '',
  });
  const fetchCampaigns = async () => {
    try {
      setLoading(true);
      setError(null);
      const data = await campaignService.getCampaigns();
      setCampaigns(data);
    } catch (err) {
      setError('Failed to load campaigns');
      console.error('Error fetching campaigns:', err);
    } finally {
      setLoading(false);
    }
  };
  useEffect(() => {
    fetchCampaigns();
  }, []);
  const handleCreateCampaign = async (e: React.FormEvent) => {
    e.preventDefault();
    try {
      setCreateLoading(true);
      await campaignService.createCampaign(formData);
      setShowCreateModal(false);
      setFormData({ name: '', url: '' });
      await fetchCampaigns();
    } catch (err) {
      console.error('Error creating campaign:', err);
      alert('Failed to create campaign');
    } finally {
      setCreateLoading(false);
    }
  };
  const handleActivateCampaign = async (campaignId: string) => {
    try {
      await campaignService.activateCampaign(campaignId);
      await fetchCampaigns();
    } catch (err) {
      console.error('Error activating campaign:', err);
      alert('Failed to activate campaign');
    }
  };
  const handleDeleteCampaign = async (
    campaignId: string,
    campaignName: string
  ) => {
    if (!confirm(`Are you sure you want to delete "${campaignName}"?`)) {
      return;
    }
    try {
      await campaignService.deleteCampaign(campaignId);
      await fetchCampaigns();
    } catch (err) {
      console.error('Error deleting campaign:', err);
      alert('Failed to delete campaign');
    }
  };
  const columns: ColumnDef<Campaign>[] = [
    {
      accessorKey: 'name',
      header: 'Name',
      cell: ({ row }) => (
        <div className="font-medium text-gray-900">{row.original.name}</div>
      ),
    },
    {
      accessorKey: 'url',
      header: 'URL',
      cell: ({ row }) => (
        <a
          href={row.original.url}
          target="_blank"
          rel="noopener noreferrer"
          className="text-primary-600 hover:underline"
        >
          {row.original.url}
        </a>
      ),
    },
    {
      accessorKey: 'is_active',
      header: 'Status',
      cell: ({ row }) => (
        <span
          className={`px-2 py-1 rounded-2xl text-xs font-medium ${
            row.original.is_active
              ? 'bg-success-100 text-success-800'
              : 'bg-gray-100 text-gray-800'
          }`}
        >
          {row.original.is_active ? 'Active' : 'Inactive'}
        </span>
      ),
    },
    {
      accessorKey: 'created_at',
      header: 'Created At',
      cell: ({ row }) => (
        <span className="text-gray-600">
          {new Date(row.original.created_at).toLocaleDateString()}
        </span>
      ),
    },
    {
      id: 'actions',
      header: 'Actions',
      cell: ({ row }) => (
        <div className="flex gap-2">
          {!row.original.is_active && (
            <button
              onClick={() => handleActivateCampaign(row.original.id)}
              className="p-2 text-success-600 hover:bg-success-50 rounded-md transition-colors cursor-pointer"
              title="Activate Campaign"
            >
              <CheckCircleOutlined />
            </button>
          )}
          <button
            onClick={() =>
              handleDeleteCampaign(row.original.id, row.original.name)
            }
            className="p-2 text-danger-600 hover:bg-danger-50 rounded-md transition-colors cursor-pointer"
            title="Delete Campaign"
          >
            <DeleteOutlined />
          </button>
        </div>
      ),
    },
  ];
  if (loading) {
    return (
      <div className="p-6">
        <div className="text-center py-12">
          <div className="text-gray-600">Loading campaigns...</div>
        </div>
      </div>
    );
  }
  if (error) {
    return (
      <div className="p-6">
        <div className="bg-red-50 border border-red-200 rounded-lg p-4 text-red-800">
          {error}
        </div>
      </div>
    );
  }
  return (
    <div className="p-6">
      <div className="flex justify-between items-center mb-6">
        <div>
          <h1 className="text-2xl font-bold text-gray-900">
            Campaign Management
          </h1>
          <p className="text-gray-600 mt-1">Manage your QR campaigns</p>
        </div>
        <button
          onClick={() => setShowCreateModal(true)}
          className="flex items-center gap-2 bg-primary-500 text-white px-4 py-2 rounded-lg hover:bg-primary-600 transition-colors cursor-pointer"
        >
          <PlusOutlined />
          Create Campaign
        </button>
      </div>
      <DataTable data={campaigns} columns={columns} pageSize={10} />
      {/* Create Campaign Modal */}
      {showCreateModal && (
        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
          <div className="bg-white rounded-lg p-6 w-full max-w-md">
            <h2 className="text-xl font-bold mb-4">Create New Campaign</h2>
            <form onSubmit={handleCreateCampaign}>
              <div className="mb-4">
                <label className="block text-sm font-medium text-gray-700 mb-2">
                  Campaign Name
                </label>
                <input
                  type="text"
                  value={formData.name}
                  onChange={(e) =>
                    setFormData({ ...formData, name: e.target.value })
                  }
                  className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                  placeholder="IMPHNEN Promo Campaign"
                  required
                />
              </div>
              <div className="mb-6">
                <label className="block text-sm font-medium text-gray-700 mb-2">
                  Campaign URL
                </label>
                <input
                  type="url"
                  value={formData.url}
                  onChange={(e) =>
                    setFormData({ ...formData, url: e.target.value })
                  }
                  className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                  placeholder="https://imphnen.dev/promo"
                  required
                />
              </div>
              <div className="flex gap-3 justify-end">
                <button
                  type="button"
                  onClick={() => {
                    setShowCreateModal(false);
                    setFormData({ name: '', url: '' });
                  }}
                  className="px-4 py-2 text-gray-700 bg-gray-100 rounded-md hover:bg-gray-200 transition-colors cursor-pointer"
                  disabled={createLoading}
                >
                  Cancel
                </button>
                <button
                  type="submit"
                  className="px-4 py-2 bg-primary-500 text-white rounded-md hover:bg-primary-600 transition-colors disabled:opacity-50 cursor-pointer"
                  disabled={createLoading}
                >
                  {createLoading ? 'Creating...' : 'Create'}
                </button>
              </div>
            </form>
          </div>
        </div>
      )}
    </div>
  );
 }
@@ -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>
  );
 }
@@ -0,0 +1,3 @@
 export default function AdminPage() {
  return <div className="p-4">Select a menu item from the sidebar.</div>;
 }
@@ -0,0 +1,199 @@
 import { useState, useEffect } from 'react';
 import { ColumnDef } from '@tanstack/react-table';
 import { DataTable } from '@imphnen-frontend-service/ui/organisms';
 import { userService, User } from '../../features/admin/api/user.service';
 import { DeleteOutlined, EditOutlined } from '@ant-design/icons';
 export default function UsersPage() {
  const [users, setUsers] = useState<User[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [editingUserId, setEditingUserId] = useState<string | null>(null);
  const [selectedRole, setSelectedRole] = useState<string>('');
  const fetchUsers = async () => {
    try {
      setLoading(true);
      setError(null);
      const data = await userService.getUsers();
      setUsers(data);
    } catch (err) {
      setError('Failed to load users');
      console.error('Error fetching users:', err);
    } finally {
      setLoading(false);
    }
  };
  useEffect(() => {
    fetchUsers();
  }, []);
  const handleUpdateRole = async (userId: string, currentRole: string) => {
    if (editingUserId === userId) {
      // Save the role
      try {
        await userService.updateUserRole(userId, selectedRole);
        setEditingUserId(null);
        setSelectedRole('');
        await fetchUsers();
      } catch (err) {
        console.error('Error updating user role:', err);
        alert('Failed to update user role');
      }
    } else {
      // Start editing
      setEditingUserId(userId);
      setSelectedRole(currentRole);
    }
  };
  const handleDeleteUser = async (userId: string, userName: string) => {
    if (!confirm(`Are you sure you want to delete user "${userName}"?`)) {
      return;
    }
    try {
      await userService.deleteUser(userId);
      await fetchUsers();
    } catch (err) {
      console.error('Error deleting user:', err);
      alert('Failed to delete user');
    }
  };
  const columns: ColumnDef<User>[] = [
    {
      accessorKey: 'name',
      header: 'Name',
      cell: ({ row }) => (
        <div className="font-medium text-gray-900">{row.original.name}</div>
      ),
    },
    {
      accessorKey: 'email',
      header: 'Email',
      cell: ({ row }) => (
        <div className="text-gray-600">{row.original.email}</div>
      ),
    },
    {
      accessorKey: 'role',
      header: 'Role',
      cell: ({ row }) => {
        const isEditing = editingUserId === row.original.id;
        return (
          <div className="flex items-center gap-2">
            {isEditing ? (
              <select
                value={selectedRole}
                onChange={(e) => setSelectedRole(e.target.value)}
                className="px-2 py-1 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
              >
                <option value="user">User</option>
                <option value="admin">Admin</option>
              </select>
            ) : (
              <span
                className={`px-2 py-1 rounded-2xl text-xs font-medium ${
                  row.original.role === 'admin'
                    ? 'bg-danger-100 text-danger-800'
                    : 'bg-primary-100 text-primary-800'
                }`}
              >
                {row.original.role.charAt(0).toUpperCase() +
                  row.original.role.slice(1)}
              </span>
            )}
          </div>
        );
      },
    },
    {
      accessorKey: 'created_at',
      header: 'Created At',
      cell: ({ row }) => (
        <span className="text-gray-600">
          {new Date(row.original.created_at).toLocaleDateString()}
        </span>
      ),
    },
    {
      id: 'actions',
      header: 'Actions',
      cell: ({ row }) => {
        const isEditing = editingUserId === row.original.id;
        return (
          <div className="flex gap-2">
            <button
              onClick={() =>
                handleUpdateRole(row.original.id, row.original.role)
              }
              className={`p-2 rounded-md transition-colors cursor-pointer ${
                isEditing
                  ? 'text-success-600 hover:bg-success-50'
                  : 'text-primary-600 hover:bg-primary-50'
              }`}
              title={isEditing ? 'Save Role' : 'Change Role'}
            >
              <EditOutlined />
            </button>
            {isEditing && (
              <button
                onClick={() => {
                  setEditingUserId(null);
                  setSelectedRole('');
                }}
                className="p-2 text-gray-600 hover:bg-gray-50 rounded-md transition-colors cursor-pointer"
                title="Cancel"
              >
                ✕
              </button>
            )}
            {!isEditing && (
              <button
                onClick={() =>
                  handleDeleteUser(row.original.id, row.original.name)
                }
                className="p-2 text-danger-600 hover:bg-danger-50 rounded-md transition-colors cursor-pointer"
                title="Delete User"
              >
                <DeleteOutlined />
              </button>
            )}
          </div>
        );
      },
    },
  ];
  if (loading) {
    return (
      <div className="p-6">
        <div className="text-center py-12">
          <div className="text-gray-600">Loading users...</div>
        </div>
      </div>
    );
  }
  if (error) {
    return (
      <div className="p-6">
        <div className="bg-red-50 border border-red-200 rounded-lg p-4 text-red-800">
          {error}
        </div>
      </div>
    );
  }
  return (
    <div className="p-6">
      <div className="mb-6">
        <h1 className="text-2xl font-bold text-gray-900">User Management</h1>
        <p className="text-gray-600 mt-1">Manage users and their roles</p>
      </div>
      <DataTable data={users} columns={columns} pageSize={10} />
    </div>
  );
 }
@@ -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;
@@ -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>
  );
 }
@@ -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>
  );
 }
@@ -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>
  );
 }
@@ -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>
  );
 }
@@ -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>
  );
 }
@@ -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}`);
  },
 };
@@ -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}`);
  },
 };
@@ -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;
 };
@@ -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>
  );
 };
@@ -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>
  );
 };
@@ -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>
  );
 };
@@ -0,0 +1,129 @@
 import axios from 'axios';
 // Define the base URL for the API
 const API_URL = import.meta.env.VITE_API_URL || 'http://localhost:8080/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;
  },
 };
@@ -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;
 };
@@ -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>
  );
 };
@@ -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 
      }),
    }
  )
 );
@@ -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
  });
 };
@@ -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>
  );
 };
@@ -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>
  );
 };
@@ -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>
  );
 }
@@ -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>
  );
 }
@@ -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>
      )}
    </>
  );
 };
@@ -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;
  }
 }
@@ -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>
 );
@@ -0,0 +1 @@
 /* You can add global styles to this file, and also import other style files */
@@ -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"]
 }
@@ -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"
 }
@@ -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"
  ]
 }
@@ -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,
    },
  },
 }));
@@ -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
@@ -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;"]
@@ -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;
@@ -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,6 +111,7 @@
          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;
@@ -53,6 +53,13 @@
      "options": {
        "targetName": "e2e"
      }
    },
    {
      "plugin": "@nx/vitest",
      "options": {
        "testTargetName": "vitest:test",
        "ciTargetName": "test-ci"
      }
    }
  ],
  "generators": {
@@ -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",
Author	SHA1	Message	Date
Hafid Nur	c463fcedb6	Revert package-lock.json to ensure ci (Nix build & cache) successful	2026-02-14 17:06:39 +07:00
Hafid Nur	d08f227e65	Revert package.json to fix ci	2026-02-14 17:01:39 +07:00
Hafid Nur	e3b98d9f35	Add deployment script Add Dockerfile, docker compose, and update Nix config for deployment	2026-02-14 16:44:23 +07:00
Hafid Nur	5bb5a05a25	Develop QR code generator app for campaign	2026-02-14 16:38:15 +07:00
Hafid Nur	c79580b4ea	Initialize a new NX project - QR campaign	2026-02-13 20:01:51 +07:00
		`@@ -0,0 +1 @@`
							`/* You can add global styles to this file, and also import other style files */`