chore: update project documentation, audit reports, and initialize IDE configuration files

docs/audits/IMAGE_QUICK_REFERENCE.md

@@ -1,47 +1,47 @@
-# Image Usage - Quick Reference Card
+# Hình Ảnh - Thẻ Tham Khảo Nhanh
 
-## 🎯 At a Glance
+## 🎯 Tổng Quan
 
-| Item | Status | Details |
-|------|--------|---------|
-| **HTML `<img>` Tags** | ✅ 0 found | All replaced with next/image |
-| **next/image Used** | ✅ 8 files | Proper implementation across app |
-| **Image Components** | ✅ 3 specialized | Gallery, Lightbox, Upload |
-| **Configuration** | ✅ Configured | remotePatterns + CSP headers |
-| **Accessibility** | ✅ Full support | Alt text, keyboard nav, ARIA |
-| **Security** | ✅ HTTPS only | CSP configured, blob URLs for preview |
+| Mục | Trạng Thái | Chi Tiết |
+|-----|------------|----------|
+| **Thẻ HTML `<img>`** | ✅ Tìm thấy 0 | Tất cả đã được thay thế bằng next/image |
+| **next/image Đã Dùng** | ✅ 8 tệp | Triển khai đúng cách trên toàn ứng dụng |
+| **Thành Phần Hình Ảnh** | ✅ 3 chuyên biệt | Gallery, Lightbox, Upload |
+| **Cấu Hình** | ✅ Đã cấu hình | remotePatterns + tiêu đề CSP |
+| **Khả Năng Tiếp Cận** | ✅ Hỗ trợ đầy đủ | Văn bản thay thế, điều hướng bàn phím, ARIA |
+| **Bảo Mật** | ✅ Chỉ HTTPS | CSP đã cấu hình, blob URL cho xem trước |
 
 ---
 
-## 📁 Where Images Are Used
+## 📁 Vị Trí Sử Dụng Hình Ảnh
 
-### **Core Image Components**
+### **Thành Phần Hình Ảnh Cốt Lõi**
 ```
-components/listings/image-gallery.tsx      ← Main gallery viewer
-components/listings/image-lightbox.tsx     ← Fullscreen view
-components/listings/image-upload.tsx       ← Upload with preview
+components/listings/image-gallery.tsx      ← Trình xem thư viện chính
+components/listings/image-lightbox.tsx     ← Xem toàn màn hình
+components/listings/image-upload.tsx       ← Tải lên với xem trước
 ```
 
-### **Components That Display Images**
+### **Các Thành Phần Hiển Thị Hình Ảnh**
 ```
-components/search/property-card.tsx        → Thumbnail in search results
-components/agents/agent-profile-client.tsx → Avatar + agent's listings
-components/comparison/comparison-table.tsx → Comparison images
-components/listings/listing-detail-client.tsx → Integrates ImageGallery
+components/search/property-card.tsx        → Hình thu nhỏ trong kết quả tìm kiếm
+components/agents/agent-profile-client.tsx → Ảnh đại diện + danh sách của môi giới
+components/comparison/comparison-table.tsx → Hình ảnh so sánh
+components/listings/listing-detail-client.tsx → Tích hợp ImageGallery
 ```
 
-### **Page Components**
+### **Thành Phần Trang**
 ```
-app/[locale]/(public)/listings/[id]/page.tsx       → Listing detail (uses ImageGallery)
-app/[locale]/(public)/search/page.tsx              → Search results (uses PropertyCard)
-app/[locale]/(public)/agents/[id]/page.tsx         → Agent profile
-app/[locale]/(dashboard)/listings/page.tsx         → Dashboard listings
-app/[locale]/(dashboard)/listings/new/page.tsx     → Upload new listing
+app/[locale]/(public)/listings/[id]/page.tsx       → Chi tiết tin đăng (dùng ImageGallery)
+app/[locale]/(public)/search/page.tsx              → Kết quả tìm kiếm (dùng PropertyCard)
+app/[locale]/(public)/agents/[id]/page.tsx         → Hồ sơ môi giới
+app/[locale]/(dashboard)/listings/page.tsx         → Danh sách bảng điều khiển
+app/[locale]/(dashboard)/listings/new/page.tsx     → Tải lên tin đăng mới
 ```
 
 ---
 
-## 🔧 Configuration
+## 🔧 Cấu Hình
 
 ### **next.config.js**
 ```javascript
@@ -55,17 +55,17 @@ images: {
 }
 ```
 
-### **CSP Headers**
+### **Tiêu Đề CSP**
 ```
 img-src 'self' data: blob: https://*.mapbox.com https://*.tiles.mapbox.com https:
 ```
-- ✅ Allows blob: (file preview)
-- ✅ Allows data: (inline images)
-- ✅ Allows all HTTPS
+- ✅ Cho phép blob: (xem trước tệp)
+- ✅ Cho phép data: (hình ảnh nội tuyến)
+- ✅ Cho phép tất cả HTTPS
 
 ---
 
-## 📊 Image Component Details
+## 📊 Chi Tiết Thành Phần Hình Ảnh
 
 ### ImageGallery
 ```typescript
@@ -74,7 +74,7 @@ img-src 'self' data: blob: https://*.mapbox.com https://*.tiles.mapbox.com https
   className="w-full"
 />
 ```
-**Features:** Main + thumbnails, navigation, counter, lightbox integration
+**Tính năng:** Ảnh chính + hình thu nhỏ, điều hướng, bộ đếm, tích hợp lightbox
 
 ### ImageLightbox
 ```typescript
@@ -85,7 +85,7 @@ img-src 'self' data: blob: https://*.mapbox.com https://*.tiles.mapbox.com https
   onClose={() => setIsOpen(false)}
 />
 ```
-**Features:** Keyboard nav, swipe, preloading, focus trap
+**Tính năng:** Điều hướng bàn phím, vuốt, tải trước, bẫy tiêu điểm
 
 ### ImageUpload
 ```typescript
@@ -95,80 +95,80 @@ img-src 'self' data: blob: https://*.mapbox.com https://*.tiles.mapbox.com https
   maxFiles={20}
 />
 ```
-**Features:** Drag-drop, validation (JPEG/PNG/WebP), preview, cleanup
+**Tính năng:** Kéo-thả, xác thực (JPEG/PNG/WebP), xem trước, dọn dẹp
 
 ---
 
-## 🎨 Image Data Types
+## 🎨 Kiểu Dữ Liệu Hình Ảnh
 
 ```typescript
 interface PropertyMedia {
   id: string;
-  url: string;              // Image URL
-  type: 'image' | 'video';  // Media type
-  order: number;            // Display order
-  caption?: string;         // Optional caption
+  url: string;              // URL hình ảnh
+  type: 'image' | 'video';  // Loại phương tiện
+  order: number;            // Thứ tự hiển thị
+  caption?: string;         // Chú thích tùy chọn
 }
 
 interface ImageFile {
-  file: File;               // Browser File
+  file: File;               // Tệp trình duyệt
   preview: string;          // blob: URL
 }
 ```
 
 ---
 
-## ⚡ Performance Features
+## ⚡ Tính Năng Hiệu Suất
 
-| Feature | Status |
-|---------|--------|
-| Responsive sizing (`sizes` prop) | ✅ Implemented |
-| Priority loading for above-fold | ✅ Implemented |
-| Image preloading in lightbox | ✅ Implemented |
-| Blob URL cleanup (memory) | ✅ Implemented |
-| Skeleton placeholders | ⚠️ Not implemented |
-| Image compression on upload | ⚠️ Not implemented |
+| Tính Năng | Trạng Thái |
+|-----------|------------|
+| Kích thước thích ứng (thuộc tính `sizes`) | ✅ Đã triển khai |
+| Tải ưu tiên cho nội dung phía trên nếp gấp | ✅ Đã triển khai |
+| Tải trước hình ảnh trong lightbox | ✅ Đã triển khai |
+| Dọn dẹp blob URL (bộ nhớ) | ✅ Đã triển khai |
+| Placeholder xương | ⚠️ Chưa triển khai |
+| Nén hình ảnh khi tải lên | ⚠️ Chưa triển khai |
 
 ---
 
-## ♿ Accessibility Features
+## ♿ Tính Năng Khả Năng Tiếp Cận
 
-| Feature | Status |
-|---------|--------|
-| Alt text on images | ✅ Vietnamese |
-| ARIA labels | ✅ Implemented |
-| Keyboard navigation | ✅ Arrow keys + Escape |
-| Focus trap in modal | ✅ Implemented |
-| Tab trapping | ✅ Implemented |
+| Tính Năng | Trạng Thái |
+|-----------|------------|
+| Văn bản thay thế trên hình ảnh | ✅ Tiếng Việt |
+| Nhãn ARIA | ✅ Đã triển khai |
+| Điều hướng bàn phím | ✅ Phím mũi tên + Escape |
+| Bẫy tiêu điểm trong hộp thoại | ✅ Đã triển khai |
+| Bẫy tab | ✅ Đã triển khai |
 
 ---
 
-## 🔒 Security Checklist
+## 🔒 Danh Sách Kiểm Tra Bảo Mật
 
-- ✅ HTTPS-only remote patterns
-- ✅ CSP headers configured
-- ✅ blob: URLs only for client-side preview
-- ⚠️ API image URL validation - **TO DO**
-- ⚠️ User upload scanning - **TO DO**
+- ✅ Mẫu remote chỉ dùng HTTPS
+- ✅ Tiêu đề CSP đã cấu hình
+- ✅ blob: URL chỉ dùng cho xem trước phía máy khách
+- ⚠️ Xác thực URL hình ảnh tại API - **CẦN LÀM**
+- ⚠️ Quét tệp tải lên của người dùng - **CẦN LÀM**
 
 ---
 
-## 📝 Common Tasks
+## 📝 Các Tác Vụ Thông Dụng
 
-### Adding Images to a Component
+### Thêm Hình Ảnh vào Thành Phần
 ```tsx
 import Image from 'next/image';
 
 <Image
   src={imageUrl}
-  alt="Descriptive text in Vietnamese"
+  alt="Văn bản mô tả bằng tiếng Việt"
   fill
   sizes="(max-width: 768px) 100vw, 50vw"
   className="object-cover"
 />
 ```
 
-### Showing Image Gallery
+### Hiển Thị Thư Viện Hình Ảnh
 ```tsx
 import { ImageGallery } from '@/components/listings/image-gallery';
 
@@ -177,7 +177,7 @@ import { ImageGallery } from '@/components/listings/image-gallery';
 />
 ```
 
-### File Upload
+### Tải Lên Tệp
 ```tsx
 import { ImageUpload } from '@/components/listings/image-upload';
 
@@ -192,18 +192,18 @@ const [images, setImages] = useState<ImageFile[]>([]);
 
 ---
 
-## 🚨 Important Notes
+## 🚨 Lưu Ý Quan Trọng
 
-1. **Never use HTML `<img>` tags** - Use `next/image` instead
-2. **Exception:** Blob URL preview in image-upload is OK
-3. **Always provide alt text** - Use Vietnamese text
-4. **Use `sizes` prop** - For responsive images
-5. **Set `priority`** - For above-fold images
-6. **Revoke blob URLs** - On unmount to prevent memory leaks
-7. **Validate image URLs** - At API layer before returning
+1. **Không bao giờ dùng thẻ HTML `<img>`** - Sử dụng `next/image` thay thế
+2. **Ngoại lệ:** Xem trước blob URL trong image-upload là chấp nhận được
+3. **Luôn cung cấp văn bản thay thế** - Dùng văn bản tiếng Việt
+4. **Dùng thuộc tính `sizes`** - Cho hình ảnh thích ứng
+5. **Đặt `priority`** - Cho hình ảnh phía trên nếp gấp
+6. **Thu hồi blob URL** - Khi huỷ gắn kết để ngăn rò rỉ bộ nhớ
+7. **Xác thực URL hình ảnh** - Tại lớp API trước khi trả về
 
 ---
 
-## 📞 Questions?
+## 📞 Câu Hỏi?
 
-See `IMAGE_AUDIT_REPORT.md` for complete details and recommendations.
+Xem `IMAGE_AUDIT_REPORT.md` để biết chi tiết đầy đủ và các khuyến nghị.