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>
This commit is contained in:
Ho Ngoc Hai
2026-04-08 01:54:08 +07:00
parent 8a33aae026
commit 207a2013f3
18 changed files with 1834 additions and 8 deletions

View File

@@ -0,0 +1,61 @@
'use client';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { cn } from '@/lib/utils';
import { useAuthStore } from '@/lib/auth-store';
import { Button } from '@/components/ui/button';
const navItems = [
{ href: '/', label: 'Trang chủ', icon: '🏠' },
{ href: '/listings', label: 'Tin đăng', icon: '📋' },
{ href: '/listings/new', label: 'Đăng tin', icon: '' },
];
export default function DashboardLayout({ children }: { children: React.ReactNode }) {
const pathname = usePathname();
const { user, logout } = useAuthStore();
return (
<div className="min-h-screen bg-background">
<header className="sticky top-0 z-50 border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
<div className="mx-auto flex h-14 max-w-7xl items-center px-4">
<Link href="/" className="mr-6 flex items-center space-x-2">
<span className="text-lg font-bold text-primary">GoodGo</span>
</Link>
<nav className="flex items-center space-x-1">
{navItems.map((item) => (
<Link
key={item.href}
href={item.href}
className={cn(
'rounded-md px-3 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground',
pathname === item.href
? 'bg-accent text-accent-foreground'
: 'text-muted-foreground',
)}
>
<span className="mr-1.5">{item.icon}</span>
{item.label}
</Link>
))}
</nav>
<div className="ml-auto flex items-center space-x-3">
{user && (
<span className="text-sm text-muted-foreground">
{user.fullName}
</span>
)}
<Button variant="ghost" size="sm" onClick={logout}>
Đăng xuất
</Button>
</div>
</div>
</header>
<main className="mx-auto max-w-7xl px-4 py-6">{children}</main>
</div>
);
}