feat(listings-frontend): add create/edit form, detail page, and listing components

- Multi-step wizard for listing creation (basic info, location, details, pricing, images)
- Listing detail page with image gallery, property specs, seller/agent info, stats
- Listings index page with filters (transaction type, property type) and pagination
- Edit page with tab-based form (read-only until backend PATCH endpoint available)
- Drag & drop image upload component with preview and multi-file support
- Dashboard layout with navigation bar
- New UI primitives: textarea, select, badge, tabs
- Listings API client with typed endpoints matching backend contract
- Zod validation schemas for all form steps
- Status badges with Vietnamese labels for all listing states
- Responsive design across all pages

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

apps/web/app/(dashboard)/listings/[id]/edit/page.tsx

@@ -0,0 +1,131 @@
+'use client';
+
+import * as React from 'react';
+import { useParams, useRouter } from 'next/navigation';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent } from '@/components/ui/card';
+import {
+  StepBasicInfo,
+  StepLocation,
+  StepDetails,
+  StepPricing,
+} from '@/components/listings/listing-form-steps';
+import {
+  createListingSchema,
+  type CreateListingFormData,
+} from '@/lib/validations/listings';
+import { listingsApi, type ListingDetail } from '@/lib/listings-api';
+import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs';
+
+export default function EditListingPage() {
+  const { id } = useParams<{ id: string }>();
+  const router = useRouter();
+  const [listing, setListing] = React.useState<ListingDetail | null>(null);
+  const [loading, setLoading] = React.useState(true);
+  const [activeTab, setActiveTab] = React.useState('basic');
+
+  const {
+    register,
+    reset,
+    formState: { errors },
+  } = useForm<CreateListingFormData>({
+    resolver: zodResolver(createListingSchema),
+    mode: 'onTouched',
+  });
+
+  React.useEffect(() => {
+    listingsApi
+      .getById(id)
+      .then((data) => {
+        setListing(data);
+        const { property } = data;
+        reset({
+          transactionType: data.transactionType,
+          propertyType: property.propertyType,
+          title: property.title,
+          description: property.description,
+          address: property.address,
+          ward: property.ward,
+          district: property.district,
+          city: property.city,
+          areaM2: String(property.areaM2),
+          bedrooms: property.bedrooms != null ? String(property.bedrooms) : '',
+          bathrooms: property.bathrooms != null ? String(property.bathrooms) : '',
+          floors: property.floors != null ? String(property.floors) : '',
+          direction: property.direction ?? '',
+          yearBuilt: property.yearBuilt != null ? String(property.yearBuilt) : '',
+          legalStatus: property.legalStatus ?? '',
+          projectName: property.projectName ?? '',
+          amenities: property.amenities?.join(', ') ?? '',
+          priceVND: data.priceVND,
+          rentPriceMonthly: data.rentPriceMonthly ?? '',
+          commissionPct: data.commissionPct != null ? String(data.commissionPct) : '',
+        });
+      })
+      .catch(() => setListing(null))
+      .finally(() => setLoading(false));
+  }, [id, reset]);
+
+  if (loading) {
+    return (
+      <div className="flex min-h-[400px] items-center justify-center">
+        <div className="h-8 w-8 animate-spin rounded-full border-4 border-primary border-t-transparent" />
+      </div>
+    );
+  }
+
+  if (!listing) {
+    return (
+      <div className="flex min-h-[400px] flex-col items-center justify-center space-y-4">
+        <p className="text-destructive">Không tìm thấy tin đăng</p>
+        <Button variant="outline" onClick={() => router.push('/listings')}>
+          Quay lại
+        </Button>
+      </div>
+    );
+  }
+
+  return (
+    <div className="mx-auto max-w-3xl space-y-6">
+      <div className="flex items-center justify-between">
+        <h1 className="text-2xl font-bold">Chỉnh sửa tin đăng</h1>
+        <Button variant="outline" onClick={() => router.push(`/listings/${id}`)}>
+          Xem tin
+        </Button>
+      </div>
+
+      <p className="text-sm text-muted-foreground">
+        Chức năng chỉnh sửa sẽ được hoàn thiện khi backend API hỗ trợ PATCH /listings/:id.
+        Hiện tại bạn có thể xem lại thông tin đã nhập.
+      </p>
+
+      <Tabs value={activeTab} onValueChange={setActiveTab}>
+        <TabsList className="grid w-full grid-cols-4">
+          <TabsTrigger value="basic">Cơ bản</TabsTrigger>
+          <TabsTrigger value="location">Vị trí</TabsTrigger>
+          <TabsTrigger value="details">Chi tiết</TabsTrigger>
+          <TabsTrigger value="pricing">Giá cả</TabsTrigger>
+        </TabsList>
+
+        <Card className="mt-4">
+          <CardContent className="pt-6">
+            <TabsContent value="basic">
+              <StepBasicInfo register={register} errors={errors} />
+            </TabsContent>
+            <TabsContent value="location">
+              <StepLocation register={register} errors={errors} />
+            </TabsContent>
+            <TabsContent value="details">
+              <StepDetails register={register} errors={errors} />
+            </TabsContent>
+            <TabsContent value="pricing">
+              <StepPricing register={register} errors={errors} />
+            </TabsContent>
+          </CardContent>
+        </Card>
+      </Tabs>
+    </div>
+  );
+}

apps/web/app/(dashboard)/listings/[id]/page.tsx

@@ -0,0 +1,226 @@
+'use client';
+
+import * as React from 'react';
+import Link from 'next/link';
+import { useParams } from 'next/navigation';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { ImageGallery } from '@/components/listings/image-gallery';
+import { ListingStatusBadge } from '@/components/listings/listing-status-badge';
+import { listingsApi, type ListingDetail } from '@/lib/listings-api';
+import { PROPERTY_TYPES, DIRECTIONS, TRANSACTION_TYPES } from '@/lib/validations/listings';
+
+function formatPrice(priceVND: string): string {
+  const num = Number(priceVND);
+  if (num >= 1_000_000_000) return `${(num / 1_000_000_000).toFixed(1)} tỷ`;
+  if (num >= 1_000_000) return `${(num / 1_000_000).toFixed(0)} triệu`;
+  return num.toLocaleString('vi-VN');
+}
+
+function getLabel(list: readonly { value: string; label: string }[], value: string | null) {
+  if (!value) return '—';
+  return list.find((item) => item.value === value)?.label ?? value;
+}
+
+export default function ListingDetailPage() {
+  const { id } = useParams<{ id: string }>();
+  const [listing, setListing] = React.useState<ListingDetail | null>(null);
+  const [loading, setLoading] = React.useState(true);
+  const [error, setError] = React.useState<string | null>(null);
+
+  React.useEffect(() => {
+    listingsApi
+      .getById(id)
+      .then(setListing)
+      .catch((err) => setError(err instanceof Error ? err.message : 'Không tải được tin đăng'))
+      .finally(() => setLoading(false));
+  }, [id]);
+
+  if (loading) {
+    return (
+      <div className="flex min-h-[400px] items-center justify-center">
+        <div className="h-8 w-8 animate-spin rounded-full border-4 border-primary border-t-transparent" />
+      </div>
+    );
+  }
+
+  if (error || !listing) {
+    return (
+      <div className="flex min-h-[400px] flex-col items-center justify-center space-y-4">
+        <p className="text-destructive">{error || 'Không tìm thấy tin đăng'}</p>
+        <Link href="/listings">
+          <Button variant="outline">Quay lại danh sách</Button>
+        </Link>
+      </div>
+    );
+  }
+
+  const { property, seller, agent } = listing;
+
+  return (
+    <div className="mx-auto max-w-5xl space-y-6">
+      {/* Header */}
+      <div className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
+        <div>
+          <div className="mb-2 flex items-center gap-2">
+            <ListingStatusBadge status={listing.status} />
+            <Badge variant="outline">
+              {getLabel(TRANSACTION_TYPES, listing.transactionType)}
+            </Badge>
+            <Badge variant="outline">
+              {getLabel(PROPERTY_TYPES, property.propertyType)}
+            </Badge>
+          </div>
+          <h1 className="text-2xl font-bold">{property.title}</h1>
+          <p className="mt-1 text-muted-foreground">
+            {property.address}, {property.ward}, {property.district}, {property.city}
+          </p>
+        </div>
+        <div className="text-right">
+          <p className="text-2xl font-bold text-primary">{formatPrice(listing.priceVND)} VNĐ</p>
+          {listing.pricePerM2 && (
+            <p className="text-sm text-muted-foreground">
+              ~{listing.pricePerM2.toLocaleString('vi-VN')} VNĐ/m²
+            </p>
+          )}
+          {listing.rentPriceMonthly && (
+            <p className="text-sm text-muted-foreground">
+              Thuê: {formatPrice(listing.rentPriceMonthly)}/tháng
+            </p>
+          )}
+        </div>
+      </div>
+
+      {/* Image gallery */}
+      <ImageGallery media={property.media} />
+
+      <div className="grid gap-6 lg:grid-cols-3">
+        {/* Main content */}
+        <div className="space-y-6 lg:col-span-2">
+          {/* Key specs */}
+          <Card>
+            <CardHeader>
+              <CardTitle>Thông tin chung</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <div className="grid grid-cols-2 gap-4 sm:grid-cols-3">
+                <InfoItem label="Diện tích" value={`${property.areaM2} m²`} />
+                <InfoItem label="Phòng ngủ" value={property.bedrooms != null ? `${property.bedrooms}` : '—'} />
+                <InfoItem label="Phòng tắm" value={property.bathrooms != null ? `${property.bathrooms}` : '—'} />
+                <InfoItem label="Số tầng" value={property.floors != null ? `${property.floors}` : '—'} />
+                <InfoItem label="Hướng" value={getLabel(DIRECTIONS, property.direction)} />
+                <InfoItem label="Năm xây" value={property.yearBuilt ? `${property.yearBuilt}` : '—'} />
+                <InfoItem label="Pháp lý" value={property.legalStatus || '—'} />
+                <InfoItem label="Dự án" value={property.projectName || '—'} />
+              </div>
+            </CardContent>
+          </Card>
+
+          {/* Description */}
+          <Card>
+            <CardHeader>
+              <CardTitle>Mô tả</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <p className="whitespace-pre-wrap text-sm leading-relaxed">{property.description}</p>
+            </CardContent>
+          </Card>
+
+          {/* Amenities */}
+          {property.amenities && property.amenities.length > 0 && (
+            <Card>
+              <CardHeader>
+                <CardTitle>Tiện ích</CardTitle>
+              </CardHeader>
+              <CardContent>
+                <div className="flex flex-wrap gap-2">
+                  {property.amenities.map((a) => (
+                    <Badge key={a} variant="secondary">
+                      {a}
+                    </Badge>
+                  ))}
+                </div>
+              </CardContent>
+            </Card>
+          )}
+        </div>
+
+        {/* Sidebar */}
+        <div className="space-y-6">
+          {/* Seller info */}
+          <Card>
+            <CardHeader>
+              <CardTitle>Liên hệ</CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-3">
+              <div>
+                <p className="font-medium">{seller.fullName}</p>
+                <p className="text-sm text-muted-foreground">{seller.phone}</p>
+              </div>
+              <Button className="w-full">Gọi ngay</Button>
+              <Button variant="outline" className="w-full">
+                Nhắn tin
+              </Button>
+            </CardContent>
+          </Card>
+
+          {/* Agent info */}
+          {agent && (
+            <Card>
+              <CardHeader>
+                <CardTitle>Môi giới</CardTitle>
+              </CardHeader>
+              <CardContent>
+                {agent.agency && <p className="text-sm text-muted-foreground">{agent.agency}</p>}
+                {listing.commissionPct != null && (
+                  <p className="mt-1 text-sm">Hoa hồng: {listing.commissionPct}%</p>
+                )}
+              </CardContent>
+            </Card>
+          )}
+
+          {/* Stats */}
+          <Card>
+            <CardHeader>
+              <CardTitle>Thống kê</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <div className="space-y-2 text-sm">
+                <div className="flex justify-between">
+                  <span className="text-muted-foreground">Lượt xem</span>
+                  <span className="font-medium">{listing.viewCount}</span>
+                </div>
+                <div className="flex justify-between">
+                  <span className="text-muted-foreground">Lượt lưu</span>
+                  <span className="font-medium">{listing.saveCount}</span>
+                </div>
+                <div className="flex justify-between">
+                  <span className="text-muted-foreground">Liên hệ</span>
+                  <span className="font-medium">{listing.inquiryCount}</span>
+                </div>
+                {listing.publishedAt && (
+                  <div className="flex justify-between">
+                    <span className="text-muted-foreground">Đăng ngày</span>
+                    <span className="font-medium">
+                      {new Date(listing.publishedAt).toLocaleDateString('vi-VN')}
+                    </span>
+                  </div>
+                )}
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function InfoItem({ label, value }: { label: string; value: string }) {
+  return (
+    <div>
+      <p className="text-xs text-muted-foreground">{label}</p>
+      <p className="font-medium">{value}</p>
+    </div>
+  );
+}