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/api/src/modules/projects/application/commands/create-project/create-project.command.ts

@@ -27,5 +27,7 @@ export class CreateProjectCommand {
     public readonly tags: string[],
     public readonly startDate: Date | null,
     public readonly completionDate: Date | null,
+    public readonly suitableFor: string[] = [],
+    public readonly whyThisLocation: string | null = null,
   ) {}
 }

apps/api/src/modules/projects/application/commands/create-project/create-project.handler.ts

@@ -54,6 +54,8 @@ export class CreateProjectHandler implements ICommandHandler<CreateProjectComman
         media: null,
         documents: null,
         tags: cmd.tags,
+        suitableFor: cmd.suitableFor ?? [],
+        whyThisLocation: cmd.whyThisLocation ?? null,
         isVerified: false,
       },
       now,

apps/api/src/modules/projects/application/commands/update-project/update-project.command.ts

@@ -25,5 +25,7 @@ export class UpdateProjectCommand {
     public readonly isVerified?: boolean,
     public readonly startDate?: Date | null,
     public readonly completionDate?: Date | null,
+    public readonly suitableFor?: string[],
+    public readonly whyThisLocation?: string | null,
   ) {}
 }

apps/api/src/modules/projects/application/commands/update-project/update-project.handler.ts

@@ -40,6 +40,8 @@ export class UpdateProjectHandler implements ICommandHandler<UpdateProjectComman
       ...(cmd.media !== undefined && { media: cmd.media }),
       ...(cmd.documents !== undefined && { documents: cmd.documents }),
       ...(cmd.tags !== undefined && { tags: cmd.tags }),
+      ...(cmd.suitableFor !== undefined && { suitableFor: cmd.suitableFor }),
+      ...(cmd.whyThisLocation !== undefined && { whyThisLocation: cmd.whyThisLocation }),
       ...(cmd.isVerified !== undefined && { isVerified: cmd.isVerified }),
       ...(cmd.startDate !== undefined && { startDate: cmd.startDate }),
       ...(cmd.completionDate !== undefined && { completionDate: cmd.completionDate }),

apps/api/src/modules/projects/domain/entities/project-development.entity.ts

@@ -30,6 +30,8 @@ export interface ProjectDevelopmentProps {
   media: Record<string, unknown>[] | null;
   documents: Record<string, unknown>[] | null;
   tags: string[];
+  suitableFor: string[];
+  whyThisLocation: string | null;
   isVerified: boolean;
 }
 
@@ -62,6 +64,8 @@ export class ProjectDevelopmentEntity extends AggregateRoot<string> {
   private _media: Record<string, unknown>[] | null;
   private _documents: Record<string, unknown>[] | null;
   private _tags: string[];
+  private _suitableFor: string[];
+  private _whyThisLocation: string | null;
   private _isVerified: boolean;
 
   constructor(id: string, props: ProjectDevelopmentProps, createdAt: Date, updatedAt: Date) {
@@ -94,6 +98,8 @@ export class ProjectDevelopmentEntity extends AggregateRoot<string> {
     this._media = props.media;
     this._documents = props.documents;
     this._tags = props.tags;
+    this._suitableFor = props.suitableFor;
+    this._whyThisLocation = props.whyThisLocation;
     this._isVerified = props.isVerified;
   }
 
@@ -125,6 +131,8 @@ export class ProjectDevelopmentEntity extends AggregateRoot<string> {
   get media() { return this._media; }
   get documents() { return this._documents; }
   get tags() { return this._tags; }
+  get suitableFor() { return this._suitableFor; }
+  get whyThisLocation() { return this._whyThisLocation; }
   get isVerified() { return this._isVerified; }
 
   updateDetails(props: Partial<ProjectDevelopmentProps>): void {
@@ -149,6 +157,8 @@ export class ProjectDevelopmentEntity extends AggregateRoot<string> {
     if (props.media !== undefined) this._media = props.media;
     if (props.documents !== undefined) this._documents = props.documents;
     if (props.tags !== undefined) this._tags = props.tags;
+    if (props.suitableFor !== undefined) this._suitableFor = props.suitableFor;
+    if (props.whyThisLocation !== undefined) this._whyThisLocation = props.whyThisLocation;
     if (props.isVerified !== undefined) this._isVerified = props.isVerified;
     this.updatedAt = new Date();
   }

apps/api/src/modules/projects/domain/repositories/project-development.repository.ts

@@ -39,6 +39,8 @@ export interface ProjectListItem {
   maxPrice: bigint | null;
   totalArea: number | null;
   tags: string[];
+  suitableFor: string[];
+  whyThisLocation: string | null;
   isVerified: boolean;
   latitude: number;
   longitude: number;

apps/api/src/modules/projects/infrastructure/repositories/prisma-project-development.repository.ts

@@ -68,7 +68,7 @@ export class PrismaProjectDevelopmentRepository implements IProjectRepository {
         location, address, ward, district, city,
         "minPrice", "maxPrice", "pricePerM2Range", "totalArea",
         "buildingCount", "floorCount", "unitTypes", media, documents,
-        tags, "isVerified", "createdAt", "updatedAt"
+        tags, "suitableFor", "whyThisLocation", "isVerified", "createdAt", "updatedAt"
       ) VALUES (
         ${entity.id}, ${entity.name}, ${entity.slug}, ${entity.developer},
         ${entity.developerLogo}, ${entity.totalUnits}, ${entity.completedUnits},
@@ -86,6 +86,8 @@ export class PrismaProjectDevelopmentRepository implements IProjectRepository {
         ${entity.media ? JSON.stringify(entity.media) : null}::jsonb,
         ${entity.documents ? JSON.stringify(entity.documents) : null}::jsonb,
         ${entity.tags}::text[],
+        ${entity.suitableFor}::text[],
+        ${entity.whyThisLocation},
         ${entity.isVerified}, ${entity.createdAt}, ${entity.updatedAt}
       )
     `;
@@ -114,6 +116,8 @@ export class PrismaProjectDevelopmentRepository implements IProjectRepository {
         media = ${entity.media ? JSON.stringify(entity.media) : null}::jsonb,
         documents = ${entity.documents ? JSON.stringify(entity.documents) : null}::jsonb,
         tags = ${entity.tags}::text[],
+        "suitableFor" = ${entity.suitableFor}::text[],
+        "whyThisLocation" = ${entity.whyThisLocation},
         "isVerified" = ${entity.isVerified},
         "updatedAt" = ${entity.updatedAt}
       WHERE id = ${entity.id}
@@ -216,6 +220,8 @@ export class PrismaProjectDevelopmentRepository implements IProjectRepository {
         media: row.media as Record<string, unknown>[] | null,
         documents: row.documents as Record<string, unknown>[] | null,
         tags: row.tags ?? [],
+        suitableFor: row.suitableFor ?? [],
+        whyThisLocation: row.whyThisLocation,
         isVerified: row.isVerified,
       },
       row.createdAt,
@@ -241,6 +247,8 @@ export class PrismaProjectDevelopmentRepository implements IProjectRepository {
       maxPrice: row.maxPrice,
       totalArea: row.totalArea,
       tags: row.tags ?? [],
+      suitableFor: row.suitableFor ?? [],
+      whyThisLocation: row.whyThisLocation,
       isVerified: row.isVerified,
       latitude: Number(row.lat),
       longitude: Number(row.lng),
@@ -298,6 +306,8 @@ interface RawProject {
   media: Prisma.JsonValue;
   documents: Prisma.JsonValue;
   tags: string[] | null;
+  suitableFor: string[] | null;
+  whyThisLocation: string | null;
   isVerified: boolean;
   createdAt: Date;
   updatedAt: Date;

apps/api/src/modules/projects/presentation/controllers/projects.controller.ts

@@ -131,6 +131,8 @@ export class ProjectsController {
         dto.tags ?? [],
         dto.startDate ? new Date(dto.startDate) : null,
         dto.completionDate ? new Date(dto.completionDate) : null,
+        dto.suitableFor ?? [],
+        dto.whyThisLocation ?? null,
       ),
     );
   }
@@ -170,6 +172,8 @@ export class ProjectsController {
         dto.isVerified,
         dto.startDate !== undefined ? (dto.startDate ? new Date(dto.startDate) : null) : undefined,
         dto.completionDate !== undefined ? (dto.completionDate ? new Date(dto.completionDate) : null) : undefined,
+        dto.suitableFor,
+        dto.whyThisLocation,
       ),
     );
   }

apps/api/src/modules/projects/presentation/dto/create-project.dto.ts

@@ -134,6 +134,24 @@ export class CreateProjectDto {
   @IsString({ each: true })
   tags?: string[];
 
+  @ApiPropertyOptional({
+    example: ['Gia đình trẻ', 'Chuyên gia nước ngoài'],
+    description: 'Các nhóm khách phù hợp với dự án',
+  })
+  @IsOptional()
+  @IsArray()
+  @IsString({ each: true })
+  suitableFor?: string[];
+
+  @ApiPropertyOptional({
+    description: 'Mô tả ngắn vì sao khu vực này phù hợp',
+    maxLength: 2000,
+  })
+  @IsOptional()
+  @IsString()
+  @MaxLength(2000)
+  whyThisLocation?: string;
+
   @ApiPropertyOptional({ example: '2020-06-01', description: 'Ngày khởi công' })
   @IsOptional()
   @IsDateString()

apps/api/src/modules/projects/presentation/dto/update-project.dto.ts

@@ -10,6 +10,7 @@ import {
   IsObject,
   IsBoolean,
   Min,
+  MaxLength,
   IsDateString,
 } from 'class-validator';
 
@@ -44,6 +45,13 @@ export class UpdateProjectDto {
   @ApiPropertyOptional() @IsOptional() @IsArray() media?: Record<string, unknown>[] | null;
   @ApiPropertyOptional() @IsOptional() @IsArray() documents?: Record<string, unknown>[] | null;
   @ApiPropertyOptional() @IsOptional() @IsArray() @IsString({ each: true }) tags?: string[];
+
+  @ApiPropertyOptional({ description: 'Các nhóm khách phù hợp với dự án' })
+  @IsOptional() @IsArray() @IsString({ each: true }) suitableFor?: string[];
+
+  @ApiPropertyOptional({ description: 'Mô tả ngắn vì sao khu vực này phù hợp', maxLength: 2000 })
+  @IsOptional() @IsString() @MaxLength(2000) whyThisLocation?: string | null;
+
   @ApiPropertyOptional() @IsOptional() @IsBoolean() isVerified?: boolean;
   @ApiPropertyOptional() @IsOptional() @IsDateString() startDate?: string | null;
   @ApiPropertyOptional() @IsOptional() @IsDateString() completionDate?: string | null;

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">
+      {saveMsg && (
-        Chức năng chỉnh sửa sẽ được hoàn thiện khi backend API hỗ trợ PATCH /listings/:id.
+        <div
-        Hiện tại bạn có thể xem lại thông tin đã nhập.
+          className={
-      </p>
+            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}>
+      <form onSubmit={handleSubmit(onSubmit)}>
-        <TabsList className="grid w-full grid-cols-2 md:grid-cols-4">
+        <Tabs value={activeTab} onValueChange={setActiveTab}>
-          <TabsTrigger value="basic">Cơ bản</TabsTrigger>
+          <TabsList className="grid w-full grid-cols-2 md:grid-cols-4">
-          <TabsTrigger value="location">Vị trí</TabsTrigger>
+            <TabsTrigger value="basic">Cơ bản</TabsTrigger>
-          <TabsTrigger value="details">Chi tiết</TabsTrigger>
+            <TabsTrigger value="location">Vị trí</TabsTrigger>
-          <TabsTrigger value="pricing">Giá cả</TabsTrigger>
+            <TabsTrigger value="details">Chi tiết</TabsTrigger>
-        </TabsList>
+            <TabsTrigger value="pricing">Giá cả</TabsTrigger>
+          </TabsList>
 
-        <Card className="mt-4">
+          <Card className="mt-4">
-          <CardContent className="pt-6">
+            <CardContent className="pt-6">
-            <TabsContent value="basic">
+              <TabsContent value="basic">
-              <StepBasicInfo register={register} errors={errors} />
+                <StepBasicInfo register={register} errors={errors} />
-            </TabsContent>
+              </TabsContent>
-            <TabsContent value="location">
+              <TabsContent value="location">
-              <StepLocation register={register} errors={errors} />
+                <StepLocation register={register} errors={errors} />
-            </TabsContent>
+              </TabsContent>
-            <TabsContent value="details">
+              <TabsContent value="details">
-              <StepDetails register={register} errors={errors} />
+                <StepDetails register={register} errors={errors} />
-            </TabsContent>
+              </TabsContent>
-            <TabsContent value="pricing">
+              <TabsContent value="pricing">
-              <StepPricing register={register} errors={errors} />
+                <StepPricing register={register} errors={errors} />
-            </TabsContent>
+              </TabsContent>
-          </CardContent>
+            </CardContent>
-        </Card>
+          </Card>
-      </Tabs>
+        </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}`),
 

prisma/migrations/20260419100000_project_rich_content/migration.sql

@@ -0,0 +1,4 @@
+-- AlterTable
+ALTER TABLE "ProjectDevelopment"
+    ADD COLUMN "suitableFor" TEXT[] DEFAULT ARRAY[]::TEXT[],
+    ADD COLUMN "whyThisLocation" TEXT;

prisma/schema.prisma

@@ -197,6 +197,8 @@ model ProjectDevelopment {
   media           Json?
   documents       Json?
   tags            String[]
+  suitableFor     String[]                             @default([])
+  whyThisLocation String?                              @db.Text
   isVerified      Boolean                              @default(false)
   createdAt       DateTime                             @default(now())
   updatedAt       DateTime                             @updatedAt