Commit Graph

10 Commits

Author SHA1 Message Date
Ho Ngoc Hai
9d120dd21f feat(web): add React Query, dark mode toggle, and error retry UX
- Install @tanstack/react-query with exponential backoff retry config
- Create QueryClientProvider and custom hooks for listings, analytics,
  payments, and subscription API calls
- Migrate 5 dashboard pages from useState/useEffect to React Query hooks
- Add dark mode CSS variables and ThemeProvider with localStorage persistence
- Add theme toggle button in dashboard header (sun/moon icon)
- Enhance error boundaries with auto-retry, retry count, and loading state

Co-Authored-By: Paperclip <noreply@paperclip.ing>
2026-04-08 23:02:44 +07:00
Ho Ngoc Hai
ccb82fddf8 feat(cache): implement Redis caching for search & analytics hot paths
- Add TTL-specific cache durations: district stats (5min), market report (15min), heatmap (5min)
- Add Redis caching to GeoSearch handler with 60s TTL
- Add cache invalidation on listing.approved, listing.updated, listing.deactivated, listing.sold events
- Invalidate search, geo_search, and all analytics cache prefixes on listing state changes
- Update tests for new CacheService dependency in event handler and geo-search handler

Co-Authored-By: Paperclip <noreply@paperclip.ing>
2026-04-08 22:51:16 +07:00
Ho Ngoc Hai
a590a41e73 feat(web): add loading skeletons, error boundaries, and accessibility improvements
- Add segment-level loading.tsx for dashboard, search, admin, and auth routes
- Add segment-level error.tsx with Vietnamese error messages for all route groups
- Add skip-to-content navigation link in root layout
- Add id="main-content" to all layout main elements
- Add aria-label to nav elements and mobile menu buttons
- Improve dashboard nav responsiveness (icon-only on mobile)
- Hide user name on small screens in dashboard layout

Co-Authored-By: Paperclip <noreply@paperclip.ing>
2026-04-08 13:48:33 +07:00
Ho Ngoc Hai
36c1e3b39a fix(web): add proper Vietnamese diacritics to all dashboard and listing pages
Vietnamese text throughout the frontend was missing accent marks (diacritics),
using plain ASCII instead of proper Unicode characters. Fixed all user-visible
text across dashboard, analytics, listings, search, and chart components.

Co-Authored-By: Paperclip <noreply@paperclip.ing>
2026-04-08 13:21:37 +07:00
Ho Ngoc Hai
5848c2b386 perf(web): optimize bundle size — dynamic import Mapbox GL and code split Recharts
- Dynamic import ListingMap with next/dynamic (ssr: false) in /listings/[id] and /search pages
- Extract Recharts into lazy-loaded DistrictBarChart and PriceTrendChart components
- /listings/[id] first-load JS: 618KB → 149KB (-76%)
- /search first-load JS: 619KB → 150KB (-76%)
- Both pages now well under 300KB target

Co-Authored-By: Paperclip <noreply@paperclip.ing>
2026-04-08 13:10:24 +07:00
Ho Ngoc Hai
2502aa69b7 fix: production readiness — resolve build, lint, and code quality issues
- Fix Next.js build failure: remove duplicate route at (dashboard)/listings/[id]
  that conflicted with (public)/listings/[id] (same URL path in two route groups)
- Fix 772 ESLint errors: auto-fix import ordering (import-x/order), remove unused
  imports/variables, convert empty interfaces to type aliases, replace require()
  with ESM imports, fix consistent-type-imports violations
- Add CLAUDE.md for developer onboarding documentation
- All checks pass: 0 lint errors, typecheck clean, 230 tests passing, build success

Co-Authored-By: Paperclip <noreply@paperclip.ing>
2026-04-08 07:15:06 +07:00
Ho Ngoc Hai
afa70320f5 fix(web): frontend quality — XSS, error states, a11y, image optimization, security headers
- Whitelist OAuth error codes; never render raw URL params (XSS fix)
- Add error state UI with retry button for API failures on homepage and search
- Use <article> for property cards with ARIA labels and semantic list markup
- Replace raw <img> with Next.js <Image> across all listing/gallery/KYC pages
- Add security headers (X-Content-Type-Options, X-Frame-Options, etc.) in next.config.js
- Gate console.error behind NODE_ENV check in global error boundary
- Mapbox confirmed npm-bundled (SRI N/A)

Co-Authored-By: Paperclip <noreply@paperclip.ing>
2026-04-08 06:32:08 +07:00
Ho Ngoc Hai
b6bb422d33 feat(web): add listing detail page and Mapbox GL JS map integration
- Create public listing detail page at /listings/[id] with image gallery,
  property specs, contact card, and embedded map
- Rewrite ListingMap component to use Mapbox GL JS with interactive markers,
  price labels, and listing popups
- Add selectedListingId prop to search page map views for marker highlighting
- Install mapbox-gl dependency

Co-Authored-By: Paperclip <noreply@paperclip.ing>
2026-04-08 05:12:48 +07:00
Ho Ngoc Hai
325cd4c421 feat(web): add error boundaries, 404 page, loading states, and SEO metadata
- Add branded not-found.tsx with navigation links
- Add global error.tsx boundary with retry and error digest display
- Add root loading.tsx skeleton for route transitions
- Expand root layout metadata: OpenGraph, Twitter cards, robots, viewport
- Add sitemap.ts and robots.ts for SEO
- Add search page and listing detail metadata via route layouts

Co-Authored-By: Paperclip <noreply@paperclip.ing>
2026-04-08 04:06:14 +07:00
Ho Ngoc Hai
5e44456d11 feat(search-frontend): add public landing page, search page with map view, filters, and property cards
- Create (public) route group with landing page (hero, featured listings, district links, stats, CTA)
- Create search page with filter sidebar, list/map/split view modes, URL-synced filters, pagination
- Build ListingMap component with CSS-based marker visualization and popup details
- Build FilterBar with transaction type, property type, city, price range, area, bedrooms filters
- Build PropertyCard and SearchResults components with responsive grid layout
- Update middleware to allow public access to / and /search routes
- Move dashboard home to /dashboard to avoid route conflict
- All content in Vietnamese, mobile responsive

Co-Authored-By: Paperclip <noreply@paperclip.ing>
2026-04-08 02:02:42 +07:00