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/components/listings/image-gallery.tsx

@@ -0,0 +1,84 @@
+'use client';
+
+import * as React from 'react';
+import { cn } from '@/lib/utils';
+import type { PropertyMedia } from '@/lib/listings-api';
+
+interface ImageGalleryProps {
+  media: PropertyMedia[];
+  className?: string;
+}
+
+export function ImageGallery({ media, className }: ImageGalleryProps) {
+  const images = media.filter((m) => m.type === 'image').sort((a, b) => a.order - b.order);
+  const [selectedIndex, setSelectedIndex] = React.useState(0);
+
+  if (images.length === 0) {
+    return (
+      <div
+        className={cn(
+          'flex aspect-video items-center justify-center rounded-lg bg-muted text-muted-foreground',
+          className,
+        )}
+      >
+        Chưa có hình ảnh
+      </div>
+    );
+  }
+
+  return (
+    <div className={cn('space-y-3', className)}>
+      {/* Main image */}
+      <div className="relative aspect-video overflow-hidden rounded-lg bg-muted">
+        <img
+          src={images[selectedIndex]?.url}
+          alt={images[selectedIndex]?.caption || `Ảnh ${selectedIndex + 1}`}
+          className="h-full w-full object-cover"
+        />
+        {images.length > 1 && (
+          <>
+            <button
+              onClick={() => setSelectedIndex((i) => (i > 0 ? i - 1 : images.length - 1))}
+              className="absolute left-2 top-1/2 -translate-y-1/2 rounded-full bg-black/50 p-2 text-white transition-colors hover:bg-black/70"
+              aria-label="Ảnh trước"
+            >
+              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="m15 18-6-6 6-6"/></svg>
+            </button>
+            <button
+              onClick={() => setSelectedIndex((i) => (i < images.length - 1 ? i + 1 : 0))}
+              className="absolute right-2 top-1/2 -translate-y-1/2 rounded-full bg-black/50 p-2 text-white transition-colors hover:bg-black/70"
+              aria-label="Ảnh tiếp"
+            >
+              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="m9 18 6-6-6-6"/></svg>
+            </button>
+          </>
+        )}
+        <div className="absolute bottom-2 right-2 rounded bg-black/60 px-2 py-1 text-xs text-white">
+          {selectedIndex + 1} / {images.length}
+        </div>
+      </div>
+
+      {/* Thumbnails */}
+      {images.length > 1 && (
+        <div className="flex gap-2 overflow-x-auto pb-1">
+          {images.map((img, index) => (
+            <button
+              key={img.id}
+              onClick={() => setSelectedIndex(index)}
+              className={cn(
+                'h-16 w-16 flex-shrink-0 overflow-hidden rounded-md border-2 transition-colors',
+                index === selectedIndex ? 'border-primary' : 'border-transparent opacity-70 hover:opacity-100',
+              )}
+            >
+              <img
+                src={img.url}
+                alt={img.caption || `Thumbnail ${index + 1}`}
+                className="h-full w-full object-cover"
+              />
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}