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/lib/listings-api.ts

@@ -0,0 +1,179 @@
+import { apiClient } from './api-client';
+
+// ─── Enums ───────────────────────────────────────────────
+
+export type TransactionType = 'SALE' | 'RENT';
+export type PropertyType = 'APARTMENT' | 'HOUSE' | 'VILLA' | 'LAND' | 'OFFICE' | 'SHOPHOUSE';
+export type ListingStatus =
+  | 'DRAFT'
+  | 'PENDING_REVIEW'
+  | 'ACTIVE'
+  | 'RESERVED'
+  | 'SOLD'
+  | 'RENTED'
+  | 'EXPIRED'
+  | 'REJECTED';
+export type Direction =
+  | 'NORTH'
+  | 'SOUTH'
+  | 'EAST'
+  | 'WEST'
+  | 'NORTHEAST'
+  | 'NORTHWEST'
+  | 'SOUTHEAST'
+  | 'SOUTHWEST';
+
+// ─── Interfaces ──────────────────────────────────────────
+
+export interface PropertyMedia {
+  id: string;
+  url: string;
+  type: 'image' | 'video';
+  order: number;
+  caption: string | null;
+}
+
+export interface ListingDetail {
+  id: string;
+  status: ListingStatus;
+  transactionType: TransactionType;
+  priceVND: string;
+  pricePerM2: number | null;
+  rentPriceMonthly: string | null;
+  commissionPct: number | null;
+  viewCount: number;
+  saveCount: number;
+  inquiryCount: number;
+  publishedAt: string | null;
+  createdAt: string;
+  property: {
+    id: string;
+    propertyType: PropertyType;
+    title: string;
+    description: string;
+    address: string;
+    ward: string;
+    district: string;
+    city: string;
+    areaM2: number;
+    bedrooms: number | null;
+    bathrooms: number | null;
+    floors: number | null;
+    direction: Direction | null;
+    yearBuilt: number | null;
+    legalStatus: string | null;
+    amenities: string[] | null;
+    projectName: string | null;
+    media: PropertyMedia[];
+  };
+  seller: {
+    id: string;
+    fullName: string;
+    phone: string;
+  };
+  agent: {
+    id: string;
+    userId: string;
+    agency: string | null;
+  } | null;
+}
+
+export interface PaginatedResult<T> {
+  data: T[];
+  total: number;
+  page: number;
+  limit: number;
+  totalPages: number;
+}
+
+export interface CreateListingPayload {
+  transactionType: TransactionType;
+  priceVND: string;
+  propertyType: PropertyType;
+  title: string;
+  description: string;
+  address: string;
+  ward: string;
+  district: string;
+  city: string;
+  latitude: number;
+  longitude: number;
+  areaM2: number;
+  usableAreaM2?: number;
+  bedrooms?: number;
+  bathrooms?: number;
+  floors?: number;
+  floor?: number;
+  totalFloors?: number;
+  direction?: Direction;
+  yearBuilt?: number;
+  legalStatus?: string;
+  amenities?: string[];
+  projectName?: string;
+  rentPriceMonthly?: string;
+  commissionPct?: number;
+}
+
+export interface SearchListingsParams {
+  status?: ListingStatus;
+  transactionType?: TransactionType;
+  propertyType?: PropertyType;
+  city?: string;
+  district?: string;
+  minPrice?: string;
+  maxPrice?: string;
+  minArea?: number;
+  maxArea?: number;
+  bedrooms?: number;
+  page?: number;
+  limit?: number;
+}
+
+// ─── API Functions ───────────────────────────────────────
+
+const API_BASE_URL = process.env['NEXT_PUBLIC_API_URL'] || 'http://localhost:3001';
+
+export const listingsApi = {
+  create: (token: string, data: CreateListingPayload) =>
+    apiClient.authPost<{ listingId: string; propertyId: string; status: string }>(
+      '/listings',
+      token,
+      data,
+    ),
+
+  getById: (id: string) => apiClient.get<ListingDetail>(`/listings/${id}`),
+
+  search: (params: SearchListingsParams = {}) => {
+    const query = new URLSearchParams();
+    Object.entries(params).forEach(([key, value]) => {
+      if (value !== undefined && value !== '') query.append(key, String(value));
+    });
+    const qs = query.toString();
+    return apiClient.get<PaginatedResult<ListingDetail>>(`/listings${qs ? `?${qs}` : ''}`);
+  },
+
+  updateStatus: (token: string, id: string, status: ListingStatus, moderationNotes?: string) =>
+    apiClient.authPost<{ status: string }>(`/listings/${id}/status`, token, {
+      status,
+      moderationNotes,
+    }),
+
+  uploadMedia: async (token: string, listingId: string, file: File, caption?: string) => {
+    const formData = new FormData();
+    formData.append('file', file);
+    if (caption) formData.append('caption', caption);
+
+    const res = await fetch(`${API_BASE_URL}/listings/${listingId}/media`, {
+      method: 'POST',
+      headers: { Authorization: `Bearer ${token}` },
+      body: formData,
+    });
+
+    if (!res.ok) {
+      const error = await res.json().catch(() => ({ message: res.statusText }));
+      throw new Error(error.message || 'Upload failed');
+    }
+
+    return res.json() as Promise<{ mediaId: string; url: string }>;
+  },
+};