fix: og image update

Reviewed-on: #39

backend/prisma/migrations/20260520043835_add_seo/migration.sql

@@ -0,0 +1,50 @@
+/*
+  Warnings:
+
+  - A unique constraint covering the columns `[seoId]` on the table `Doctor` will be added. If there are existing duplicate values, this will fail.
+
+*/
+-- AlterTable
+ALTER TABLE "Doctor" ADD COLUMN     "professionalSummary" TEXT,
+ADD COLUMN     "seoId" INTEGER;
+
+-- CreateTable
+CREATE TABLE "DoctorSpecialization" (
+    "id" SERIAL NOT NULL,
+    "name" TEXT NOT NULL,
+    "description" TEXT,
+    "doctorId" INTEGER NOT NULL,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+
+    CONSTRAINT "DoctorSpecialization_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "Seo" (
+    "id" SERIAL NOT NULL,
+    "seoTitle" TEXT,
+    "metaDescription" TEXT,
+    "focusKeyphrase" TEXT,
+    "slug" TEXT,
+    "tags" TEXT[],
+    "ogTitle" TEXT,
+    "ogDescription" TEXT,
+    "ogImage" TEXT,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+
+    CONSTRAINT "Seo_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateIndex
+CREATE UNIQUE INDEX "Seo_slug_key" ON "Seo"("slug");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "Doctor_seoId_key" ON "Doctor"("seoId");
+
+-- AddForeignKey
+ALTER TABLE "Doctor" ADD CONSTRAINT "Doctor_seoId_fkey" FOREIGN KEY ("seoId") REFERENCES "Seo"("id") ON DELETE SET NULL ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "DoctorSpecialization" ADD CONSTRAINT "DoctorSpecialization_doctorId_fkey" FOREIGN KEY ("doctorId") REFERENCES "Doctor"("id") ON DELETE CASCADE ON UPDATE CASCADE;

backend/prisma/migrations/20260520044321_add_exp/migration.sql

@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "Doctor" ADD COLUMN     "experience" INTEGER;

backend/prisma/schema.prisma

@@ -23,11 +23,15 @@ model Doctor {
   name          String
   image         String?
   designation   String?
+  experience       Int?
   workingStatus String?
   qualification String?
   isActive      Boolean  @default(true)
   globalSortOrder Int    @default(1000)
-
+  specializations DoctorSpecialization[]
+  professionalSummary String? @db.Text
+  seoId Int? @unique
+  seo   Seo? @relation(fields: [seoId], references: [id])
   departments  DoctorDepartment[]
   appointments Appointment[]
 
@@ -276,3 +280,32 @@ model HealthPackageInquiry {
   createdAt       DateTime      @default(now())
   updatedAt       DateTime      @updatedAt
 }
+
+
+model DoctorSpecialization {
+  id          Int     @id @default(autoincrement())
+  name        String
+  description String? @db.Text
+  doctorId    Int
+  doctor      Doctor @relation(fields: [doctorId],references: [id],onDelete: Cascade)
+  createdAt   DateTime @default(now())
+  updatedAt   DateTime @updatedAt
+}
+
+model Seo {
+  id                Int      @id @default(autoincrement())
+  doctor              Doctor?
+
+  seoTitle          String?
+  metaDescription   String?   @db.Text
+  focusKeyphrase    String?
+  slug              String?   @unique
+  tags              String[]
+
+  ogTitle           String?
+  ogDescription     String?   @db.Text
+  ogImage           String?
+
+  createdAt         DateTime @default(now())
+  updatedAt         DateTime @updatedAt
+}

backend/src/controllers/doctor.controller.js

@@ -9,12 +9,18 @@ export const getAllDoctors = async (req, res) => {
 		const doctors = await prisma.doctor.findMany({
 			where: admin === "true" ? {} : {isActive: true},
 			include: {
+				seo: true,
 				departments: {
 					include: {
 						department: true,
 						timing: true,
 					},
 				},
+				specializations: {
+					orderBy: {
+						createdAt: "asc",
+					},
+				},
 			},
 			orderBy: [{globalSortOrder: "asc"}, {name: "asc"}],
 		});
@@ -28,7 +34,25 @@ export const getAllDoctors = async (req, res) => {
 			workingStatus: doc.workingStatus,
 			qualification: doc.qualification,
 			isActive: doc.isActive,
+			experience: doc.experience,
+			professionalSummary: doc.professionalSummary,
 			globalSortOrder: doc.globalSortOrder,
+			specializations: doc.specializations.map((item) => ({
+				id: item.id,
+				name: item.name,
+				description: item.description,
+			})),
+			seo: {
+				seoTitle: doc.seo?.seoTitle ?? "",
+				metaDescription: doc.seo?.metaDescription ?? "",
+				focusKeyphrase: doc.seo?.focusKeyphrase ?? "",
+				slug: doc.seo?.slug ?? "",
+				tags: doc.seo?.tags ?? [],
+
+				ogTitle: doc.seo?.ogTitle ?? "",
+				ogDescription: doc.seo?.ogDescription ?? "",
+				ogImage: doc.seo?.ogImage ?? "",
+			},
 			departments: doc.departments.map((d) => {
 				const t = d.timing || {};
 				const timingArray = [
@@ -73,6 +97,8 @@ export const getDoctorByDoctorId = async (req, res) => {
 		const doctor = await prisma.doctor.findUnique({
 			where: {doctorId},
 			include: {
+				seo: true,
+				specializations: true,
 				departments: {
 					include: {
 						department: true,
@@ -96,6 +122,24 @@ export const getDoctorByDoctorId = async (req, res) => {
 			designation: doctor.designation,
 			workingStatus: doctor.workingStatus,
 			qualification: doctor.qualification,
+			experience: doctor.experience,
+			professionalSummary: doctor.professionalSummary,
+			seo: {
+				seoTitle: doctor.seo?.seoTitle ?? "",
+				metaDescription: doctor.seo?.metaDescription ?? "",
+				focusKeyphrase: doctor.seo?.focusKeyphrase ?? "",
+				slug: doctor.seo?.slug ?? "",
+				tags: doctor.seo?.tags ?? [],
+				ogTitle: doctor.seo?.ogTitle ?? "",
+				ogDescription: doctor.seo?.ogDescription ?? "",
+				ogImage: doctor.seo?.ogImage ?? "",
+			},
+			specializations:
+				doctor.specializations?.map((item) => ({
+					id: item.id,
+					name: item.name,
+					description: item.description,
+				})) ?? [],
 			departments: doctor.departments.map((d) => ({
 				departmentId: d.department.departmentId,
 				departmentName: d.department.name,
@@ -184,7 +228,48 @@ export const createDoctor = async (req, res) => {
 			isActive,
 			globalSortOrder,
 			departments,
+			experience,
+			professionalSummary,
+			seoTitle,
+			metaDescription,
+			focusKeyphrase,
+			slug,
+			tags,
+			specializations,
+			ogTitle,
+			ogDescription,
+			ogImage,
 		} = req.body;
+		const messages = [];
+
+		if (!doctorId) messages.push("Doctor ID is required");
+		if (!name?.trim()) messages.push("Doctor name is required");
+		if (!designation?.trim()) messages.push("Designation is required");
+		if (!qualification?.trim()) messages.push("Qualification is required");
+		if (!departments || departments.length === 0) {
+			messages.push("At least one department is required");
+		}
+
+		if (messages.length > 0) {
+			return res.status(400).json({
+				success: false,
+				message: messages.join(", "),
+			});
+		}
+		const seo = await prisma.seo.create({
+			data: {
+				seoTitle,
+				metaDescription,
+				focusKeyphrase,
+				slug: slug ? slug : null,
+				tags: tags || [],
+
+				// Open Graph
+				ogTitle,
+				ogDescription,
+				ogImage,
+			},
+		});
 
 		const doctor = await prisma.doctor.create({
 			data: {
@@ -194,6 +279,9 @@ export const createDoctor = async (req, res) => {
 				designation,
 				workingStatus,
 				qualification,
+				experience: experience ? Number(experience) : null,
+				professionalSummary,
+				seoId: seo.id,
 				isActive: isActive !== undefined ? isActive : true,
 				globalSortOrder:
 					globalSortOrder !== undefined ? Number(globalSortOrder) : 0,
@@ -224,6 +312,17 @@ export const createDoctor = async (req, res) => {
 				});
 			}
 		}
+		if (specializations?.length) {
+			await prisma.doctorSpecialization.createMany({
+				data: specializations
+					.filter((item) => item.name?.trim())
+					.map((item) => ({
+						name: item.name.trim(),
+						description: item.description?.trim() || null,
+						doctorId: doctor.id,
+					})),
+			});
+		}
 
 		res.status(201).json({
 			success: true,
@@ -241,7 +340,7 @@ export const createDoctor = async (req, res) => {
 //update doctors
 export const updateDoctor = async (req, res) => {
 	try {
-		const {doctorId} = req.params;
+		const {doctorId, action} = req.params;
 		const {
 			name,
 			designation,
@@ -251,13 +350,60 @@ export const updateDoctor = async (req, res) => {
 			isActive,
 			globalSortOrder,
 			departments,
+			experience,
+			professionalSummary,
+			seoTitle,
+			metaDescription,
+			focusKeyphrase,
+			slug,
+			tags,
+			ogImage,
+			specializations,
 		} = req.body;
 
+		if (!doctorId) {
+			return res.status(400).json({
+				success: false,
+				message: "Doctor ID is required",
+			});
+		}
 		const doctor = await prisma.doctor.findUnique({where: {doctorId}});
 		if (!doctor)
 			return res
 				.status(404)
 				.json({success: false, message: "Doctor not found"});
+		if (action === "toggleStatus") {
+			await prisma.doctor.update({
+				where: {id: doctor.id},
+				data: {
+					isActive: !doctor.isActive,
+				},
+			});
+
+			return res.status(200).json({
+				success: true,
+				message: `Doctor has been ${
+					doctor.isActive ? "deactivated" : "activated"
+				} successfully`,
+			});
+		}
+
+		const messages = [];
+		if (!doctorId) messages.push("Doctor ID is required");
+		if (!name?.trim()) messages.push("Doctor name is required");
+		if (!qualification?.trim()) messages.push("Qualification is required");
+		if (!designation?.trim()) messages.push("Designation is required");
+
+		if (!departments || departments.length === 0) {
+			messages.push("At least one department is required");
+		}
+
+		if (messages.length > 0) {
+			return res.status(400).json({
+				success: false,
+				message: messages.join(", "),
+			});
+		}
 
 		await prisma.doctor.update({
 			where: {id: doctor.id},
@@ -268,54 +414,131 @@ export const updateDoctor = async (req, res) => {
 				workingStatus,
 				qualification,
 				isActive,
+				experience: experience ? Number(experience) : null,
+				professionalSummary,
 				globalSortOrder:
 					globalSortOrder !== undefined ? Number(globalSortOrder) : undefined,
 			},
 		});
 
-		const hasTimingData = departments?.some(
-			(dep) => dep.timing && Object.keys(dep.timing).length > 0,
-		);
-
-		if (departments && Array.isArray(departments) && hasTimingData) {
-			const oldRelations = await prisma.doctorDepartment.findMany({
-				where: {doctorId: doctor.id},
+		if (doctor.seoId) {
+			await prisma.seo.update({
+				where: {
+					id: doctor.seoId,
+				},
+				data: {
+					seoTitle,
+					metaDescription,
+					ogImage,
+					focusKeyphrase,
+					slug: slug ? slug : null,
+					tags: tags || [],
+				},
+			});
+		} else {
+			const seo = await prisma.seo.create({
+				data: {
+					ogImage,
+					seoTitle,
+					metaDescription,
+					focusKeyphrase,
+					slug: slug ? slug : null,
+					tags: tags || [],
+				},
 			});
 
-			for (const rel of oldRelations) {
-				await prisma.doctorTiming.deleteMany({
-					where: {doctorDepartmentId: rel.id},
+			await prisma.doctor.update({
+				where: {
+					id: doctor.id,
+				},
+				data: {
+					seoId: seo.id,
+				},
 			});
 		}
 
+		// Update Departments & Timings
+		if (Array.isArray(departments)) {
+			const oldRelations = await prisma.doctorDepartment.findMany({
+				where: {
+					doctorId: doctor.id,
+				},
+				include: {
+					timing: true,
+				},
+			});
+
+			// Delete old timings
+			for (const rel of oldRelations) {
+				if (rel.timing) {
+					await prisma.doctorTiming.deleteMany({
+						where: {
+							doctorDepartmentId: rel.id,
+						},
+					});
+				}
+			}
+
+			// Delete old departments
 			await prisma.doctorDepartment.deleteMany({
-				where: {doctorId: doctor.id},
+				where: {
+					doctorId: doctor.id,
+				},
 			});
 
+			// Recreate departments + timings
 			for (const dep of departments) {
-				const targetDept = await prisma.department.findUnique({
-					where: {departmentId: dep.departmentId},
+				const department = await prisma.department.findUnique({
+					where: {
+						departmentId: dep.departmentId,
+					},
 				});
-				if (!targetDept) continue;
 
-				const newDD = await prisma.doctorDepartment.create({
+				if (!department) continue;
+
+				const doctorDepartment = await prisma.doctorDepartment.create({
 					data: {
 						doctorId: doctor.id,
-						departmentId: targetDept.id,
+						departmentId: department.id,
 						sortOrder: dep.sortOrder !== undefined ? Number(dep.sortOrder) : 0,
 					},
 				});
 
-				if (dep.timing) {
+				if (dep.timing && Object.keys(dep.timing).length > 0) {
 					const {id, doctorDepartmentId, createdAt, updatedAt, ...cleanTiming} =
 						dep.timing;
+
 					await prisma.doctorTiming.create({
-						data: {doctorDepartmentId: newDD.id, ...cleanTiming},
+						data: {
+							doctorDepartmentId: doctorDepartment.id,
+							...cleanTiming,
+						},
 					});
 				}
 			}
 		}
 
+		// Update Specializations
+		if (Array.isArray(specializations)) {
+			await prisma.doctorSpecialization.deleteMany({
+				where: {
+					doctorId: doctor.id,
+				},
+			});
+
+			if (specializations.length) {
+				await prisma.doctorSpecialization.createMany({
+					data: specializations
+						.filter((item) => item.name?.trim())
+						.map((item) => ({
+							name: item.name.trim(),
+							description: item.description?.trim() || null,
+							doctorId: doctor.id,
+						})),
+				});
+			}
+		}
+
 		res
 			.status(200)
 			.json({success: true, message: "Doctor updated successfully"});

backend/src/routes/doctor.routes.js

@@ -21,7 +21,7 @@ router.get("/getTimings/:doctorId", getDoctorTimingById);
 router.get("/:doctorId", getDoctorByDoctorId);
 
 router.post("/", jwtAuthMiddleware, createDoctor);
-router.patch("/:doctorId", jwtAuthMiddleware, updateDoctor);
+router.patch("/:doctorId/:action", jwtAuthMiddleware, updateDoctor);
 router.delete("/:doctorId", jwtAuthMiddleware, deleteDoctor);
 
 export default router;

docker/entrypoint.sh

@@ -4,10 +4,8 @@ set -e  # Exit immediately if a command exits with a non-zero status
 echo "Generating Prisma Client..."
 npx prisma generate
 
-# echo "Running migrate..."
-# npx prisma migrate deploy
-echo "Running PUSH..."
-npx prisma db push
+echo "Running migrate..."
+npx prisma migrate deploy
 
 echo "Executing command: $@"
 exec "$@"

frontend/src/api/doctor.ts

@@ -53,9 +53,10 @@ export const createDoctorApi = async (data: Doctor) => {
 export const updateDoctorApi = async (
 	doctorId: string,
 	data: Partial<Doctor>,
+	action: "toggleStatus" | "updateDetails" = "updateDetails",
 ) => {
 	try {
-		const res = await apiClient.patch(`/doctors/${doctorId}`, data);
+		const res = await apiClient.patch(`/doctors/${doctorId}/${action}`, data);
 
 		toast.success("Doctor updated successfully");
 

frontend/src/api/healthCheck.ts

@@ -6,7 +6,7 @@ export interface HealthPackage {
 	name: string;
 	slug: string;
 	description?: string;
-	price: number;
+	price?: number;
 	image?: string;
 	discountedPrice?: number;
 	inclusions: Record<string, string[]>;

frontend/src/components/BytescaleUploader/BytescaleUploader.tsx

@@ -11,7 +11,8 @@ interface BytescaleUploaderProps {
 		| "/departments"
 		| "/news"
 		| "/blog"
-		| "/health-packages";
+		| "/health-packages"
+		| "/doctor-og";
 }
 
 export function BytescaleUploader({

frontend/src/components/SeoPreview/SeoPreview.tsx

@@ -0,0 +1,131 @@
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+
+interface SeoPreviewData {
+  seo?: {
+    ogImage?: string;
+    ogTitle?: string;
+    seoTitle?: string;
+    ogDescription?: string;
+    metaDescription?: string;
+    slug?: string;
+  };
+  doctorId?: string;
+  name?: string;
+}
+
+interface SeoPreviewProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  previewData?: SeoPreviewData | null;
+  url?: string;
+  title?: string;
+}
+
+export default function SeoPreview({
+  open,
+  onOpenChange,
+  previewData,
+  url,
+  title = "SEO Preview",
+}: SeoPreviewProps) {
+  const previewUrl = url || "#";
+  const imageUrl =
+    previewData?.seo?.ogImage || "https://placehold.co/1200x630?text=GG+Hospital";
+  const ogTitle =
+    previewData?.seo?.ogTitle || previewData?.seo?.seoTitle || "GG Hospital";
+  const ogDescription =
+    previewData?.seo?.ogDescription || previewData?.seo?.metaDescription ||
+    "No description available";
+  const searchTitle =
+    previewData?.seo?.seoTitle || previewData?.seo?.ogTitle || "SEO title preview";
+  const searchDescription =
+    previewData?.seo?.metaDescription || previewData?.seo?.ogDescription ||
+    "No meta description available";
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:!max-w-4xl overflow-hidden">
+        <DialogHeader>
+          <DialogTitle className="text-xl">{title}</DialogTitle>
+        </DialogHeader>
+
+        {previewData ? (
+          <div className="space-y-10 py-2">
+            <div>
+              <p className="mb-4 text-sm font-semibold text-muted-foreground">
+                Social Media Preview (WhatsApp / Facebook)
+              </p>
+
+              <a
+                href={previewUrl}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="block max-w-[560px] overflow-hidden rounded-xl border bg-white shadow-sm transition hover:shadow-md"
+              >
+                <div className="aspect-[1.91/1] overflow-hidden bg-muted">
+                  <img
+                    src={imageUrl}
+                    alt="OG Preview"
+                    className="h-full w-full object-cover"
+                  />
+                </div>
+
+                <div className="border-t bg-[#f0f2f5] px-4 py-3">
+                  <p className="truncate text-[11px] uppercase tracking-wide text-[#65676b]">
+                    gg-hospital.com
+                  </p>
+
+                  <h3 className="mt-1 line-clamp-2 text-[18px] font-semibold leading-snug text-[#1c1e21]">
+                    {ogTitle}
+                  </h3>
+
+                  <p className="mt-1 line-clamp-2 text-[14px] text-[#65676b]">
+                    {ogDescription}
+                  </p>
+                </div>
+              </a>
+            </div>
+
+            <div>
+              <p className="mb-4 text-sm font-semibold text-muted-foreground">
+                Google Search Preview
+              </p>
+
+              <div className="rounded-xl border bg-white p-6">
+                <a
+                  href={previewUrl}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="block"
+                >
+                  <p className="truncate text-[14px] text-[#202124] hover:underline">
+                    {previewUrl}
+                  </p>
+
+                  <h3 className="mt-1 text-[22px] leading-tight text-[#1a0dab] hover:underline">
+                    {searchTitle}
+                  </h3>
+                </a>
+
+                <p className="mt-2 line-clamp-3 text-[14px] leading-6 text-[#4d5156]">
+                  {searchDescription}
+                </p>
+              </div>
+            </div>
+          </div>
+        ) : (
+          <div className="p-6 text-sm text-muted-foreground">
+            No preview data available.
+          </div>
+        )}
+
+        <DialogFooter className="p-6 border-t bg-background z-10 mt-0">
+          <Button variant="outline" onClick={() => onOpenChange(false)}>
+            Close
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

frontend/src/pages/Doctor.tsx

@@ -1,6 +1,6 @@
 import { useState, useEffect, useCallback } from "react";
 import { AxiosError } from "axios";
-
+import { Eye } from "lucide-react";
 import { BytescaleUploader } from "@/components/BytescaleUploader/BytescaleUploader";
 
 import {
@@ -28,6 +28,7 @@ import {
 	DialogTitle,
 	DialogFooter,
 } from "@/components/ui/dialog";
+import SeoPreview from "@/components/SeoPreview/SeoPreview";
 import { Input } from "@/components/ui/input";
 import { Badge } from "@/components/ui/badge";
 import { Switch } from "@/components/ui/switch";
@@ -41,6 +42,7 @@ import {
 	ChevronLeft,
 	ChevronRight,
 } from "lucide-react";
+import { Textarea } from "@/components/ui/textarea";
 
 interface Department {
 	departmentId: string;
@@ -59,6 +61,8 @@ const DAYS = [
 ];
 
 export default function DoctorPage() {
+	const WEBSITE_URL = import.meta.env.VITE_WEBSITE_URL;
+
 	const [doctors, setDoctors] = useState<any[]>([]);
 	const [departments, setDepartments] = useState<Department[]>([]);
 	const [loading, setLoading] = useState(true);
@@ -83,7 +87,24 @@ export default function DoctorPage() {
 		isActive: true,
 		globalSortOrder: 0,
 		departments: [],
+		professionalSummary: "",
+		seoTitle: "",
+		metaDescription: "",
+		ogTitle: "",
+		ogDescription: "",
+		ogImage: "",
+		specializations: [
+			{
+				name: "",
+				description: "",
+			},
+		],
+		focusKeyphrase: "",
+		slug: "",
+		tags: [],
 	});
+	const [openOgPreview, setOpenOgPreview] = useState(false);
+	const [previewDoctor, setPreviewDoctor] = useState<any>(null);
 
 	const fetchAll = useCallback(async () => {
 		setLoading(true);
@@ -151,8 +172,16 @@ export default function DoctorPage() {
 	const currentItems = filteredDoctors.slice(indexOfFirstItem, indexOfLastItem);
 
 	function handleChange(e: any) {
-		const value =
+		let value =
 			e.target.type === "number" ? Number(e.target.value) : e.target.value;
+		if (e.target.name === "slug") {
+			value = value
+				.toLowerCase()
+				.replace(/\s+/g, "-") // replace spaces with -
+				.replace(/[^\w-]+/g, "") // remove special chars
+				.replace(/--+/g, "-"); // remove duplicate -
+		}
+
 		setForm({ ...form, [e.target.name]: value });
 	}
 
@@ -164,7 +193,7 @@ export default function DoctorPage() {
 				isActive: newStatus,
 			};
 
-			await updateDoctorApi(doc.doctorId, payload);
+			await updateDoctorApi(doc.doctorId, payload, "toggleStatus");
 
 			fetchAll();
 		} catch (err) {
@@ -221,9 +250,25 @@ export default function DoctorPage() {
 			designation: "",
 			workingStatus: "",
 			qualification: "",
+			experience: "",
+			professionalSummary: "",
 			isActive: true,
 			globalSortOrder: 0,
+			specializations: [
+				{
+					name: "",
+					description: "",
+				},
+			],
 			departments: [],
+			seoTitle: "",
+			metaDescription: "",
+			focusKeyphrase: "",
+			slug: "",
+			tags: [],
+			ogTitle: "",
+			ogDescription: "",
+			ogImage: "",
 		});
 		setOpenModal(true);
 	}
@@ -243,6 +288,27 @@ export default function DoctorPage() {
 				qualification: doc.qualification,
 				isActive: doc.isActive ?? true,
 				globalSortOrder: doc.globalSortOrder ?? 0,
+				experience: doc.experience || "",
+				professionalSummary: doc.professionalSummary || "",
+				seoTitle: doc.seo?.seoTitle || "",
+				metaDescription: doc.seo?.metaDescription || "",
+				focusKeyphrase: doc.seo?.focusKeyphrase || "",
+				slug: doc.seo?.slug || "",
+				tags: doc.seo?.tags || [],
+				ogTitle: doc.seo?.ogTitle || "",
+				ogDescription: doc.seo?.ogDescription || "",
+				ogImage: doc.seo?.ogImage || "",
+				specializations: doc.specializations?.length
+					? doc.specializations.map((item: any) => ({
+							name: item.name || "",
+							description: item.description || "",
+						}))
+					: [
+							{
+								name: "",
+								description: "",
+							},
+						],
 				departments: timingData.map((d: any) => ({
 					departmentId: d.departmentId,
 					sortOrder: d.deptSortOrder ?? 0,
@@ -255,6 +321,11 @@ export default function DoctorPage() {
 		}
 	}
 
+	function handlePreview(doc: any) {
+		setPreviewDoctor(doc);
+		setOpenOgPreview(true);
+	}
+
 	async function handleSubmit() {
 		try {
 			if (editing) {
@@ -269,6 +340,24 @@ export default function DoctorPage() {
 		}
 	}
 
+	const createSlug = (text: string) => {
+		if (!text) return "";
+
+		return text
+			.toString()
+			.toLowerCase()
+			.trim()
+			.replace(/\s+/g, "-")
+			.replace(/[^\w-]+/g, "")
+			.replace(/--+/g, "-");
+	};
+
+	const getDoctorUrl = (doctor: any) => {
+		const slug = doctor?.seo?.slug || createSlug(doctor?.name);
+
+		return `${WEBSITE_URL}/${doctor?.doctorId}/${slug}`;
+	};
+
 	return (
 		<div className="p-6 space-y-6">
 			<div className="flex flex-col md:flex-row md:justify-between md:items-center gap-4">
@@ -429,6 +518,14 @@ export default function DoctorPage() {
 
 											<TableCell className="text-right">
 												<div className="flex justify-end gap-2">
+													<Button
+														size="icon"
+														variant="ghost"
+														className="h-9 w-9"
+														onClick={() => handlePreview(doc)}
+													>
+														<Eye className="h-4 w-4" />
+													</Button>
 													<Button
 														size="icon"
 														variant="ghost"
@@ -594,6 +691,24 @@ export default function DoctorPage() {
 											className="text-base"
 										/>
 									</div>
+									<div className="space-y-1">
+										<label className="text-sm font-semibold">
+											Brief Professional Summary
+										</label>
+
+										<Textarea
+											name="professionalSummary"
+											placeholder="Write a brief professional summary about the doctor..."
+											value={form.professionalSummary || ""}
+											onChange={(e) =>
+												setForm({
+													...form,
+													professionalSummary: e.target.value,
+												})
+											}
+											className="min-h-[120px] text-base"
+										/>
+									</div>
 									<div className="space-y-1">
 										<label className="text-sm font-semibold">
 											Qualification
@@ -606,6 +721,25 @@ export default function DoctorPage() {
 											className="text-base"
 										/>
 									</div>
+									<div className="space-y-1">
+										<label className="text-sm font-semibold">
+											Years of Experience
+										</label>
+
+										<Input
+											name="experience"
+											type="number"
+											min={0}
+											placeholder="e.g. 15"
+											value={form.experience || ""}
+											onChange={handleChange}
+											className="text-base"
+										/>
+
+										<p className="text-xs text-muted-foreground">
+											Enter total years of professional experience
+										</p>
+									</div>
 								</div>
 
 								<div className="p-5 border rounded-md bg-muted/20">
@@ -632,6 +766,314 @@ export default function DoctorPage() {
 										})}
 									</div>
 								</div>
+								<div className="space-y-4 p-5 border rounded-md bg-muted/20">
+									<div className="flex items-center justify-between">
+										<p className="text-base font-bold">Specializations</p>
+
+										<Button
+											type="button"
+											variant="outline"
+											size="sm"
+											onClick={() =>
+												setForm({
+													...form,
+													specializations: [
+														...(form.specializations || []),
+														{
+															name: "",
+															description: "",
+														},
+													],
+												})
+											}
+										>
+											+ Add
+										</Button>
+									</div>
+
+									{form.specializations?.length === 0 ? (
+										<p className="text-sm text-muted-foreground italic">
+											No specializations added
+										</p>
+									) : (
+										<div className="space-y-4">
+											{form.specializations?.map(
+												(specialization: any, index: number) => (
+													<div
+														key={index}
+														className="border rounded-lg p-4 space-y-3 bg-background"
+													>
+														<div className="flex items-center justify-between">
+															<p className="font-medium text-sm">
+																Specialization {index + 1}
+															</p>
+
+															<Button
+																type="button"
+																variant="ghost"
+																size="sm"
+																onClick={() => {
+																	const updated = form.specializations.filter(
+																		(_: any, i: number) => i !== index,
+																	);
+
+																	setForm({
+																		...form,
+																		specializations: updated,
+																	});
+																}}
+															>
+																Remove
+															</Button>
+														</div>
+
+														<div className="space-y-2">
+															<Label>Name</Label>
+															<Input
+																placeholder="e.g. Cardiology"
+																value={specialization.name}
+																onChange={(e) => {
+																	const updated = [...form.specializations];
+
+																	updated[index].name = e.target.value;
+
+																	setForm({
+																		...form,
+																		specializations: updated,
+																	});
+																}}
+															/>
+														</div>
+
+														<div className="space-y-2">
+															<Label>Doctor-specific Description</Label>
+
+															<Textarea
+																placeholder="Describe how this doctor specializes in this area..."
+																value={specialization.description}
+																onChange={(e) => {
+																	const updated = [...form.specializations];
+
+																	updated[index].description = e.target.value;
+
+																	setForm({
+																		...form,
+																		specializations: updated,
+																	});
+																}}
+															/>
+														</div>
+													</div>
+												),
+											)}
+										</div>
+									)}
+								</div>
+
+								<div className="space-y-4 p-5 border rounded-md bg-muted/20">
+									<div className="flex items-center justify-between">
+										<p className="text-base font-bold">SEO Settings</p>
+
+										<Badge variant="secondary">Optional</Badge>
+									</div>
+
+									<div className="space-y-2">
+										<Label className="text-sm font-semibold">SEO Title</Label>
+
+										<Input
+											name="seoTitle"
+											placeholder="Best Cardiologist in Kochi | Dr John Doe"
+											value={form.seoTitle || ""}
+											onChange={handleChange}
+											className="text-base"
+										/>
+
+										<p className="text-xs text-muted-foreground">
+											Title shown in Google search results
+										</p>
+									</div>
+
+									<div className="space-y-2">
+										<Label className="text-sm font-semibold">
+											Meta Description
+										</Label>
+
+										<Textarea
+											name="metaDescription"
+											placeholder="Short description shown in Google search..."
+											value={form.metaDescription || ""}
+											onChange={(e) =>
+												setForm({
+													...form,
+													metaDescription: e.target.value,
+												})
+											}
+											className="min-h-[100px] text-base"
+										/>
+
+										<p className="text-xs text-muted-foreground">
+											Recommended: 150–160 characters
+										</p>
+									</div>
+									<div className="border-t pt-5 space-y-4">
+										<div className="flex items-center justify-between">
+											<p className="text-base font-bold">
+												Open Graph (Social Preview)
+											</p>
+
+											<Badge variant="secondary">Optional</Badge>
+										</div>
+
+										<div className="space-y-2">
+											<Label className="text-sm font-semibold">OG Title</Label>
+
+											<Input
+												name="ogTitle"
+												placeholder="Title for WhatsApp / Facebook sharing"
+												value={form.ogTitle || ""}
+												onChange={handleChange}
+												className="text-base"
+											/>
+
+											<p className="text-xs text-muted-foreground">
+												If empty, SEO title will be used
+											</p>
+										</div>
+
+										<div className="space-y-2">
+											<Label className="text-sm font-semibold">
+												OG Description
+											</Label>
+
+											<Textarea
+												name="ogDescription"
+												placeholder="Description for social sharing..."
+												value={form.ogDescription || ""}
+												onChange={(e) =>
+													setForm({
+														...form,
+														ogDescription: e.target.value,
+													})
+												}
+												className="min-h-[100px] text-base"
+											/>
+
+											<p className="text-xs text-muted-foreground">
+												If empty, meta description will be used
+											</p>
+										</div>
+
+										<div className="space-y-2">
+											<Label className="text-sm font-semibold">OG Image</Label>
+
+											<BytescaleUploader
+												value={form.ogImage}
+												folderPath="/doctor-og"
+												onChange={(url) =>
+													setForm({
+														...form,
+														ogImage: url,
+													})
+												}
+											/>
+										</div>
+									</div>
+
+									<div className="space-y-2">
+										<Label className="text-sm font-semibold">
+											Focus Keyphrase
+										</Label>
+
+										<Input
+											name="focusKeyphrase"
+											placeholder="best cardiologist in kochi"
+											value={form.focusKeyphrase || ""}
+											onChange={handleChange}
+											className="text-base"
+										/>
+
+										<p className="text-xs text-muted-foreground">
+											Main keyword people may search in Google
+										</p>
+									</div>
+
+									<div className="space-y-2">
+										<Label className="text-sm font-semibold">URL Slug</Label>
+
+										<Input
+											name="slug"
+											placeholder="dr-john-doe"
+											value={form.slug || ""}
+											onChange={handleChange}
+											className="text-base"
+										/>
+
+										<p className="text-xs text-muted-foreground">
+											URL:
+											<span className="font-medium">
+												{" "}
+												/doctors/
+												{form.slug || "doctor-slug"}
+											</span>
+										</p>
+									</div>
+
+									<div className="space-y-2">
+										<Label className="text-sm font-semibold">
+											Tags / Keywords
+										</Label>
+
+										<div className="flex flex-wrap gap-2 border rounded-md p-3 min-h-[48px] bg-background">
+											{form.tags?.map((tag: string, index: number) => (
+												<div
+													key={index}
+													className="bg-primary/10 text-primary px-3 py-1 rounded-full text-sm flex items-center gap-2"
+												>
+													{tag}
+
+													<button
+														type="button"
+														onClick={() => {
+															const updated = form.tags.filter(
+																(_: string, i: number) => i !== index,
+															);
+
+															setForm({
+																...form,
+																tags: updated,
+															});
+														}}
+													>
+														×
+													</button>
+												</div>
+											))}
+
+											<Input
+												placeholder="Type keyword and press Enter"
+												className="border-0 shadow-none focus-visible:ring-0 min-w-[220px]"
+												onKeyDown={(e) => {
+													if (
+														e.key === "Enter" &&
+														e.currentTarget.value.trim()
+													) {
+														e.preventDefault();
+
+														setForm({
+															...form,
+															tags: [
+																...(form.tags || []),
+																e.currentTarget.value.trim(),
+															],
+														});
+
+														e.currentTarget.value = "";
+													}
+												}}
+											/>
+										</div>
+									</div>
+								</div>
 							</div>
 
 							<div className="space-y-6">
@@ -718,6 +1160,12 @@ export default function DoctorPage() {
 					</DialogFooter>
 				</DialogContent>
 			</Dialog>
+			<SeoPreview
+				open={openOgPreview}
+				onOpenChange={setOpenOgPreview}
+				previewData={previewDoctor}
+				url={getDoctorUrl(previewDoctor)}
+			/>
 		</div>
 	);
 }

frontend/src/pages/HealthPackagePage.tsx

@@ -270,10 +270,6 @@ export default function HealthPackagePage() {
 		if (!pkgForm.slug?.trim()) return toast.error("URL Slug is required.");
 		if (!pkgForm.categoryId)
 			return toast.error("Please select a valid category.");
-		if (pkgForm.price === undefined || pkgForm.price <= 0)
-			return toast.error(
-				"Regular Price must be a valid amount greater than 0.",
-			);
 		if (!pkgForm.description?.trim())
 			return toast.error("Description is required.");
 
@@ -299,8 +295,18 @@ export default function HealthPackagePage() {
 				}
 			});
 
-			const finalData = { ...pkgForm, inclusions: parsedInclusions };
+			const finalData: Partial<HealthPackage> = {
+				...pkgForm,
+				inclusions: parsedInclusions,
+			};
 
+			if (!finalData.price) {
+				delete finalData.price;
+			}
+
+			if (!finalData.discountedPrice) {
+				delete finalData.discountedPrice;
+			}
 			if (editingPackage?.id) {
 				const changedFields: Record<string, any> = {};
 				Object.keys(finalData).forEach((key) => {
@@ -836,7 +842,9 @@ export default function HealthPackagePage() {
 												onChange={(e) =>
 													setPkgForm({
 														...pkgForm,
-														price: Number(e.target.value),
+														price: e.target.value
+															? Number(e.target.value)
+															: undefined,
 													})
 												}
 												className="text-base"
@@ -852,7 +860,9 @@ export default function HealthPackagePage() {
 												onChange={(e) =>
 													setPkgForm({
 														...pkgForm,
-														discountedPrice: Number(e.target.value),
+														discountedPrice: e.target.value
+															? Number(e.target.value)
+															: undefined,
 													})
 												}
 												className="text-base"