feat(listings+projects): wire listing PATCH + project rich content parity

Two CRUD/parity gaps closed:

Listings edit — PATCH was dead-ended at the frontend
----------------------------------------------------
Backend PATCH /listings/:id existed and accepted Phase B fields but
the dashboard edit page was read-only with a disclaimer stub. Now:
- listings-api.ts exports UpdateListingPayload (Partial<CreatePayload>)
  and listingsApi.update(id, data).
- /listings/[id]/edit/page.tsx wires handleSubmit → maps the form to
  UpdateListingPayload (coerces numerics, splits CSV amenities/view/
  suitableFor, normalises petFriendly 3-way select), calls update,
  shows green success banner or red error banner. Removed the
  disclaimer text.
- Form footer now has Huỷ + Lưu thay đổi buttons.

Projects rich content — parity with Phase B listings
---------------------------------------------------
Same "Phù hợp với ai / Vì sao nên chọn dự án này" pattern now on
project detail.

Schema
- ProjectDevelopment: suitableFor String[] @default([]) +
  whyThisLocation String? @db.Text. Migration 20260419100000 applied
  via db:push.

Backend
- CreateProjectDto / UpdateProjectDto pick up optional suitableFor +
  whyThisLocation (MaxLength 2000).
- CreateProjectCommand / UpdateProjectCommand append the two trailing
  args; handlers forward them.
- ProjectDevelopment entity carries the props + updateDetails
  branches.
- ProjectListItem (inherited by ProjectDetailData) exposes both.
- Prisma repo writes them on raw INSERT/UPDATE and reads them in
  toDomain + toListItem. Controller passes dto → commands.

Frontend
- du-an-api.ts: ProjectDetail / CreateProjectPayload /
  UpdateProjectPayload gain suitableFor + whyThisLocation. duAnApi
  exports create / update / delete (already landed earlier, now in
  sync with the new fields).
- du-an-server.ts normalizer pulls the two fields safely (filter
  strings, default empty array / null).
- Dashboard /projects/new + /projects/[id]/edit: new "Phù hợp & lý
  do khu vực" form section (CSV split + 2000-char textarea). Submit
  handlers forward to create/update payloads.
- Public /du-an/[slug] detail (du-an-detail-client.tsx): two new
  cards just below the quick-stats grid —
  * ProjectPersonaFitCard: chips for each suitableFor label with a
    "Chủ đầu tư chọn" badge (bg-primary/10), plus a disabled
    <Button><Sparkles /> AI nhận định dự án (sắp ra mắt)</Button>
    teaser with a TODO pointing to a future project-AI advisor
    endpoint.
  * ProjectWhyLocationCard: renders whyThisLocation in
    whitespace-pre-wrap; skipped when the field is empty.

Verification
- API typecheck clean; 1975/1975 tests pass.
- Web typecheck clean in touched files; 624/624 tests pass.
- Lucide-only icons; Vietnamese labels; no new npm packages;
  runtime imports preserved for NestJS-DI classes.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

apps/web/app/[locale]/(dashboard)/listings/[id]/edit/page.tsx

@@ -13,12 +13,23 @@ import {
 import { Button } from '@/components/ui/button';
 import { Card, CardContent } from '@/components/ui/card';
 import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs';
-import { listingsApi, type ListingDetail } from '@/lib/listings-api';
+import { listingsApi, type Direction, type ListingDetail, type UpdateListingPayload } from '@/lib/listings-api';
 import {
   createListingSchema,
   type CreateListingFormData,
 } from '@/lib/validations/listings';
 
+function toNum(v: string | undefined): number | undefined {
+  if (!v) return undefined;
+  const n = Number(v);
+  return Number.isFinite(n) ? n : undefined;
+}
+
+function toStrArr(csv: string | undefined): string[] | undefined {
+  if (!csv || !csv.trim()) return undefined;
+  return csv.split(',').map((s) => s.trim()).filter(Boolean);
+}
+
 export default function EditListingPage() {
   const { id } = useParams<{ id: string }>();
   const router = useRouter();
@@ -26,15 +37,88 @@ export default function EditListingPage() {
   const [loading, setLoading] = React.useState(true);
   const [activeTab, setActiveTab] = React.useState('basic');
 
+  const [saving, setSaving] = React.useState(false);
+  const [saveMsg, setSaveMsg] = React.useState<{ type: 'success' | 'error'; text: string } | null>(null);
+
   const {
     register,
     reset,
+    handleSubmit,
     formState: { errors },
   } = useForm<CreateListingFormData>({
     resolver: zodResolver(createListingSchema),
     mode: 'onTouched',
   });
 
+  const onSubmit = async (data: CreateListingFormData) => {
+    setSaving(true);
+    setSaveMsg(null);
+    try {
+      const payload: UpdateListingPayload = {
+        transactionType: data.transactionType,
+        propertyType: data.propertyType,
+        title: data.title,
+        description: data.description,
+        address: data.address,
+        ward: data.ward,
+        district: data.district,
+        city: data.city,
+        priceVND: data.priceVND,
+        areaM2: Number(data.areaM2),
+      };
+      const lat = toNum(data.latitude);
+      if (lat != null) payload.latitude = lat;
+      const lng = toNum(data.longitude);
+      if (lng != null) payload.longitude = lng;
+      const usableAreaM2 = toNum(data.usableAreaM2);
+      if (usableAreaM2 != null) payload.usableAreaM2 = usableAreaM2;
+      const bedrooms = toNum(data.bedrooms);
+      if (bedrooms != null) payload.bedrooms = bedrooms;
+      const bathrooms = toNum(data.bathrooms);
+      if (bathrooms != null) payload.bathrooms = bathrooms;
+      const floors = toNum(data.floors);
+      if (floors != null) payload.floors = floors;
+      const floor = toNum(data.floor);
+      if (floor != null) payload.floor = floor;
+      const totalFloors = toNum(data.totalFloors);
+      if (totalFloors != null) payload.totalFloors = totalFloors;
+      if (data.direction) payload.direction = data.direction as Direction;
+      const yearBuilt = toNum(data.yearBuilt);
+      if (yearBuilt != null) payload.yearBuilt = yearBuilt;
+      if (data.legalStatus) payload.legalStatus = data.legalStatus;
+      if (data.projectName) payload.projectName = data.projectName;
+      const amenities = toStrArr(data.amenities);
+      if (amenities) payload.amenities = amenities;
+      if (data.rentPriceMonthly) payload.rentPriceMonthly = data.rentPriceMonthly;
+      const commissionPct = toNum(data.commissionPct);
+      if (commissionPct != null) payload.commissionPct = commissionPct;
+      // Phase B
+      if (data.furnishing) payload.furnishing = data.furnishing as UpdateListingPayload['furnishing'];
+      if (data.propertyCondition) payload.propertyCondition = data.propertyCondition as UpdateListingPayload['propertyCondition'];
+      if (data.balconyDirection) payload.balconyDirection = data.balconyDirection as Direction;
+      if (data.maintenanceFeeVND) payload.maintenanceFeeVND = data.maintenanceFeeVND;
+      const parkingSlots = toNum(data.parkingSlots);
+      if (parkingSlots != null) payload.parkingSlots = parkingSlots;
+      const viewType = toStrArr(data.viewType);
+      if (viewType) payload.viewType = viewType;
+      if (data.petFriendly === 'true') payload.petFriendly = true;
+      else if (data.petFriendly === 'false') payload.petFriendly = false;
+      const suitableFor = toStrArr(data.suitableFor);
+      if (suitableFor) payload.suitableFor = suitableFor;
+      if (data.whyThisLocation) payload.whyThisLocation = data.whyThisLocation;
+
+      await listingsApi.update(id, payload);
+      setSaveMsg({ type: 'success', text: 'Đã lưu thay đổi.' });
+    } catch (err) {
+      setSaveMsg({
+        type: 'error',
+        text: err instanceof Error ? err.message : 'Không thể lưu — vui lòng thử lại.',
+      });
+    } finally {
+      setSaving(false);
+    }
+  };
+
   React.useEffect(() => {
     listingsApi
       .getById(id)
@@ -110,36 +194,54 @@ export default function EditListingPage() {
         </Button>
       </div>
 
-      <p className="text-sm text-muted-foreground">
-        Chức năng chỉnh sửa sẽ được hoàn thiện khi backend API hỗ trợ PATCH /listings/:id.
-        Hiện tại bạn có thể xem lại thông tin đã nhập.
-      </p>
+      {saveMsg && (
+        <div
+          className={
+            saveMsg.type === 'success'
+              ? 'rounded-md border border-green-500/40 bg-green-500/10 px-3 py-2 text-sm text-green-600 dark:text-green-400'
+              : 'rounded-md border border-destructive/50 bg-destructive/10 px-3 py-2 text-sm text-destructive'
+          }
+        >
+          {saveMsg.text}
+        </div>
+      )}
 
-      <Tabs value={activeTab} onValueChange={setActiveTab}>
-        <TabsList className="grid w-full grid-cols-2 md:grid-cols-4">
-          <TabsTrigger value="basic">Cơ bản</TabsTrigger>
-          <TabsTrigger value="location">Vị trí</TabsTrigger>
-          <TabsTrigger value="details">Chi tiết</TabsTrigger>
-          <TabsTrigger value="pricing">Giá cả</TabsTrigger>
-        </TabsList>
+      <form onSubmit={handleSubmit(onSubmit)}>
+        <Tabs value={activeTab} onValueChange={setActiveTab}>
+          <TabsList className="grid w-full grid-cols-2 md:grid-cols-4">
+            <TabsTrigger value="basic">Cơ bản</TabsTrigger>
+            <TabsTrigger value="location">Vị trí</TabsTrigger>
+            <TabsTrigger value="details">Chi tiết</TabsTrigger>
+            <TabsTrigger value="pricing">Giá cả</TabsTrigger>
+          </TabsList>
 
-        <Card className="mt-4">
-          <CardContent className="pt-6">
-            <TabsContent value="basic">
-              <StepBasicInfo register={register} errors={errors} />
-            </TabsContent>
-            <TabsContent value="location">
-              <StepLocation register={register} errors={errors} />
-            </TabsContent>
-            <TabsContent value="details">
-              <StepDetails register={register} errors={errors} />
-            </TabsContent>
-            <TabsContent value="pricing">
-              <StepPricing register={register} errors={errors} />
-            </TabsContent>
-          </CardContent>
-        </Card>
-      </Tabs>
+          <Card className="mt-4">
+            <CardContent className="pt-6">
+              <TabsContent value="basic">
+                <StepBasicInfo register={register} errors={errors} />
+              </TabsContent>
+              <TabsContent value="location">
+                <StepLocation register={register} errors={errors} />
+              </TabsContent>
+              <TabsContent value="details">
+                <StepDetails register={register} errors={errors} />
+              </TabsContent>
+              <TabsContent value="pricing">
+                <StepPricing register={register} errors={errors} />
+              </TabsContent>
+            </CardContent>
+          </Card>
+        </Tabs>
+
+        <div className="mt-6 flex justify-end gap-3">
+          <Button type="button" variant="outline" onClick={() => router.push(`/listings/${id}`)}>
+            Huỷ
+          </Button>
+          <Button type="submit" disabled={saving}>
+            {saving ? 'Đang lưu...' : 'Lưu thay đổi'}
+          </Button>
+        </div>
+      </form>
     </div>
   );
 }

apps/web/app/[locale]/(dashboard)/projects/[id]/edit/page.tsx

@@ -73,6 +73,12 @@ const editSchema = z.object({
   completionDate: z.string().optional(),
 
   tags: z.string().optional(),
+
+  suitableFor: z.string().optional(),
+  whyThisLocation: z
+    .string()
+    .max(2000, 'Tối đa 2000 ký tự')
+    .optional(),
 });
 
 type EditFormData = z.infer<typeof editSchema>;
@@ -146,6 +152,8 @@ export default function EditProjectPage() {
       startDate: '',
       completionDate: toDateInput(project.completionDate),
       tags: '',
+      suitableFor: (project.suitableFor ?? []).join(', '),
+      whyThisLocation: project.whyThisLocation ?? '',
     });
   }, [project, reset]);
 
@@ -185,6 +193,15 @@ export default function EditProjectPage() {
           .map((s) => s.trim())
           .filter(Boolean);
       }
+      if (data.suitableFor !== undefined) {
+        payload.suitableFor = data.suitableFor
+          .split(',')
+          .map((s) => s.trim())
+          .filter(Boolean);
+      }
+      if (data.whyThisLocation !== undefined) {
+        payload.whyThisLocation = data.whyThisLocation || null;
+      }
 
       await duAnApi.update(id, payload);
       await queryClient.invalidateQueries({ queryKey: ['admin-projects'] });
@@ -378,6 +395,34 @@ export default function EditProjectPage() {
           </div>
         </FormSection>
 
+        {/* Phù hợp & lý do khu vực */}
+        <FormSection title="Phù hợp & lý do khu vực">
+          <div className="space-y-1.5 sm:col-span-2">
+            <Label htmlFor="suitableFor">Phù hợp với ai (phân cách bởi dấu phẩy)</Label>
+            <Input
+              id="suitableFor"
+              {...register('suitableFor')}
+              placeholder="Gia đình trẻ, Chuyên gia nước ngoài, Nhà đầu tư"
+            />
+            <p className="text-xs text-muted-foreground">
+              Mỗi nhóm đối tượng là một chip hiển thị trên trang dự án.
+            </p>
+          </div>
+          <div className="space-y-1.5 sm:col-span-2">
+            <Label htmlFor="whyThisLocation">Vì sao nên chọn khu vực này</Label>
+            <Textarea
+              id="whyThisLocation"
+              rows={4}
+              maxLength={2000}
+              {...register('whyThisLocation')}
+              placeholder="Mô tả ngắn vì sao khu vực này phù hợp..."
+            />
+            {errors.whyThisLocation && (
+              <p className="text-xs text-destructive">{errors.whyThisLocation.message}</p>
+            )}
+          </div>
+        </FormSection>
+
         {/* Thời gian */}
         <FormSection title="Thời gian">
           <div className="space-y-1.5">

apps/web/app/[locale]/(dashboard)/projects/new/page.tsx

@@ -90,6 +90,12 @@ const projectSchema = z.object({
   completionDate: z.string().optional(),
 
   tags: z.string().optional(),
+
+  suitableFor: z.string().optional(),
+  whyThisLocation: z
+    .string()
+    .max(2000, 'Tối đa 2000 ký tự')
+    .optional(),
 });
 
 type ProjectFormData = z.infer<typeof projectSchema>;
@@ -164,6 +170,14 @@ export default function CreateProjectPage() {
           .filter(Boolean);
         if (tags.length > 0) payload.tags = tags;
       }
+      if (data.suitableFor) {
+        const suitableFor = data.suitableFor
+          .split(',')
+          .map((s) => s.trim())
+          .filter(Boolean);
+        if (suitableFor.length > 0) payload.suitableFor = suitableFor;
+      }
+      if (data.whyThisLocation) payload.whyThisLocation = data.whyThisLocation;
 
       await duAnApi.create(payload);
       setSuccess(true);
@@ -408,6 +422,34 @@ export default function CreateProjectPage() {
           </div>
         </FormSection>
 
+        {/* Phù hợp & lý do khu vực */}
+        <FormSection title="Phù hợp & lý do khu vực">
+          <div className="space-y-1.5 sm:col-span-2">
+            <Label htmlFor="suitableFor">Phù hợp với ai (phân cách bởi dấu phẩy)</Label>
+            <Input
+              id="suitableFor"
+              {...register('suitableFor')}
+              placeholder="Gia đình trẻ, Chuyên gia nước ngoài, Nhà đầu tư"
+            />
+            <p className="text-xs text-muted-foreground">
+              Mỗi nhóm đối tượng là một chip hiển thị trên trang dự án.
+            </p>
+          </div>
+          <div className="space-y-1.5 sm:col-span-2">
+            <Label htmlFor="whyThisLocation">Vì sao nên chọn khu vực này</Label>
+            <Textarea
+              id="whyThisLocation"
+              rows={4}
+              maxLength={2000}
+              {...register('whyThisLocation')}
+              placeholder="Mô tả ngắn vì sao khu vực này phù hợp..."
+            />
+            {errors.whyThisLocation && (
+              <p className="text-xs text-destructive">{errors.whyThisLocation.message}</p>
+            )}
+          </div>
+        </FormSection>
+
         {/* Thời gian */}
         <FormSection title="Thời gian">
           <div className="space-y-1.5">