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>

apps/web/app/(dashboard)/listings/page.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import * as React from 'react';
+import Image from 'next/image';
 import Link from 'next/link';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
@@ -203,14 +204,16 @@ export default function ListingsPage() {
               <Card className="h-full overflow-hidden transition-shadow hover:shadow-md">
                 <div className="relative aspect-[4/3] bg-muted">
                   {listing.property.media.length > 0 ? (
-                    <img
-                      src={listing.property.media[0]?.url}
+                    <Image
+                      src={listing.property.media[0]?.url ?? ''}
                       alt={listing.property.title}
-                      className="h-full w-full object-cover"
+                      fill
+                      sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw"
+                      className="object-cover"
                     />
                   ) : (
                     <div className="flex h-full items-center justify-center text-muted-foreground">
-                      Chua co anh
+                      Chưa có ảnh
                     </div>
                   )}
                   <div className="absolute left-2 top-2">
@@ -279,12 +282,14 @@ export default function ListingsPage() {
                           href={`/listings/${listing.id}`}
                           className="group flex items-center gap-3"
                         >
-                          <div className="h-10 w-14 flex-shrink-0 overflow-hidden rounded bg-muted">
+                          <div className="relative h-10 w-14 flex-shrink-0 overflow-hidden rounded bg-muted">
                             {listing.property.media.length > 0 ? (
-                              <img
-                                src={listing.property.media[0]?.url}
-                                alt=""
-                                className="h-full w-full object-cover"
+                              <Image
+                                src={listing.property.media[0]?.url ?? ''}
+                                alt={listing.property.title}
+                                fill
+                                sizes="56px"
+                                className="object-cover"
                               />
                             ) : (
                               <div className="flex h-full items-center justify-center text-xs text-muted-foreground">