feat(notifications): add multi-channel notification module with Email, FCM, templates, and event listeners

- Domain: NotificationLog/NotificationPreference entities, repositories, channel value object
- Infrastructure: EmailService (nodemailer/SMTP), FcmService (firebase-admin), TemplateService (Handlebars)
- Application: SendNotification CQRS command, UserRegistered + AgentVerified event listeners
- Presentation: NotificationsController with history, preferences, and templates endpoints
- Prisma: NotificationLog and NotificationPreference models with proper indexes
- Templates: Vietnamese notification templates for user.registered, agent.verified, listing.approved, inquiry.received, password.reset

Co-Authored-By: Paperclip <noreply@paperclip.ing>

apps/web/app/(auth)/layout.tsx

@@ -0,0 +1,7 @@
+export default function AuthLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="flex min-h-screen items-center justify-center bg-muted/40 px-4 py-12">
+      <div className="w-full max-w-md">{children}</div>
+    </div>
+  );
+}

apps/web/app/(auth)/login/page.tsx

@@ -0,0 +1,123 @@
+'use client';
+
+import { useState } from 'react';
+import Link from 'next/link';
+import { useRouter } from 'next/navigation';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { Loader2 } from 'lucide-react';
+
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';
+import { OAuthButtons } from '@/components/auth/oauth-buttons';
+import { loginSchema, type LoginFormData } from '@/lib/validations/auth';
+import { useAuthStore } from '@/lib/auth-store';
+
+export default function LoginPage() {
+  const router = useRouter();
+  const { login, isLoading, error, clearError } = useAuthStore();
+  const [showPassword, setShowPassword] = useState(false);
+
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<LoginFormData>({
+    resolver: zodResolver(loginSchema),
+  });
+
+  const onSubmit = async (data: LoginFormData) => {
+    try {
+      await login(data);
+      router.push('/');
+    } catch {
+      // Error is handled by the store
+    }
+  };
+
+  return (
+    <Card>
+      <CardHeader className="space-y-1 text-center">
+        <CardTitle className="text-2xl font-bold">Đăng nhập</CardTitle>
+        <CardDescription>Nhập số điện thoại và mật khẩu để đăng nhập</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
+          {error && (
+            <div className="rounded-md bg-destructive/10 p-3 text-sm text-destructive" role="alert">
+              {error}
+              <button type="button" onClick={clearError} className="ml-2 font-medium underline">
+                Bỏ qua
+              </button>
+            </div>
+          )}
+
+          <div className="space-y-2">
+            <Label htmlFor="phone">Số điện thoại</Label>
+            <Input
+              id="phone"
+              type="tel"
+              placeholder="0912345678"
+              autoComplete="tel"
+              {...register('phone')}
+              aria-invalid={!!errors.phone}
+            />
+            {errors.phone && (
+              <p className="text-sm text-destructive" role="alert">{errors.phone.message}</p>
+            )}
+          </div>
+
+          <div className="space-y-2">
+            <div className="flex items-center justify-between">
+              <Label htmlFor="password">Mật khẩu</Label>
+              <button
+                type="button"
+                className="text-xs text-muted-foreground hover:text-primary"
+                onClick={() => setShowPassword(!showPassword)}
+              >
+                {showPassword ? 'Ẩn' : 'Hiện'}
+              </button>
+            </div>
+            <Input
+              id="password"
+              type={showPassword ? 'text' : 'password'}
+              placeholder="Nhập mật khẩu"
+              autoComplete="current-password"
+              {...register('password')}
+              aria-invalid={!!errors.password}
+            />
+            {errors.password && (
+              <p className="text-sm text-destructive" role="alert">{errors.password.message}</p>
+            )}
+          </div>
+
+          <Button type="submit" className="w-full" disabled={isLoading}>
+            {isLoading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+            Đăng nhập
+          </Button>
+        </form>
+
+        <div className="relative my-4">
+          <div className="absolute inset-0 flex items-center">
+            <span className="w-full border-t" />
+          </div>
+          <div className="relative flex justify-center text-xs uppercase">
+            <span className="bg-card px-2 text-muted-foreground">Hoặc đăng nhập với</span>
+          </div>
+        </div>
+
+        <OAuthButtons />
+      </CardContent>
+      <CardFooter className="justify-center">
+        <p className="text-sm text-muted-foreground">
+          Chưa có tài khoản?{' '}
+          <Link href="/register" className="font-medium text-primary hover:underline">
+            Đăng ký
+          </Link>
+        </p>
+      </CardFooter>
+    </Card>
+  );
+}

apps/web/app/(auth)/register/page.tsx

@@ -0,0 +1,173 @@
+'use client';
+
+import { useState } from 'react';
+import Link from 'next/link';
+import { useRouter } from 'next/navigation';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { Loader2 } from 'lucide-react';
+
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';
+import { OAuthButtons } from '@/components/auth/oauth-buttons';
+import { registerSchema, type RegisterFormData } from '@/lib/validations/auth';
+import { useAuthStore } from '@/lib/auth-store';
+
+export default function RegisterPage() {
+  const router = useRouter();
+  const { register: registerUser, isLoading, error, clearError } = useAuthStore();
+  const [showPassword, setShowPassword] = useState(false);
+
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<RegisterFormData>({
+    resolver: zodResolver(registerSchema),
+  });
+
+  const onSubmit = async (data: RegisterFormData) => {
+    try {
+      await registerUser({
+        phone: data.phone,
+        password: data.password,
+        fullName: data.fullName,
+        email: data.email || undefined,
+      });
+      router.push('/');
+    } catch {
+      // Error is handled by the store
+    }
+  };
+
+  return (
+    <Card>
+      <CardHeader className="space-y-1 text-center">
+        <CardTitle className="text-2xl font-bold">Tạo tài khoản</CardTitle>
+        <CardDescription>Nhập thông tin để đăng ký tài khoản GoodGo</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
+          {error && (
+            <div className="rounded-md bg-destructive/10 p-3 text-sm text-destructive" role="alert">
+              {error}
+              <button type="button" onClick={clearError} className="ml-2 font-medium underline">
+                Bỏ qua
+              </button>
+            </div>
+          )}
+
+          <div className="space-y-2">
+            <Label htmlFor="fullName">Họ và tên</Label>
+            <Input
+              id="fullName"
+              type="text"
+              placeholder="Nguyễn Văn A"
+              autoComplete="name"
+              {...register('fullName')}
+              aria-invalid={!!errors.fullName}
+            />
+            {errors.fullName && (
+              <p className="text-sm text-destructive" role="alert">{errors.fullName.message}</p>
+            )}
+          </div>
+
+          <div className="space-y-2">
+            <Label htmlFor="phone">Số điện thoại</Label>
+            <Input
+              id="phone"
+              type="tel"
+              placeholder="0912345678"
+              autoComplete="tel"
+              {...register('phone')}
+              aria-invalid={!!errors.phone}
+            />
+            {errors.phone && (
+              <p className="text-sm text-destructive" role="alert">{errors.phone.message}</p>
+            )}
+          </div>
+
+          <div className="space-y-2">
+            <Label htmlFor="email">Email (tùy chọn)</Label>
+            <Input
+              id="email"
+              type="email"
+              placeholder="example@email.com"
+              autoComplete="email"
+              {...register('email')}
+              aria-invalid={!!errors.email}
+            />
+            {errors.email && (
+              <p className="text-sm text-destructive" role="alert">{errors.email.message}</p>
+            )}
+          </div>
+
+          <div className="space-y-2">
+            <div className="flex items-center justify-between">
+              <Label htmlFor="password">Mật khẩu</Label>
+              <button
+                type="button"
+                className="text-xs text-muted-foreground hover:text-primary"
+                onClick={() => setShowPassword(!showPassword)}
+              >
+                {showPassword ? 'Ẩn' : 'Hiện'}
+              </button>
+            </div>
+            <Input
+              id="password"
+              type={showPassword ? 'text' : 'password'}
+              placeholder="Ít nhất 8 ký tự"
+              autoComplete="new-password"
+              {...register('password')}
+              aria-invalid={!!errors.password}
+            />
+            {errors.password && (
+              <p className="text-sm text-destructive" role="alert">{errors.password.message}</p>
+            )}
+          </div>
+
+          <div className="space-y-2">
+            <Label htmlFor="confirmPassword">Xác nhận mật khẩu</Label>
+            <Input
+              id="confirmPassword"
+              type={showPassword ? 'text' : 'password'}
+              placeholder="Nhập lại mật khẩu"
+              autoComplete="new-password"
+              {...register('confirmPassword')}
+              aria-invalid={!!errors.confirmPassword}
+            />
+            {errors.confirmPassword && (
+              <p className="text-sm text-destructive" role="alert">{errors.confirmPassword.message}</p>
+            )}
+          </div>
+
+          <Button type="submit" className="w-full" disabled={isLoading}>
+            {isLoading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+            Đăng ký
+          </Button>
+        </form>
+
+        <div className="relative my-4">
+          <div className="absolute inset-0 flex items-center">
+            <span className="w-full border-t" />
+          </div>
+          <div className="relative flex justify-center text-xs uppercase">
+            <span className="bg-card px-2 text-muted-foreground">Hoặc đăng ký với</span>
+          </div>
+        </div>
+
+        <OAuthButtons />
+      </CardContent>
+      <CardFooter className="justify-center">
+        <p className="text-sm text-muted-foreground">
+          Đã có tài khoản?{' '}
+          <Link href="/login" className="font-medium text-primary hover:underline">
+            Đăng nhập
+          </Link>
+        </p>
+      </CardFooter>
+    </Card>
+  );
+}

apps/web/app/globals.css

@@ -1,3 +1,34 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 222.2 84% 4.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 84% 4.9%;
+    --primary: 142.1 76.2% 36.3%;
+    --primary-foreground: 355.7 100% 97.3%;
+    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+    --ring: 142.1 76.2% 36.3%;
+    --radius: 0.5rem;
+  }
+
+  * {
+    @apply border-border;
+  }
+
+  body {
+    @apply bg-background text-foreground;
+  }
+}

apps/web/app/layout.tsx

@@ -1,4 +1,5 @@
 import type { Metadata } from 'next';
+import { AuthProvider } from '@/components/providers/auth-provider';
 import './globals.css';
 
 export const metadata: Metadata = {
@@ -9,7 +10,9 @@ export const metadata: Metadata = {
 export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
     <html lang="vi">
-      <body>{children}</body>
+      <body>
+        <AuthProvider>{children}</AuthProvider>
+      </body>
     </html>
   );
 }