feat(agents): add public agent profile page at /agents/[id]

Implements a public-facing agent profile page with:
- Backend: new GET /agents/:agentId/profile public API endpoint with
  agent info, active listings, quality score, and review stats
- Frontend: server-rendered profile page with generateMetadata for SEO,
  JSON-LD structured data (RealEstateAgent schema), breadcrumbs
- Agent profile displays bio, service areas, quality score gauge,
  active listing cards, reviews with star ratings, and contact CTA
- Mobile responsive layout with sticky contact sidebar on desktop
- Vietnamese UI text throughout, consistent with existing patterns

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

apps/web/components/agents/agent-profile-client.tsx

@@ -0,0 +1,407 @@
+'use client';
+
+import {
+  BadgeCheck,
+  Building2,
+  Calendar,
+  MapPin,
+  Phone,
+  Mail,
+  Star,
+  Home,
+  MessageSquare,
+} from 'lucide-react';
+import Image from 'next/image';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Link } from '@/i18n/navigation';
+import type { AgentPublicProfile, AgentReviewItem } from '@/lib/agents-api';
+import { formatPrice } from '@/lib/currency';
+
+// ---------------------------------------------------------------------------
+// Props
+// ---------------------------------------------------------------------------
+
+interface AgentProfileClientProps {
+  agent: AgentPublicProfile;
+  reviews: AgentReviewItem[];
+}
+
+// ---------------------------------------------------------------------------
+// Main Component
+// ---------------------------------------------------------------------------
+
+export function AgentProfileClient({ agent, reviews }: AgentProfileClientProps) {
+  return (
+    <div className="mx-auto max-w-6xl px-4 py-6">
+      {/* Breadcrumb */}
+      <nav className="mb-4 flex items-center gap-1.5 text-sm text-muted-foreground">
+        <Link href="/" className="hover:text-foreground">Trang chủ</Link>
+        <span>/</span>
+        <span className="truncate text-foreground">{agent.fullName}</span>
+      </nav>
+
+      {/* Profile Header */}
+      <div className="mb-8 flex flex-col gap-6 sm:flex-row sm:items-start">
+        {/* Avatar */}
+        <div className="shrink-0">
+          {agent.avatarUrl ? (
+            <Image
+              src={agent.avatarUrl}
+              alt={agent.fullName}
+              width={120}
+              height={120}
+              className="h-28 w-28 rounded-full border-4 border-primary/10 object-cover sm:h-32 sm:w-32"
+            />
+          ) : (
+            <div className="flex h-28 w-28 items-center justify-center rounded-full border-4 border-primary/10 bg-primary/5 sm:h-32 sm:w-32">
+              <span className="text-4xl font-bold text-primary">
+                {agent.fullName.charAt(0).toUpperCase()}
+              </span>
+            </div>
+          )}
+        </div>
+
+        {/* Agent Info */}
+        <div className="min-w-0 flex-1">
+          <div className="mb-2 flex flex-wrap items-center gap-2">
+            <h1 className="text-2xl font-bold md:text-3xl">{agent.fullName}</h1>
+            {agent.isVerified && (
+              <Badge variant="success" className="gap-1">
+                <BadgeCheck className="h-3.5 w-3.5" />
+                Đã xác minh
+              </Badge>
+            )}
+          </div>
+
+          {agent.agency && (
+            <p className="mb-1 flex items-center gap-1.5 text-muted-foreground">
+              <Building2 className="h-4 w-4 shrink-0" />
+              {agent.agency}
+            </p>
+          )}
+
+          {agent.licenseNumber && (
+            <p className="mb-1 text-sm text-muted-foreground">
+              Mã giấy phép: {agent.licenseNumber}
+            </p>
+          )}
+
+          <p className="flex items-center gap-1.5 text-sm text-muted-foreground">
+            <Calendar className="h-4 w-4 shrink-0" />
+            Thành viên từ {new Date(agent.memberSince).toLocaleDateString('vi-VN', {
+              month: 'long',
+              year: 'numeric',
+            })}
+          </p>
+
+          {/* Quick stats */}
+          <div className="mt-4 flex flex-wrap gap-4">
+            <StatPill
+              icon={<Star className="h-4 w-4 text-yellow-500" />}
+              label="Đánh giá"
+              value={agent.totalReviews > 0
+                ? `${agent.avgReviewRating}/5 (${agent.totalReviews})`
+                : 'Chưa có'}
+            />
+            <StatPill
+              icon={<Home className="h-4 w-4 text-primary" />}
+              label="Tin đăng"
+              value={`${agent.activeListings.length}`}
+            />
+            <StatPill
+              icon={<BadgeCheck className="h-4 w-4 text-green-500" />}
+              label="Giao dịch"
+              value={`${agent.totalDeals}`}
+            />
+          </div>
+        </div>
+
+        {/* CTA Sidebar (desktop) */}
+        <div className="hidden shrink-0 sm:block">
+          <ContactCard agent={agent} />
+        </div>
+      </div>
+
+      <div className="grid gap-6 lg:grid-cols-3">
+        {/* Main Content */}
+        <div className="space-y-6 lg:col-span-2">
+          {/* Bio */}
+          {agent.bio && (
+            <Card>
+              <CardHeader>
+                <CardTitle>Giới thiệu</CardTitle>
+              </CardHeader>
+              <CardContent>
+                <p className="whitespace-pre-wrap text-sm leading-relaxed">{agent.bio}</p>
+              </CardContent>
+            </Card>
+          )}
+
+          {/* Service Areas */}
+          {agent.serviceAreas.length > 0 && (
+            <Card>
+              <CardHeader>
+                <CardTitle>Khu vực hoạt động</CardTitle>
+              </CardHeader>
+              <CardContent>
+                <div className="flex flex-wrap gap-2">
+                  {agent.serviceAreas.map((area) => (
+                    <Badge key={area} variant="secondary" className="gap-1">
+                      <MapPin className="h-3 w-3" />
+                      {area}
+                    </Badge>
+                  ))}
+                </div>
+              </CardContent>
+            </Card>
+          )}
+
+          {/* Quality Score */}
+          <Card>
+            <CardHeader>
+              <CardTitle>Chỉ số chất lượng</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <div className="flex items-center gap-4">
+                <div className="relative h-20 w-20">
+                  <svg className="h-20 w-20 -rotate-90 transform" viewBox="0 0 36 36">
+                    <path
+                      className="text-muted"
+                      d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
+                      fill="none"
+                      stroke="currentColor"
+                      strokeWidth="3"
+                    />
+                    <path
+                      className="text-primary"
+                      d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
+                      fill="none"
+                      stroke="currentColor"
+                      strokeWidth="3"
+                      strokeDasharray={`${agent.qualityScore}, 100`}
+                      strokeLinecap="round"
+                    />
+                  </svg>
+                  <div className="absolute inset-0 flex items-center justify-center">
+                    <span className="text-lg font-bold">{agent.qualityScore}</span>
+                  </div>
+                </div>
+                <div>
+                  <p className="font-medium">
+                    {agent.qualityScore >= 80
+                      ? 'Xuất sắc'
+                      : agent.qualityScore >= 60
+                        ? 'Tốt'
+                        : agent.qualityScore >= 40
+                          ? 'Trung bình'
+                          : 'Cần cải thiện'}
+                  </p>
+                  <p className="text-sm text-muted-foreground">
+                    Dựa trên phản hồi, thời gian phản hồi và giao dịch thành công
+                  </p>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+
+          {/* Active Listings */}
+          {agent.activeListings.length > 0 && (
+            <Card>
+              <CardHeader>
+                <CardTitle>Tin đăng đang hoạt động ({agent.activeListings.length})</CardTitle>
+              </CardHeader>
+              <CardContent>
+                <div className="grid gap-4 sm:grid-cols-2">
+                  {agent.activeListings.map((listing) => (
+                    <ListingCard key={listing.id} listing={listing} />
+                  ))}
+                </div>
+              </CardContent>
+            </Card>
+          )}
+
+          {/* Reviews */}
+          <Card>
+            <CardHeader>
+              <CardTitle>Đánh giá ({agent.totalReviews})</CardTitle>
+            </CardHeader>
+            <CardContent>
+              {reviews.length > 0 ? (
+                <div className="space-y-4">
+                  {reviews.map((review) => (
+                    <ReviewCard key={review.id} review={review} />
+                  ))}
+                </div>
+              ) : (
+                <p className="text-center text-sm text-muted-foreground py-4">
+                  Chưa có đánh giá nào
+                </p>
+              )}
+            </CardContent>
+          </Card>
+        </div>
+
+        {/* Sidebar (mobile + desktop fallback) */}
+        <div className="space-y-6">
+          <div className="sm:hidden">
+            <ContactCard agent={agent} />
+          </div>
+          <div className="hidden sm:block lg:block">
+            <div className="lg:sticky lg:top-20">
+              <div className="hidden lg:block">
+                <ContactCard agent={agent} />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Sub-Components
+// ---------------------------------------------------------------------------
+
+function StatPill({
+  icon,
+  label,
+  value,
+}: {
+  icon: React.ReactNode;
+  label: string;
+  value: string;
+}) {
+  return (
+    <div className="flex items-center gap-2 rounded-lg border bg-card px-3 py-2">
+      {icon}
+      <div>
+        <p className="text-xs text-muted-foreground">{label}</p>
+        <p className="text-sm font-semibold">{value}</p>
+      </div>
+    </div>
+  );
+}
+
+function ContactCard({ agent }: { agent: AgentPublicProfile }) {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="text-lg">Liên hệ môi giới</CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-3">
+        <a href={`tel:${agent.phone}`} className="block">
+          <Button className="w-full gap-2">
+            <Phone className="h-4 w-4" />
+            Gọi ngay
+          </Button>
+        </a>
+        <Button variant="outline" className="w-full gap-2">
+          <MessageSquare className="h-4 w-4" />
+          Nhắn tin
+        </Button>
+        {agent.email && (
+          <a href={`mailto:${agent.email}`} className="block">
+            <Button variant="outline" className="w-full gap-2">
+              <Mail className="h-4 w-4" />
+              Email
+            </Button>
+          </a>
+        )}
+        <div className="border-t pt-3">
+          <p className="text-xs text-muted-foreground">Số điện thoại</p>
+          <p className="text-sm font-medium">{agent.phone}</p>
+          {agent.email && (
+            <>
+              <p className="mt-2 text-xs text-muted-foreground">Email</p>
+              <p className="text-sm font-medium">{agent.email}</p>
+            </>
+          )}
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+
+function ListingCard({ listing }: { listing: AgentPublicProfile['activeListings'][number] }) {
+  const { property } = listing;
+
+  return (
+    <Link href={`/listings/${listing.id}` as never} className="block">
+      <div className="group overflow-hidden rounded-lg border bg-card transition-shadow hover:shadow-md">
+        {/* Image */}
+        <div className="relative aspect-[16/10] overflow-hidden bg-muted">
+          {property.imageUrl ? (
+            <Image
+              src={property.imageUrl}
+              alt={property.title}
+              fill
+              className="object-cover transition-transform group-hover:scale-105"
+              sizes="(max-width: 640px) 100vw, 50vw"
+            />
+          ) : (
+            <div className="flex h-full items-center justify-center">
+              <Home className="h-8 w-8 text-muted-foreground" />
+            </div>
+          )}
+          <Badge className="absolute left-2 top-2" variant={listing.transactionType === 'SALE' ? 'default' : 'secondary'}>
+            {listing.transactionType === 'SALE' ? 'Bán' : 'Cho thuê'}
+          </Badge>
+        </div>
+
+        {/* Content */}
+        <div className="p-3">
+          <h3 className="line-clamp-1 text-sm font-semibold">{property.title}</h3>
+          <p className="mt-0.5 flex items-center gap-1 text-xs text-muted-foreground">
+            <MapPin className="h-3 w-3 shrink-0" />
+            {property.district}, {property.city}
+          </p>
+          <div className="mt-2 flex items-center justify-between">
+            <p className="text-sm font-bold text-primary">{formatPrice(listing.priceVND)} VND</p>
+            <div className="flex items-center gap-2 text-xs text-muted-foreground">
+              <span>{property.areaM2} m²</span>
+              {property.bedrooms != null && <span>{property.bedrooms} PN</span>}
+            </div>
+          </div>
+        </div>
+      </div>
+    </Link>
+  );
+}
+
+function ReviewCard({ review }: { review: AgentReviewItem }) {
+  return (
+    <div className="rounded-lg border p-4">
+      <div className="mb-2 flex items-center justify-between">
+        <div className="flex items-center gap-2">
+          <div className="flex h-8 w-8 items-center justify-center rounded-full bg-primary/10 text-sm font-medium text-primary">
+            {(review.userName ?? 'Ẩn danh').charAt(0).toUpperCase()}
+          </div>
+          <div>
+            <p className="text-sm font-medium">{review.userName ?? 'Ẩn danh'}</p>
+            <p className="text-xs text-muted-foreground">
+              {new Date(review.createdAt).toLocaleDateString('vi-VN')}
+            </p>
+          </div>
+        </div>
+        <div className="flex items-center gap-0.5">
+          {Array.from({ length: 5 }).map((_, i) => (
+            <Star
+              key={i}
+              className={`h-4 w-4 ${
+                i < review.rating
+                  ? 'fill-yellow-400 text-yellow-400'
+                  : 'text-muted-foreground/30'
+              }`}
+            />
+          ))}
+        </div>
+      </div>
+      {review.comment && (
+        <p className="text-sm text-muted-foreground">{review.comment}</p>
+      )}
+    </div>
+  );
+}

apps/web/components/seo/json-ld.tsx

@@ -1,3 +1,4 @@
+import type { AgentPublicProfile } from '@/lib/agents-api';
 import type { ListingDetail } from '@/lib/listings-api';
 import { PROPERTY_TYPES, TRANSACTION_TYPES } from '@/lib/validations/listings';
 
@@ -170,6 +171,46 @@ export function generateWebsiteJsonLd(siteUrl: string) {
   };
 }
 
+// ---------------------------------------------------------------------------
+// Agent profile JSON-LD (RealEstateAgent)
+// ---------------------------------------------------------------------------
+
+export function generateAgentJsonLd(agent: AgentPublicProfile, siteUrl: string) {
+  const jsonLd: Record<string, unknown> = {
+    '@context': 'https://schema.org',
+    '@type': 'RealEstateAgent',
+    name: agent.fullName,
+    url: `${siteUrl}/agents/${agent.id}`,
+    description: agent.bio ?? `Môi giới bất động sản tại GoodGo`,
+    ...(agent.avatarUrl && { image: agent.avatarUrl }),
+    telephone: agent.phone,
+    ...(agent.email && { email: agent.email }),
+    ...(agent.agency && {
+      worksFor: {
+        '@type': 'RealEstateAgent',
+        name: agent.agency,
+      },
+    }),
+    ...(agent.serviceAreas.length > 0 && {
+      areaServed: agent.serviceAreas.map((area) => ({
+        '@type': 'AdministrativeArea',
+        name: area,
+      })),
+    }),
+    ...(agent.totalReviews > 0 && {
+      aggregateRating: {
+        '@type': 'AggregateRating',
+        ratingValue: agent.avgReviewRating,
+        reviewCount: agent.totalReviews,
+        bestRating: 5,
+        worstRating: 1,
+      },
+    }),
+  };
+
+  return jsonLd;
+}
+
 // ---------------------------------------------------------------------------
 // React component that renders <script type="application/ld+json">
 // ---------------------------------------------------------------------------