admin/goodgo-platform
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: comprehensive seed, Lucide icons, grouped dashboard nav, API fixes

Browse Source 
- Rewrite prisma/seed.ts to populate all 27 models with realistic
  Vietnamese real estate data (8 users with login, 10 properties,
  10 listings, orders, payments, reviews, notifications, etc.)
- Replace all emoji icons with Lucide React SVG icons across frontend
  for consistent rendering, sizing, and accessibility
- Redesign dashboard nav: grouped sidebar with section headers,
  primary/secondary split on desktop, icon-only secondary items
- Replace language switcher flag emoji with Globe icon
- Replace SVG theme toggle with Lucide Moon/Sun icons
- Fix API startup: graceful fallback for Sentry profiling, Google OAuth,
  and Zalo OAuth when credentials are not configured
- Relax rate limiting in development mode (10k req/min)
- Fix listings API to include media[] array in search response
- Add optional chaining for property.media across frontend components
- Update OAuth strategy tests to match graceful fallback behavior

Co-Authored-By: Claude Opus 4 (1M context) <noreply@anthropic.com>
This commit is contained in:
Ho Ngoc Hai
2026-04-13 11:13:04 +07:00
parent db0fe8b9b7
commit a9fa214544
22 changed files with 876 additions and 744 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
apps/web/app/[locale]/(dashboard)/dashboard/page.tsx
View File

@@ -238,9 +238,9 @@ export default function DashboardPage() {
className="flex items-center gap-4 rounded-lg border p-3 transition-colors hover:bg-accent"
>
<div className="relative h-12 w-16 flex-shrink-0 overflow-hidden rounded bg-muted">
{listing.property.media.length > 0 ? (
{(listing.property.media?.length ?? 0) > 0 ? (
<Image
src={listing.property.media[0]?.url ?? ''}
src={listing.property.media![0]?.url ?? ''}
alt={listing.property.title}
fill
sizes="64px"

218
apps/web/app/[locale]/(dashboard)/layout.tsx
View File

@@ -1,6 +1,24 @@
'use client';
import { LogOut, Menu, X } from 'lucide-react';
import {
BarChart3,
Bookmark,
Bot,
CreditCard,
Gem,
Home,
List,
LogOut,
Menu,
MessageSquare,
Moon,
Plus,
Sun,
Target,
User,
X,
type LucideIcon,
} from 'lucide-react';
import { usePathname } from 'next/navigation';
import { useTranslations } from 'next-intl';
import { useState } from 'react';
@@ -11,6 +29,17 @@ import { Link } from '@/i18n/navigation';
import { useAuthStore } from '@/lib/auth-store';
import { cn } from '@/lib/utils';
interface NavItem {
href: string;
label: string;
icon: LucideIcon;
}
interface NavGroup {
label: string;
items: NavItem[];
}
export default function DashboardLayout({ children }: { children: React.ReactNode }) {
const pathname = usePathname();
const { user, logout } = useAuthStore();
@@ -18,20 +47,61 @@ export default function DashboardLayout({ children }: { children: React.ReactNod
const t = useTranslations();
const [sidebarOpen, setSidebarOpen] = useState(false);
const navItems = [
{ href: '/dashboard' as const, label: t('dashboard.title'), icon: '🏠' },
{ href: '/listings' as const, label: t('dashboard.listings'), icon: '📋' },
{ href: '/listings/new' as const, label: t('dashboard.createListing'), icon: '➕' },
{ href: '/inquiries' as const, label: t('dashboard.inquiries'), icon: '💬' },
{ href: '/leads' as const, label: t('dashboard.leads'), icon: '🎯' },
{ href: '/analytics' as const, label: t('dashboard.analytics'), icon: '📊' },
{ href: '/dashboard/saved-searches' as const, label: t('dashboard.savedSearches'), icon: '🔖' },
{ href: '/dashboard/valuation' as const, label: t('dashboard.aiValuation'), icon: '🤖' },
{ href: '/dashboard/profile' as const, label: t('dashboard.profile'), icon: '👤' },
{ href: '/dashboard/subscription' as const, label: t('dashboard.subscription'), icon: '💎' },
{ href: '/dashboard/payments' as const, label: t('dashboard.payments'), icon: '💳' },
const navGroups: NavGroup[] = [
{
label: t('dashboard.title'),
items: [
{ href: '/dashboard', label: t('dashboard.title'), icon: Home },
{ href: '/listings', label: t('dashboard.listings'), icon: List },
{ href: '/listings/new', label: t('dashboard.createListing'), icon: Plus },
],
},
{
label: 'CRM',
items: [
{ href: '/inquiries', label: t('dashboard.inquiries'), icon: MessageSquare },
{ href: '/leads', label: t('dashboard.leads'), icon: Target },
],
},
{
label: t('dashboard.analytics'),
items: [
{ href: '/analytics', label: t('dashboard.analytics'), icon: BarChart3 },
{ href: '/dashboard/saved-searches', label: t('dashboard.savedSearches'), icon: Bookmark },
{ href: '/dashboard/valuation', label: t('dashboard.aiValuation'), icon: Bot },
],
},
{
label: t('dashboard.profile'),
items: [
{ href: '/dashboard/profile', label: t('dashboard.profile'), icon: User },
{ href: '/dashboard/subscription', label: t('dashboard.subscription'), icon: Gem },
{ href: '/dashboard/payments', label: t('dashboard.payments'), icon: CreditCard },
],
},
];
// Flat list for desktop nav (only primary items shown inline)
const primaryNav: NavItem[] = [
{ href: '/dashboard', label: t('dashboard.title'), icon: Home },
{ href: '/listings', label: t('dashboard.listings'), icon: List },
{ href: '/listings/new', label: t('dashboard.createListing'), icon: Plus },
{ href: '/inquiries', label: t('dashboard.inquiries'), icon: MessageSquare },
{ href: '/leads', label: t('dashboard.leads'), icon: Target },
{ href: '/analytics', label: t('dashboard.analytics'), icon: BarChart3 },
];
const secondaryNav: NavItem[] = [
{ href: '/dashboard/saved-searches', label: t('dashboard.savedSearches'), icon: Bookmark },
{ href: '/dashboard/valuation', label: t('dashboard.aiValuation'), icon: Bot },
{ href: '/dashboard/profile', label: t('dashboard.profile'), icon: User },
{ href: '/dashboard/subscription', label: t('dashboard.subscription'), icon: Gem },
{ href: '/dashboard/payments', label: t('dashboard.payments'), icon: CreditCard },
];
const isActive = (href: string) =>
pathname === href || (href !== '/dashboard' && pathname.startsWith(href));
return (
<div className="min-h-screen bg-background">
{/* Mobile overlay */}
@@ -43,7 +113,7 @@ export default function DashboardLayout({ children }: { children: React.ReactNod
/>
)}
{/* Mobile sidebar */}
{/* Mobile sidebar — grouped nav */}
<aside
role="navigation"
aria-label={t('nav.dashboardNav')}
@@ -65,22 +135,31 @@ export default function DashboardLayout({ children }: { children: React.ReactNod
</button>
</div>
<nav className="flex flex-col gap-1 p-3">
{navItems.map((item) => (
<Link
key={item.href}
href={item.href}
onClick={() => setSidebarOpen(false)}
className={cn(
'flex items-center gap-3 rounded-md px-3 py-2.5 text-sm font-medium transition-colors',
pathname === item.href || (item.href !== '/dashboard' && pathname.startsWith(item.href))
? 'bg-primary/10 text-primary'
: 'text-muted-foreground hover:bg-accent hover:text-accent-foreground',
)}
>
<span aria-hidden="true">{item.icon}</span>
{item.label}
</Link>
<nav className="flex flex-col gap-4 overflow-y-auto p-3">
{navGroups.map((group) => (
<div key={group.label}>
<p className="mb-1 px-3 text-xs font-semibold uppercase tracking-wider text-muted-foreground/60">
{group.label}
</p>
<div className="flex flex-col gap-0.5">
{group.items.map((item) => (
<Link
key={item.href}
href={item.href}
onClick={() => setSidebarOpen(false)}
className={cn(
'flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium transition-colors',
isActive(item.href)
? 'bg-primary/10 text-primary'
: 'text-muted-foreground hover:bg-accent hover:text-accent-foreground',
)}
>
<item.icon className="h-4 w-4 shrink-0" aria-hidden="true" />
{item.label}
</Link>
))}
</div>
</div>
))}
</nav>
@@ -114,33 +193,57 @@ export default function DashboardLayout({ children }: { children: React.ReactNod
<Menu className="h-5 w-5" />
</button>
<Link href="/" className="mr-6 flex items-center space-x-2">
<Link href="/" className="mr-4 flex items-center space-x-2">
<span className="text-lg font-bold text-primary">{t('common.goodgo')}</span>
</Link>
{/* Desktop nav */}
<nav aria-label={t('nav.dashboardNav')} className="hidden items-center space-x-1 md:flex">
{navItems.map((item) => (
<Link
key={item.href}
href={item.href}
aria-label={item.label}
className={cn(
'rounded-md px-3 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground',
pathname === item.href || (item.href !== '/dashboard' && pathname.startsWith(item.href))
? 'bg-accent text-accent-foreground'
: 'text-muted-foreground',
)}
>
<span className="mr-1.5" aria-hidden="true">{item.icon}</span>
<span className="hidden lg:inline">{item.label}</span>
</Link>
))}
{/* Desktop nav — primary items with labels, secondary icon-only */}
<nav aria-label={t('nav.dashboardNav')} className="hidden items-center md:flex">
<div className="flex items-center">
{primaryNav.map((item) => (
<Link
key={item.href}
href={item.href}
aria-label={item.label}
title={item.label}
className={cn(
'inline-flex items-center gap-1.5 rounded-md px-2.5 py-1.5 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground',
isActive(item.href)
? 'bg-accent text-accent-foreground'
: 'text-muted-foreground',
)}
>
<item.icon className="h-4 w-4 shrink-0" aria-hidden="true" />
<span className="hidden xl:inline">{item.label}</span>
</Link>
))}
</div>
<div className="mx-2 h-5 w-px bg-border" aria-hidden="true" />
<div className="flex items-center">
{secondaryNav.map((item) => (
<Link
key={item.href}
href={item.href}
aria-label={item.label}
title={item.label}
className={cn(
'inline-flex items-center justify-center rounded-md p-2 transition-colors hover:bg-accent hover:text-accent-foreground',
isActive(item.href)
? 'bg-accent text-accent-foreground'
: 'text-muted-foreground',
)}
>
<item.icon className="h-4 w-4" aria-hidden="true" />
</Link>
))}
</div>
</nav>
<div className="ml-auto flex items-center space-x-2">
<div className="ml-auto flex items-center space-x-1">
{user && (
<span className="hidden text-sm text-muted-foreground sm:inline">
<span className="hidden text-sm text-muted-foreground lg:inline">
{user.fullName}
</span>
)}
@@ -153,17 +256,14 @@ export default function DashboardLayout({ children }: { children: React.ReactNod
className="h-9 w-9 p-0"
>
{theme === 'light' ? (
<svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
</svg>
<Moon className="h-4 w-4" aria-hidden="true" />
) : (
<svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
</svg>
<Sun className="h-4 w-4" aria-hidden="true" />
)}
</Button>
<Button variant="ghost" size="sm" className="hidden md:inline-flex" onClick={() => logout()}>
{t('common.logout')}
<Button variant="ghost" size="sm" className="hidden gap-1.5 md:inline-flex" onClick={() => logout()}>
<LogOut className="h-4 w-4" aria-hidden="true" />
<span className="hidden lg:inline">{t('common.logout')}</span>
</Button>
</div>
</div>

3
apps/web/app/[locale]/(dashboard)/leads/page.tsx
View File

@@ -1,5 +1,6 @@
'use client';
import { ClipboardList } from 'lucide-react';
import * as React from 'react';
import { CreateLeadDialog } from '@/components/leads/create-lead-dialog';
import { LeadDetailDialog } from '@/components/leads/lead-detail-dialog';
@@ -149,7 +150,7 @@ export default function LeadsPage() {
</div>
) : !result || result.data.length === 0 ? (
<div className="flex min-h-[300px] flex-col items-center justify-center text-muted-foreground">
<p className="text-4xl mb-3">📋</p>
<ClipboardList className="h-10 w-10 text-muted-foreground mb-3" aria-hidden="true" />
<p>Chưa có lead nào</p>
<Button variant="outline" size="sm" className="mt-3" onClick={() => setCreateOpen(true)}>
Thêm lead đầu tiên

4
apps/web/app/[locale]/(dashboard)/listings/page.tsx
View File

@@ -184,9 +184,9 @@ export default function ListingsPage() {
<Link key={listing.id} href={`/listings/${listing.id}`}>
<Card className="h-full overflow-hidden transition-shadow hover:shadow-md">
<div className="relative aspect-[4/3] bg-muted">
{listing.property.media.length > 0 ? (
{(listing.property.media?.length ?? 0) > 0 ? (
<Image
src={listing.property.media[0]?.url ?? ''}
src={listing.property.media![0]?.url ?? ''}
alt={listing.property.title}
fill
sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw"

15
apps/web/app/[locale]/(public)/page.tsx
View File

@@ -1,5 +1,6 @@
'use client';
import { Building2, CheckCircle2, Home, MapPin, Users, type LucideIcon } from 'lucide-react';
import { useTranslations } from 'next-intl';
import * as React from 'react';
import { PropertyCard } from '@/components/search/property-card';
@@ -24,11 +25,11 @@ const DISTRICTS = [
type StatKey = 'listings' | 'users' | 'transactions' | 'provinces';
const STATS: { key: StatKey; value: string; icon: string }[] = [
{ key: 'listings', value: '10,000+', icon: '🏠' },
{ key: 'users', value: '50,000+', icon: '👥' },
{ key: 'transactions', value: '2,000+', icon: '✅' },
{ key: 'provinces', value: '63', icon: '📍' },
const STATS: { key: StatKey; value: string; icon: LucideIcon }[] = [
{ key: 'listings', value: '10,000+', icon: Home },
{ key: 'users', value: '50,000+', icon: Users },
{ key: 'transactions', value: '2,000+', icon: CheckCircle2 },
{ key: 'provinces', value: '63', icon: MapPin },
];
const PROPERTY_TYPE_KEYS = ['APARTMENT', 'HOUSE', 'VILLA', 'LAND', 'OFFICE', 'SHOPHOUSE'] as const;
@@ -201,7 +202,7 @@ export default function LandingPage() {
<Card className="group cursor-pointer overflow-hidden transition-shadow hover:shadow-md">
<div className="aspect-[16/9] bg-gradient-to-br from-primary/10 to-primary/5">
<div className="flex h-full items-center justify-center">
<span className="text-3xl" aria-hidden="true">🏙️</span>
<Building2 className="h-8 w-8 text-primary" aria-hidden="true" />
</div>
</div>
<CardContent className="p-3">
@@ -231,7 +232,7 @@ export default function LandingPage() {
key={stat.key}
className="rounded-lg border bg-card p-6 text-center shadow-sm"
>
<span className="text-3xl" aria-hidden="true">{stat.icon}</span>
<stat.icon className="h-8 w-8 text-primary" aria-hidden="true" />
<p className="mt-2 text-3xl font-bold text-primary">{stat.value}</p>
<p className="mt-1 text-sm text-muted-foreground">{t(`stats.${stat.key}`)}</p>
</div>

4
apps/web/components/comparison/comparison-table.tsx
View File

@@ -74,9 +74,9 @@ export function ComparisonTable({ listings, onRemove }: ComparisonTableProps) {
<div className="flex flex-col items-center gap-2">
{/* Image */}
<div className="relative aspect-[4/3] w-full max-w-[200px] overflow-hidden rounded-md bg-muted">
{listing.property.media.length > 0 ? (
{(listing.property.media?.length ?? 0) > 0 ? (
<Image
src={listing.property.media[0]?.url ?? ''}
src={listing.property.media![0]?.url ?? ''}
alt={listing.property.title}
fill
sizes="200px"

5
apps/web/components/inquiries/inquiry-detail-dialog.tsx
View File

@@ -1,5 +1,6 @@
'use client';
import { MessageCircle, Phone } from 'lucide-react';
import { InquiryStatusBadge } from '@/components/inquiries/inquiry-row';
import { Button } from '@/components/ui/button';
import {
@@ -80,7 +81,7 @@ export function InquiryDetailDialog({ inquiry, open, onOpenChange }: InquiryDeta
href={`tel:${inquiry.phone ?? inquiry.userPhone}`}
className="inline-flex items-center gap-1.5 rounded-md border px-3 py-1.5 text-sm transition-colors hover:bg-accent"
>
📞 Gọi điện
<Phone className="h-4 w-4" aria-hidden="true" /> Gọi điện
</a>
<a
href={`https://zalo.me/${(inquiry.phone ?? inquiry.userPhone).replace(/^0/, '84')}`}
@@ -88,7 +89,7 @@ export function InquiryDetailDialog({ inquiry, open, onOpenChange }: InquiryDeta
rel="noopener noreferrer"
className="inline-flex items-center gap-1.5 rounded-md border px-3 py-1.5 text-sm transition-colors hover:bg-accent"
>
💬 Zalo
<MessageCircle className="h-4 w-4" aria-hidden="true" /> Zalo
</a>
</div>
</div>

7
apps/web/components/leads/lead-detail-dialog.tsx
View File

@@ -1,5 +1,6 @@
'use client';
import { Mail, MessageCircle, Phone } from 'lucide-react';
import * as React from 'react';
import { LeadStatusBadge } from '@/components/leads/lead-status-badge';
import { Button } from '@/components/ui/button';
@@ -151,14 +152,14 @@ export function LeadDetailDialog({ lead, open, onOpenChange }: LeadDetailDialogP
href={`tel:${lead.phone}`}
className="inline-flex items-center gap-1.5 rounded-md border px-3 py-1.5 text-sm transition-colors hover:bg-accent"
>
📞 Gọi điện
<Phone className="h-4 w-4" aria-hidden="true" /> Gọi điện
</a>
{lead.email && (
<a
href={`mailto:${lead.email}`}
className="inline-flex items-center gap-1.5 rounded-md border px-3 py-1.5 text-sm transition-colors hover:bg-accent"
>
✉️ Email
<Mail className="h-4 w-4" aria-hidden="true" /> Email
</a>
)}
<a
@@ -167,7 +168,7 @@ export function LeadDetailDialog({ lead, open, onOpenChange }: LeadDetailDialogP
rel="noopener noreferrer"
className="inline-flex items-center gap-1.5 rounded-md border px-3 py-1.5 text-sm transition-colors hover:bg-accent"
>
💬 Zalo
<MessageCircle className="h-4 w-4" aria-hidden="true" /> Zalo
</a>
</div>
</div>

4
apps/web/components/map/listing-map.tsx
View File

@@ -140,9 +140,9 @@ export function ListingMap({ listings, onMarkerClick, selectedListingId, classNa
const container = document.createElement('div');
container.style.fontFamily = 'system-ui,sans-serif';
if (listing.property.media.length > 0) {
if ((listing.property.media?.length ?? 0) > 0) {
const img = document.createElement('img');
img.src = listing.property.media[0]!.url;
img.src = listing.property.media![0]!.url;
img.alt = listing.property.title;
img.style.cssText = 'width:100%;height:96px;object-fit:cover;border-radius:6px;margin-bottom:8px;';
container.appendChild(img);

10
apps/web/components/search/property-card.tsx
View File

@@ -32,9 +32,9 @@ export function PropertyCard({ listing, compact }: PropertyCardProps) {
<Link href={`/listings/${listing.id}`}>
<Card className="group h-full overflow-hidden transition-shadow hover:shadow-md">
<div className={`relative bg-muted ${compact ? 'aspect-[16/10]' : 'aspect-[4/3]'}`}>
{listing.property.media.length > 0 ? (
{(listing.property.media?.length ?? 0) > 0 ? (
<Image
src={listing.property.media[0]?.url ?? ''}
src={listing.property.media![0]?.url ?? ''}
alt={`Ảnh bất động sản: ${listing.property.title}`}
fill
sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw"
@@ -55,10 +55,10 @@ export function PropertyCard({ listing, compact }: PropertyCardProps) {
{propertyTypeLabel}
</Badge>
</div>
{listing.property.media.length > 1 && (
{(listing.property.media?.length ?? 0) > 1 && (
<div className="absolute bottom-2 right-2">
<Badge variant="outline" className="bg-black/50 text-xs text-white border-none" aria-label={`${listing.property.media.length} ảnh`}>
{listing.property.media.length} ảnh
<Badge variant="outline" className="bg-black/50 text-xs text-white border-none" aria-label={`${listing.property.media!.length} ảnh`}>
{listing.property.media!.length} ảnh
</Badge>
</div>
)}

6
apps/web/components/ui/language-switcher.tsx
View File

@@ -1,12 +1,13 @@
'use client';
import { Globe } from 'lucide-react';
import { useLocale, useTranslations } from 'next-intl';
import type { Locale } from '@/i18n/config';
import { usePathname, useRouter } from '@/i18n/navigation';
const localeLabels: Record<Locale, string> = {
vi: '🇻🇳 VI',
en: '🇬🇧 EN',
vi: 'VI',
en: 'EN',
};
export function LanguageSwitcher() {
@@ -28,6 +29,7 @@ export function LanguageSwitcher() {
className="inline-flex h-9 items-center gap-1.5 rounded-md px-2.5 text-sm font-medium text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
aria-label={`${t('label')}: ${t(locale)} → ${t(nextLocale)}`}
>
<Globe className="h-4 w-4" aria-hidden="true" />
<span aria-hidden="true">{localeLabels[nextLocale]}</span>
<span className="sr-only">{t(nextLocale)}</span>
</button>

1
apps/web/lib/listings-api.ts
View File

@@ -67,6 +67,7 @@ export interface ListingDetail {
latitude: number | null;
longitude: number | null;
media: PropertyMedia[];
thumbnail?: string | null;
};
seller: {
id: string;