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">

apps/web/components/du-an/du-an-detail-client.tsx

@@ -10,6 +10,7 @@ import {
   Home,
   MapPin,
   Phone,
+  Sparkles,
   X,
 } from 'lucide-react';
 import dynamic from 'next/dynamic';
@@ -154,6 +155,12 @@ export function DuAnDetailClient({ project }: DuAnDetailClientProps) {
         />
       </div>
 
+      {/* Persona fit — "Phù hợp với ai" (CĐT chọn) + AI placeholder */}
+      <ProjectPersonaFitCard project={project} />
+
+      {/* "Vì sao nên chọn dự án này" narrative — admin authored */}
+      <ProjectWhyLocationCard project={project} />
+
       <div className="grid gap-6 lg:grid-cols-3">
         {/* Main content */}
         <div className="space-y-6 lg:col-span-2">
@@ -617,6 +624,73 @@ function ListingsTab({ project }: { project: ProjectDetail }) {
   );
 }
 
+function ProjectPersonaFitCard({ project }: { project: ProjectDetail }) {
+  const suitableFor = project.suitableFor ?? [];
+
+  // Always render the card so the "AI nhận định" CTA is visible even without
+  // admin-authored chips. If we eventually have nothing to show at all (no
+  // chips and we drop the placeholder), bail out early.
+  if (suitableFor.length === 0) {
+    // Still render with the AI placeholder so users see the intent.
+  }
+
+  return (
+    <Card className="my-6 border-primary/30 bg-primary/5">
+      <CardHeader className="pb-3">
+        <CardTitle className="text-lg">Phù hợp với ai?</CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        {suitableFor.length > 0 ? (
+          <div className="flex flex-wrap gap-2">
+            {suitableFor.map((label) => (
+              <div
+                key={`admin-${label}`}
+                className="inline-flex items-center gap-1.5 rounded-full border border-primary/50 bg-primary/10 px-3 py-1.5 text-sm shadow-sm"
+              >
+                <span className="font-medium">{label}</span>
+                <span className="rounded bg-primary/20 px-1.5 py-0.5 text-[10px] uppercase tracking-wide text-primary">
+                  Chủ đầu tư chọn
+                </span>
+              </div>
+            ))}
+          </div>
+        ) : (
+          <p className="text-sm text-muted-foreground">
+            Chủ đầu tư chưa chỉ định nhóm khách phù hợp.
+          </p>
+        )}
+
+        {/* TODO: replace with a real project-AI advisor endpoint (see the
+            listings flow: apps/api/src/modules/analytics/application/queries/
+            get-listing-ai-advice/). For now this is a disabled placeholder to
+            signal intent without shipping a half-built integration. */}
+        <div className="pt-1">
+          <Button type="button" variant="outline" disabled className="gap-2">
+            <Sparkles className="h-4 w-4" />
+            AI nhận định dự án (sắp ra mắt)
+          </Button>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+
+function ProjectWhyLocationCard({ project }: { project: ProjectDetail }) {
+  const narrative = project.whyThisLocation?.trim();
+  if (!narrative) return null;
+
+  return (
+    <Card className="my-6">
+      <CardHeader className="pb-3">
+        <CardTitle className="text-lg">Vì sao nên chọn dự án này?</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <p className="whitespace-pre-wrap text-sm leading-relaxed">{narrative}</p>
+      </CardContent>
+    </Card>
+  );
+}
+
 function DocumentsTab({ project }: { project: ProjectDetail }) {
   if (project.documents.length === 0) {
     return <p className="text-sm text-muted-foreground">Chưa có tài liệu nào.</p>;

apps/web/lib/du-an-api.ts

@@ -120,6 +120,8 @@ export interface ProjectDetail extends ProjectSummary {
   pois: ProjectPOI[];
   documents: ProjectDocument[];
   linkedListingCount: number;
+  suitableFor?: string[];
+  whyThisLocation?: string | null;
 }
 
 export interface PaginatedResult<T> {
@@ -154,6 +156,8 @@ export interface CreateProjectPayload {
   floorCount?: number;
   unitTypes?: Record<string, unknown>;
   tags?: string[];
+  suitableFor?: string[];
+  whyThisLocation?: string;
   startDate?: string;
   completionDate?: string;
 }
@@ -178,6 +182,8 @@ export interface UpdateProjectPayload {
   media?: Record<string, unknown>[] | null;
   documents?: Record<string, unknown>[] | null;
   tags?: string[];
+  suitableFor?: string[];
+  whyThisLocation?: string | null;
   isVerified?: boolean;
   startDate?: string | null;
   completionDate?: string | null;

apps/web/lib/du-an-server.ts

@@ -130,6 +130,11 @@ function normalizeProjectDetail(raw: unknown): ProjectDetail | null {
     documents: asArray(r['documents']),
     linkedListingCount:
       typeof r['linkedListingCount'] === 'number' ? (r['linkedListingCount'] as number) : 0,
+    suitableFor: Array.isArray(r['suitableFor'])
+      ? (r['suitableFor'] as unknown[]).filter((v): v is string => typeof v === 'string')
+      : [],
+    whyThisLocation:
+      typeof r['whyThisLocation'] === 'string' ? (r['whyThisLocation'] as string) : null,
   };
 }
 

apps/web/lib/listings-api.ts

@@ -185,6 +185,8 @@ export interface NeighborhoodScoreResult {
 
 const API_BASE_URL = process.env['NEXT_PUBLIC_API_URL'] || 'http://localhost:3001/api/v1';
 
+export interface UpdateListingPayload extends Partial<CreateListingPayload> {}
+
 export const listingsApi = {
   create: (data: CreateListingPayload) =>
     apiClient.post<{ listingId: string; propertyId: string; status: string }>(
@@ -192,6 +194,12 @@ export const listingsApi = {
       data,
     ),
 
+  update: (id: string, data: UpdateListingPayload) =>
+    apiClient.patch<{ listingId: string; propertyId: string; status: string }>(
+      `/listings/${id}`,
+      data,
+    ),
+
   delete: (id: string) =>
     apiClient.delete<{ success: boolean }>(`/listings/${id}`),