{row.original.name}
+ ),
+ },
+ {
+ accessorKey: 'url',
+ header: 'URL',
+ cell: ({ row }) => (
+
+ {row.original.url}
+
+ ),
+ },
+ {
+ accessorKey: 'is_active',
+ header: 'Status',
+ cell: ({ row }) => (
+
+ {row.original.is_active ? 'Active' : 'Inactive'}
+
+ ),
+ },
+ {
+ accessorKey: 'created_at',
+ header: 'Created At',
+ cell: ({ row }) => (
+
+ {new Date(row.original.created_at).toLocaleDateString()}
+
+ ),
+ },
+ {
+ id: 'actions',
+ header: 'Actions',
+ cell: ({ row }) => (
+
+ {!row.original.is_active && (
+
+ )}
+
+
+ ),
+ },
+ ];
+
+ if (loading) {
+ return (
+
+
+ );
+ }
+
+ if (error) {
+ return (
+
+
+ Loading campaigns...
+
+
+ );
+ }
+
+ return (
+
+ {error}
+
+
+
+ );
+}
diff --git a/apps/qrcampaign/src/app/admin/layout.tsx b/apps/qrcampaign/src/app/admin/layout.tsx
new file mode 100644
index 0000000..8adf10d
--- /dev/null
+++ b/apps/qrcampaign/src/app/admin/layout.tsx
@@ -0,0 +1,10 @@
+import { Outlet } from 'react-router-dom';
+import { RequireAdmin } from '../features/admin/components/RequireAdmin';
+
+export default function AdminLayout() {
+ return (
+
+
+
+
+
+
+ + Campaign Management +
+Manage your QR campaigns
+
+
+ )}
+
+
+ Create New Campaign
+ +Select a menu item from the sidebar.
;
+}
diff --git a/apps/qrcampaign/src/app/admin/users/page.tsx b/apps/qrcampaign/src/app/admin/users/page.tsx
new file mode 100644
index 0000000..7dc434f
--- /dev/null
+++ b/apps/qrcampaign/src/app/admin/users/page.tsx
@@ -0,0 +1,199 @@
+import { useState, useEffect } from 'react';
+import { ColumnDef } from '@tanstack/react-table';
+import { DataTable } from '@imphnen-frontend-service/ui/organisms';
+import { userService, User } from '../../features/admin/api/user.service';
+import { DeleteOutlined, EditOutlined } from '@ant-design/icons';
+
+export default function UsersPage() {
+ const [users, setUsers] = useState{row.original.name}
+ ),
+ },
+ {
+ accessorKey: 'email',
+ header: 'Email',
+ cell: ({ row }) => (
+ {row.original.email}
+ ),
+ },
+ {
+ accessorKey: 'role',
+ header: 'Role',
+ cell: ({ row }) => {
+ const isEditing = editingUserId === row.original.id;
+ return (
+
+ {isEditing ? (
+
+ ) : (
+
+ {row.original.role.charAt(0).toUpperCase() +
+ row.original.role.slice(1)}
+
+ )}
+
+ );
+ },
+ },
+ {
+ accessorKey: 'created_at',
+ header: 'Created At',
+ cell: ({ row }) => (
+
+ {new Date(row.original.created_at).toLocaleDateString()}
+
+ ),
+ },
+ {
+ id: 'actions',
+ header: 'Actions',
+ cell: ({ row }) => {
+ const isEditing = editingUserId === row.original.id;
+ return (
+
+
+ {isEditing && (
+
+ )}
+ {!isEditing && (
+
+ )}
+
+ );
+ },
+ },
+ ];
+
+ if (loading) {
+ return (
+
+
+ );
+ }
+
+ if (error) {
+ return (
+
+
+ Loading users...
+
+
+ );
+ }
+
+ return (
+
+ {error}
+
+
+
+ );
+}
diff --git a/apps/qrcampaign/src/app/auth/callback/page.tsx b/apps/qrcampaign/src/app/auth/callback/page.tsx
new file mode 100644
index 0000000..6e37273
--- /dev/null
+++ b/apps/qrcampaign/src/app/auth/callback/page.tsx
@@ -0,0 +1,183 @@
+import { FC, ReactElement, useEffect, useState, useRef } from 'react';
+import { useNavigate } from 'react-router';
+import { useGitHubCallback } from '@imphnen-frontend-service/service';
+import { toast } from 'sonner';
+
+const CallbackPage: FC = (): ReactElement => {
+ const navigate = useNavigate();
+ const { mutateAsync: exchangeGitHubCode } = useGitHubCallback();
+ const [isProcessing, setIsProcessing] = useState(true);
+ const [error, setError] = useState
+
+
+ User Management
+Manage users and their roles
+
+
+ );
+ }
+
+ return (
+
+
+
+
+
+ {isPrivateEmailError && (
+ ⚠️
+ + GitHub Login Failed +
+{error}
+
+
+ )}
+
+ + Is your GitHub email set to private? +
++ GitHub login requires a public email address. Please follow + these steps: +
+-
+
- + Go to{' '} + + GitHub Email Settings + + +
- Uncheck "Keep my email addresses private" +
- + Or go to{' '} + + Profile Settings + {' '} + and set a public email + +
- Try signing in with GitHub again +
+ Alternatively, you can sign up using email and password instead. +
++ Redirecting to login page in 3 seconds... +
+
+
+ );
+};
+
+export default CallbackPage;
diff --git a/apps/qrcampaign/src/app/auth/forgot-password/page.tsx b/apps/qrcampaign/src/app/auth/forgot-password/page.tsx
new file mode 100644
index 0000000..773091f
--- /dev/null
+++ b/apps/qrcampaign/src/app/auth/forgot-password/page.tsx
@@ -0,0 +1,125 @@
+import { useState } from 'react';
+import { useForgotPassword } from '@imphnen-frontend-service/service';
+import { Link, useNavigate } from 'react-router';
+import { toast } from 'sonner';
+import { Icon } from '@iconify/react';
+
+export default function ForgotPasswordPage() {
+ const [email, setEmail] = useState('');
+ const [emailSent, setEmailSent] = useState(false);
+ const navigate = useNavigate();
+ const forgotPasswordMutation = useForgotPassword();
+
+ const handleSubmit = async (e: React.FormEvent) => {
+ e.preventDefault();
+
+ if (!email) {
+ toast.error('Please enter your email');
+ return;
+ }
+
+ try {
+ await forgotPasswordMutation.mutateAsync({ email });
+
+ setEmailSent(true);
+ toast.success('Password reset email sent! Check your inbox.');
+ } catch (err) {
+ toast.error((err as Error).message || 'Failed to send reset email');
+ }
+ };
+
+ if (emailSent) {
+ return (
+
+
+
+ + Completing login... +
+Please wait
+
+
+ );
+ }
+
+ return (
+
+
+
+
+
+
+ ✓
+
+ + Check Your Email +
++ We've sent a password reset link to {email} +
+
+
+ + Click the link in the email to reset your password. The link will + expire in 1 hour. +
+ + + + + + +
+
+ );
+}
diff --git a/apps/qrcampaign/src/app/auth/login/page.tsx b/apps/qrcampaign/src/app/auth/login/page.tsx
new file mode 100644
index 0000000..96746ca
--- /dev/null
+++ b/apps/qrcampaign/src/app/auth/login/page.tsx
@@ -0,0 +1,234 @@
+import { useState, useEffect } from 'react';
+import { GithubOutlined } from '@ant-design/icons';
+import { useNavigate, Link } from 'react-router';
+import { toast } from 'sonner';
+import { Icon } from '@iconify/react';
+import { useAuthStore } from '../../features/auth/store/auth.store';
+
+export default function LoginPage() {
+ const navigate = useNavigate();
+ const login = useAuthStore((state) => state.login);
+ const isAuthenticated = useAuthStore((state) => state.isAuthenticated);
+
+ const [isGithubLoading, setIsGithubLoading] = useState(false);
+ const [email, setEmail] = useState('');
+ const [password, setPassword] = useState('');
+ const [error, setError] = useState
+
+
+
+
+
+
+
+
+ + Forgot Password? +
++ No worries, we'll send you reset instructions +
+
+
+ );
+}
diff --git a/apps/qrcampaign/src/app/auth/reset-password/page.tsx b/apps/qrcampaign/src/app/auth/reset-password/page.tsx
new file mode 100644
index 0000000..6fe9091
--- /dev/null
+++ b/apps/qrcampaign/src/app/auth/reset-password/page.tsx
@@ -0,0 +1,171 @@
+import { useState, useEffect } from 'react';
+import {
+ useResetPassword,
+ useAuthStore,
+} from '@imphnen-frontend-service/service';
+import { useNavigate } from 'react-router';
+import { toast } from 'sonner';
+import { Icon } from '@iconify/react';
+
+export default function ResetPasswordPage() {
+ const navigate = useNavigate();
+ const { clearSession } = useAuthStore();
+ const resetPasswordMutation = useResetPassword();
+ const [password, setPassword] = useState('');
+ const [confirmPassword, setConfirmPassword] = useState('');
+ const [accessToken, setAccessToken] = useState
+ {/*
+
+
+
*/}
+
+
+
+
+ {error && (
+ + Welcome Back +
+Sign in to continue to IMPHNEN
+
+
+ )}
+
+ {/* Traditional Login Form */}
+
+
+ {error}
+
+
+
+
+
+
+
+
+
+
+ Or continue with
+
+
+ + Make sure your GitHub email is{' '} + + set to public + {' '} + for GitHub sign in to work. +
+ +
+
+
+ + Don't have an account?{' '} + + Sign up + +
+
+
+ + By signing in, you agree to our Terms of Service and Privacy Policy +
+
+
+ );
+ }
+
+ return (
+
+
+
+ Verifying reset link...
+
+
+ );
+}
diff --git a/apps/qrcampaign/src/app/auth/signup/page.tsx b/apps/qrcampaign/src/app/auth/signup/page.tsx
new file mode 100644
index 0000000..ffd5100
--- /dev/null
+++ b/apps/qrcampaign/src/app/auth/signup/page.tsx
@@ -0,0 +1,305 @@
+import { useState } from 'react';
+import { useGitHubAuth } from '@imphnen-frontend-service/service';
+import { GithubOutlined } from '@ant-design/icons';
+import { useNavigate, Link } from 'react-router';
+import { toast } from 'sonner';
+import { Icon } from '@iconify/react';
+import { useAuthStore } from '../../features/auth/store/auth.store';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { z } from 'zod';
+
+const signupSchema = z
+ .object({
+ fullname: z
+ .string()
+ .min(1, 'Full name is required')
+ .min(2, 'Full name must be at least 2 characters'),
+ email: z
+ .string()
+ .min(1, 'Email is required')
+ .email('Please enter a valid email address'),
+ password: z
+ .string()
+ .min(1, 'Password is required')
+ .min(6, 'Password must be at least 6 characters'),
+ confirmPassword: z.string().min(1, 'Please confirm your password'),
+ })
+ .refine((data) => data.password === data.confirmPassword, {
+ message: 'Passwords do not match',
+ path: ['confirmPassword'],
+ });
+
+type SignupFormData = z.infer
+
+
+
+
+
+ + Set New Password +
+Enter your new password below
+
+
+ );
+}
diff --git a/apps/qrcampaign/src/app/error.tsx b/apps/qrcampaign/src/app/error.tsx
new file mode 100644
index 0000000..3859b00
--- /dev/null
+++ b/apps/qrcampaign/src/app/error.tsx
@@ -0,0 +1,29 @@
+import { useRouteError, isRouteErrorResponse } from 'react-router-dom';
+
+export default function ErrorPage() {
+ const error = useRouteError();
+ let errorMessage: string;
+
+ if (isRouteErrorResponse(error)) {
+ errorMessage = error.statusText;
+ } else if (error instanceof Error) {
+ errorMessage = error.message;
+ } else if (typeof error === 'string') {
+ errorMessage = error;
+ } else {
+ console.error(error);
+ errorMessage = 'Unknown error';
+ }
+
+ return (
+
+
+
+
+
+
+
+
+
+ {error && (
+ + Create Account +
+Join IMPHNEN community
+
+
+ )}
+
+
+
+ {error}
+
+
+ OR
+
+
+
+
+
+ + Make sure your GitHub email is{' '} + + set to public + {' '} + for GitHub sign up to work. +
+ +
+
+
+ + Already have an account?{' '} + + Sign in + +
+
+
+ + By signing up, you agree to our Terms of Service and Privacy Policy +
+
+
+ );
+}
diff --git a/apps/qrcampaign/src/app/features/admin/api/campaign.service.ts b/apps/qrcampaign/src/app/features/admin/api/campaign.service.ts
new file mode 100644
index 0000000..7c02970
--- /dev/null
+++ b/apps/qrcampaign/src/app/features/admin/api/campaign.service.ts
@@ -0,0 +1,56 @@
+import { api } from '../../auth/api/auth.service';
+
+// Types
+export interface Campaign {
+ id: string;
+ name: string;
+ url: string;
+ is_active: boolean;
+ created_at: string;
+ updated_at: string;
+}
+
+export interface CreateCampaignRequest {
+ name: string;
+ url: string;
+}
+
+interface CampaignsResponse {
+ success: boolean;
+ message: string;
+ data: Campaign[];
+}
+
+interface CampaignResponse {
+ success: boolean;
+ message: string;
+ data: Campaign;
+}
+
+interface DeleteResponse {
+ success: boolean;
+ message: string;
+}
+
+export const campaignService = {
+ getCampaigns: async (): Promise
+
+ Oops!
++ Sorry, an unexpected error has occurred. +
+{errorMessage}
+
+ {/* Sidebar */}
+
+
+ {/* Main Content */}
+
+
+
+ );
+};
diff --git a/apps/qrcampaign/src/app/features/admin/pages/CampaignManagement.tsx b/apps/qrcampaign/src/app/features/admin/pages/CampaignManagement.tsx
new file mode 100644
index 0000000..4c15e43
--- /dev/null
+++ b/apps/qrcampaign/src/app/features/admin/pages/CampaignManagement.tsx
@@ -0,0 +1,237 @@
+import { useState } from 'react';
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import axios from 'axios';
+import { useForm } from 'react-hook-form';
+import { toast } from 'sonner';
+
+interface Campaign {
+ id: string;
+ name: string;
+ url: string;
+ image_url?: string; // QR code image URL if we want to show it
+ is_active: boolean;
+ created_at: string;
+}
+
+interface CreateCampaignInputs {
+ name: string;
+ url: string;
+}
+
+export const CampaignManagement = () => {
+ const queryClient = useQueryClient();
+ const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
+ const {
+ register,
+ handleSubmit,
+ reset,
+ formState: { errors },
+ } = useFormLoading campaigns...
;
+ if (isError) return Error loading campaigns.
;
+
+ return (
+
+
+ );
+};
diff --git a/apps/qrcampaign/src/app/features/admin/pages/UserManagement.tsx b/apps/qrcampaign/src/app/features/admin/pages/UserManagement.tsx
new file mode 100644
index 0000000..471f8c1
--- /dev/null
+++ b/apps/qrcampaign/src/app/features/admin/pages/UserManagement.tsx
@@ -0,0 +1,121 @@
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import axios from 'axios';
+import { toast } from 'sonner';
+
+interface User {
+ id: string;
+ name: string;
+ email: string;
+ role: string;
+ created_at: string;
+}
+
+export const UserManagement = () => {
+ const queryClient = useQueryClient();
+
+ // Fetch Users
+ const {
+ data: users,
+ isLoading,
+ isError,
+ } = useQuery({
+ queryKey: ['users'],
+ queryFn: async () => {
+ const res = await axios.get('http://localhost:8080/api/v1/users');
+ return res.data.data as User[];
+ },
+ });
+
+ // Update Role
+ const updateRoleMutation = useMutation({
+ mutationFn: async ({ id, role }: { id: string; role: string }) => {
+ await axios.put(`http://localhost:8080/api/v1/users/${id}/role`, {
+ role,
+ });
+ },
+ onSuccess: () => {
+ toast.success('User role updated');
+ queryClient.invalidateQueries({ queryKey: ['users'] });
+ },
+ onError: () => toast.error('Failed to update user role'),
+ });
+
+ // Delete User
+ const deleteMutation = useMutation({
+ mutationFn: async (id: string) => {
+ await axios.delete(`http://localhost:8080/api/v1/users/${id}`);
+ },
+ onSuccess: () => {
+ toast.success('User deleted');
+ queryClient.invalidateQueries({ queryKey: ['users'] });
+ },
+ onError: () => toast.error('Failed to delete user'),
+ });
+
+ if (isLoading) return
+
+
+ Campaigns
+ +
+
+
+
+
+
+ {/* Basic Create Modal */}
+ {isCreateModalOpen && (
+ | Name | +URL | +Status | +Actions | +
|---|---|---|---|
| + {campaign.name} + | ++ {campaign.url} + | ++ {campaign.is_active ? ( + + Active + + ) : ( + + Inactive + + )} + | ++ {!campaign.is_active && ( + + )} + + | +
| + No campaigns found. Create one to get started. + | +
+
+ )}
+
+
+ + Create New Campaign +
+ +Loading users...
;
+ if (isError) return Error loading users.
;
+
+ return (
+
+
+ );
+};
diff --git a/apps/qrcampaign/src/app/features/auth/api/auth.service.ts b/apps/qrcampaign/src/app/features/auth/api/auth.service.ts
new file mode 100644
index 0000000..9c0bcb8
--- /dev/null
+++ b/apps/qrcampaign/src/app/features/auth/api/auth.service.ts
@@ -0,0 +1,129 @@
+import axios from 'axios';
+
+// Define the base URL for the API
+const API_URL = 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): PromiseUsers
+ +
+
+
+
+
+ | Name | +Role | +Actions | +|
|---|---|---|---|
| + {user.name} + | ++ {user.email} + | ++ + | ++ + | +
+
+ );
+};
diff --git a/apps/qrcampaign/src/app/features/auth/store/auth.store.ts b/apps/qrcampaign/src/app/features/auth/store/auth.store.ts
new file mode 100644
index 0000000..49b891d
--- /dev/null
+++ b/apps/qrcampaign/src/app/features/auth/store/auth.store.ts
@@ -0,0 +1,84 @@
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
+import { authService, User } from '../api/auth.service';
+
+interface AuthState {
+ user: User | null;
+ token: string | null;
+ isAuthenticated: boolean;
+ login: (email: string, pass: string) => Promise
+
+ + Login +
+ + + +
+
+ Demo credentials available in backend seeder.
+ document.getElementById('file-upload')?.click()}
+ >
+
+
+ );
+};
diff --git a/apps/qrcampaign/src/app/features/watermark/components/WatermarkEditor.tsx b/apps/qrcampaign/src/app/features/watermark/components/WatermarkEditor.tsx
new file mode 100644
index 0000000..1854cc9
--- /dev/null
+++ b/apps/qrcampaign/src/app/features/watermark/components/WatermarkEditor.tsx
@@ -0,0 +1,188 @@
+import React, { useState, useRef, useEffect, useCallback } from 'react';
+import html2canvas from 'html2canvas';
+import { toast } from 'sonner';
+
+interface WatermarkEditorProps {
+ imageFile: File;
+ qrCodeUrl: string;
+ onReset: () => void;
+}
+
+export const WatermarkEditor: React.FC
+
+
+ {/* Simple upload icon */}
+
+
+ + Drop your image here, or click to upload +
+Supports JPG and PNG
+Loading image...
;
+
+ return (
+
+
+ );
+};
diff --git a/apps/qrcampaign/src/app/layout.tsx b/apps/qrcampaign/src/app/layout.tsx
new file mode 100644
index 0000000..c014d0b
--- /dev/null
+++ b/apps/qrcampaign/src/app/layout.tsx
@@ -0,0 +1,83 @@
+import {
+ Outlet,
+ ScrollRestoration,
+ useLocation,
+ useNavigate,
+} from 'react-router-dom';
+import { useEffect, useState } from 'react';
+import { useAuthStore } from './features/auth/store/auth.store';
+import { Sidebar } from '../components/Sidebar';
+import { MenuOutlined } from '@ant-design/icons';
+
+// Helper to determine route types
+const isPublicRoute = (pathname: string) => {
+ return pathname.startsWith('/auth') || pathname === '/auth/callback';
+};
+
+export default function RootLayout() {
+ const location = useLocation();
+ const navigate = useNavigate();
+ const { isAuthenticated } = useAuthStore();
+ const [mobileSidebarOpen, setMobileSidebarOpen] = useState(false);
+
+ useEffect(() => {
+ // If we're on a public route, no auth check needed
+ if (isPublicRoute(location.pathname)) {
+ return;
+ }
+
+ // AUTH CHECK
+ if (!isAuthenticated) {
+ // No session -> Redirect to login
+ navigate('/auth/login', { replace: true });
+ return;
+ }
+ }, [location.pathname, navigate, isAuthenticated]);
+
+ // RENDER LOGIC
+
+ // 1. Public Pages (Full Layout Control)
+ if (isPublicRoute(location.pathname)) {
+ return (
+ <>
+
+
+
+
+
+
+
+
+
+ 
+
+
+
+ 
+
+ {/* Outline on hover/interaction */}
+
+
+ {/* Resize handle */}
+
+
+ + Drag to move the QR code. Drag the blue dot to resize. +
+
+ setMobileSidebarOpen(false)}
+ />
+
+
+ );
+}
diff --git a/apps/qrcampaign/src/app/page.tsx b/apps/qrcampaign/src/app/page.tsx
new file mode 100644
index 0000000..6616825
--- /dev/null
+++ b/apps/qrcampaign/src/app/page.tsx
@@ -0,0 +1,144 @@
+import { useState } from 'react';
+import { Dropzone } from './features/watermark/components/Dropzone';
+import { Button } from '@imphnen-frontend-service/ui/atoms';
+import { toast } from 'sonner';
+import { api } from './features/auth/api/auth.service';
+
+export default function HomePage() {
+ const [imageFile, setImageFile] = useState
+ {/* Mobile Header */}
+
+
+
+
+
+
+
+
+
+
+ QR Campaign
+
+
+
+
+
+ );
+}
diff --git a/apps/qrcampaign/src/assets/.gitkeep b/apps/qrcampaign/src/assets/.gitkeep
new file mode 100644
index 0000000..e69de29
diff --git a/apps/qrcampaign/src/components/Sidebar.tsx b/apps/qrcampaign/src/components/Sidebar.tsx
new file mode 100644
index 0000000..20e1d38
--- /dev/null
+++ b/apps/qrcampaign/src/components/Sidebar.tsx
@@ -0,0 +1,229 @@
+import {
+ AppstoreOutlined,
+ UsergroupAddOutlined,
+ QrcodeOutlined,
+ LogoutOutlined,
+ DownOutlined,
+ RightOutlined,
+} from '@ant-design/icons';
+import { Button } from '@imphnen-frontend-service/ui/atoms';
+import { FC, ReactElement, useState } from 'react';
+import { Link, useLocation } from 'react-router-dom';
+import { cn, For } from '@imphnen-frontend-service/utils';
+import { useAuthStore } from '../app/features/auth/store/auth.store';
+
+type MenuItem = {
+ label: string;
+ href?: string;
+ icon?: ReactElement;
+ children?: Array<{ label: string; href: string; icon?: ReactElement }>;
+ roles?: string[]; // Roles that can see this menu
+};
+
+const MENUS: MenuItem[] = [
+ {
+ label: 'QR Generator',
+ href: '/',
+ icon: + QR Code Generator +
++ Upload your image to add the campaign QR code watermark. +
+
+ {!imageFile ? (
+
+
+
+ )}
+
+ {isLoading ? (
+ 
+ ) : (
+
+
+
+
+
+ ) : generatedImage ? (
+ + Processing image... +
+
+ })
+
+ )}
+
+
+ Original Image
+
+
+
+ {!generatedImage && !isLoading && (
+ <>
+
+
+
+ )}
+
+ {generatedImage && (
+ <>
+
+
+
+ )}
+
+
+
+ );
+
+ return (
+ <>
+
+
+
+ {/* Navigation - Scrollable area */}
+
+
+ {/* Footer - Fixed at bottom */}
+
+ 
+ {onClose && (
+
+ )}
+
+
+ {onClose && (
+
+ )}
+
+
+
+ +
+
+
+
+ Signed in as
+
+
+
+
+ {user?.fullname?.charAt(0) || 'U'}
+
+
+
+ {user?.fullname}
+
+
+ {user?.role?.name}
+
+
+
+ {sidebarContent}
+
+
+ {isOpen && (
+
+
+
+ )}
+
+ );
+};
diff --git a/apps/qrcampaign/src/index.css b/apps/qrcampaign/src/index.css
new file mode 100644
index 0000000..16b5a76
--- /dev/null
+++ b/apps/qrcampaign/src/index.css
@@ -0,0 +1,136 @@
+@import url('https://fonts.googleapis.com/css2?family=Bai+Jamjuree:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');
+@import 'tailwindcss';
+@source "../../../libs/ui/**/*.{ts,tsx}";
+
+@theme {
+ --color-primary-50: #f0f8ff;
+ --color-primary-100: #e1f0fd;
+ --color-primary-200: #bce1fb;
+ --color-primary-300: #81cbf8;
+ --color-primary-400: #3eb0f2;
+ --color-primary-500: #23a1eb;
+ --color-primary-600: #0877c1;
+ --color-primary-700: #085f9c;
+ --color-primary-800: #0b5181;
+ --color-primary-900: #0f446b;
+ --color-primary-950: #0a2b47;
+
+ --color-neutral-50: #f6f6f6;
+ --color-neutral-100: #e7e7e7;
+ --color-neutral-200: #d1d1d1;
+ --color-neutral-300: #b0b0b0;
+ --color-neutral-400: #888888;
+ --color-neutral-500: #6e6a86;
+ --color-neutral-600: #56526e;
+ --color-neutral-700: #44415a;
+ --color-neutral-800: #393552;
+ --color-neutral-900: #2a273f;
+ --color-neutral-950: #232136;
+
+ --color-success-100: #e0fbd8;
+ --color-success-200: #bcf8b0;
+ --color-success-300: #8eea85;
+ --color-success-400: #63d564;
+ --color-success-500: #35ba43;
+ --color-success-600: #269f3e;
+ --color-success-700: #1a8439;
+ --color-success-800: #106b32;
+ --color-success-900: #0b592f;
+
+ --color-info-100: #ccfcfe;
+ --color-info-200: #9bf3fd;
+ --color-info-300: #67e3fb;
+ --color-info-400: #42cdf8;
+ --color-info-500: #04acf3;
+ --color-info-600: #0185d0;
+ --color-info-700: #0264af;
+ --color-info-800: #01478d;
+ --color-info-900: #003375;
+
+ --color-warning-100: #fffcd3;
+ --color-warning-200: #fffaa9;
+ --color-warning-300: #fff67d;
+ --color-warning-400: #fff25d;
+ --color-warning-500: #ffed27;
+ --color-warning-600: #dbc91d;
+ --color-warning-700: #b7a714;
+ --color-warning-800: #93850b;
+ --color-warning-900: #7a6d07;
+
+ --color-danger-100: #ffe8da;
+ --color-danger-200: #ffcbb3;
+ --color-danger-300: #ffaa8d;
+ --color-danger-400: #ff8870;
+ --color-danger-500: #ff5242;
+ --color-danger-600: #da3030;
+ --color-danger-700: #b7212d;
+ --color-danger-800: #93152a;
+ --color-danger-900: #7a0c27;
+
+ --radius-none: 0px;
+ --radius-sm: 2px;
+ --radius-md: 4px;
+ --radius-lg: 8px;
+ --radius-xl: 12px;
+ --radius-2xl: 16px;
+ --radius-3xl: 24px;
+ --radius-full: 50%;
+
+ --font-bai-jamjuree: 'Bai Jamjuree', sans-serif;
+
+ --text-h1: 3.833rem;
+ /* ~46px */
+ --text-h2: 3.083rem;
+ /* ~37px */
+ --text-h3: 2.417rem;
+ /* ~29px */
+ --text-p1: 1.917rem;
+ /* ~23px */
+ --text-p2: 1.583rem;
+ /* ~19px */
+ --text-p3: 1.25rem;
+ /* 15px */
+ --text-label1: 1rem;
+ /* 12px */
+ --text-label2: 0.833rem;
+ /* ~10px */
+ --text-label3: 0.677rem;
+ /* ~8px */
+}
+
+@layer base {
+
+ *,
+ ::after,
+ ::before,
+ ::backdrop,
+ ::file-selector-button {
+ border-color: var(--color-neutral-200, currentColor);
+ }
+
+ /* Custom scrollbar */
+ ::-webkit-scrollbar {
+ width: 6px;
+ height: 6px;
+ }
+
+ ::-webkit-scrollbar-track {
+ background: var(--color-neutral-50);
+ }
+
+ ::-webkit-scrollbar-thumb {
+ background: #cccccc;
+ border-radius: 3px;
+ }
+
+ ::-webkit-scrollbar-thumb:hover {
+ background: var(--color-neutral-300);
+ }
+
+ html {
+ font-family: 'Bai Jamjuree', sans-serif;
+ font-weight: 400;
+ font-size: 16px;
+ line-height: 1.2;
+ }
+}
diff --git a/apps/qrcampaign/src/main.tsx b/apps/qrcampaign/src/main.tsx
new file mode 100644
index 0000000..0c9d268
--- /dev/null
+++ b/apps/qrcampaign/src/main.tsx
@@ -0,0 +1,42 @@
+import { createRoot } from 'react-dom/client';
+import { StrictMode } from 'react';
+import { createBrowserRouter, RouteObject, RouterProvider } from 'react-router';
+import {
+ add404PageToRoutesChildren,
+ addErrorElementToRoutes,
+ convertPagesToRoute,
+ ModalLoginProvider,
+ QueryProvider,
+} from '@imphnen-frontend-service/utils';
+import { Toaster } from 'sonner';
+import './index.css';
+
+const files = import.meta.glob('./app/**/*(page|layout).tsx');
+const errorFiles = import.meta.glob('./app/**/*error.tsx');
+const notFoundFiles = import.meta.glob('./app/**/*404.tsx');
+const loadingFiles = import.meta.glob('./app/**/*loading.tsx');
+
+const routes = convertPagesToRoute(files, loadingFiles) as RouteObject;
+addErrorElementToRoutes(errorFiles, routes);
+add404PageToRoutesChildren(notFoundFiles, routes);
+
+const router = createBrowserRouter([
+ {
+ ...routes,
+ },
+]);
+
+const rootElement = document.getElementById('root');
+
+if (!rootElement) throw new Error('Failed to find the root element');
+
+createRoot(rootElement).render(
+
+ {sidebarContent}
+
+