fix: og image update

Reviewed-on: #39

backend/src/controllers/doctor.controller.js

@@ -357,8 +357,10 @@ export const updateDoctor = async (req, res) => {
 			focusKeyphrase,
 			slug,
 			tags,
+			ogImage,
 			specializations,
 		} = req.body;
+
 		if (!doctorId) {
 			return res.status(400).json({
 				success: false,
@@ -427,6 +429,7 @@ export const updateDoctor = async (req, res) => {
 				data: {
 					seoTitle,
 					metaDescription,
+					ogImage,
 					focusKeyphrase,
 					slug: slug ? slug : null,
 					tags: tags || [],
@@ -435,6 +438,7 @@ export const updateDoctor = async (req, res) => {
 		} else {
 			const seo = await prisma.seo.create({
 				data: {
+					ogImage,
 					seoTitle,
 					metaDescription,
 					focusKeyphrase,

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";
@@ -60,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);
@@ -100,6 +103,8 @@ export default function DoctorPage() {
 		slug: "",
 		tags: [],
 	});
+	const [openOgPreview, setOpenOgPreview] = useState(false);
+	const [previewDoctor, setPreviewDoctor] = useState<any>(null);
 
 	const fetchAll = useCallback(async () => {
 		setLoading(true);
@@ -316,7 +321,10 @@ export default function DoctorPage() {
 		}
 	}
 
-	console.log("Current form state:", form); // Debug log to check form state
+	function handlePreview(doc: any) {
+		setPreviewDoctor(doc);
+		setOpenOgPreview(true);
+	}
 
 	async function handleSubmit() {
 		try {
@@ -332,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">
@@ -492,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"
@@ -1126,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

@@ -94,8 +94,8 @@ export default function HealthPackagePage() {
 		slug: "",
 		description: "",
 		image: "",
-		price: undefined,
+		price: 0,
-		discountedPrice: undefined,
+		discountedPrice: 0,
 		categoryId: 0,
 		isActive: true,
 		sortOrder: 1000,
@@ -204,8 +204,8 @@ export default function HealthPackagePage() {
 			slug: "",
 			description: "",
 			image: "",
-			price: undefined,
+			price: 0,
-			discountedPrice: undefined,
+			discountedPrice: 0,
 			categoryId: categories[0]?.id || 0,
 			isActive: true,
 			sortOrder: 1000,
@@ -300,16 +300,13 @@ export default function HealthPackagePage() {
 				inclusions: parsedInclusions,
 			};
 
-			finalData.price =
+			if (!finalData.price) {
-				finalData.price !== undefined && finalData.price !== null
+				delete finalData.price;
-					? Number(finalData.price)
+			}
-					: null;
 
-			finalData.discountedPrice =
+			if (!finalData.discountedPrice) {
-				finalData.discountedPrice !== undefined &&
+				delete finalData.discountedPrice;
-				finalData.discountedPrice !== null
+			}
-					? Number(finalData.discountedPrice)
-					: null;
 			if (editingPackage?.id) {
 				const changedFields: Record<string, any> = {};
 				Object.keys(finalData).forEach((key) => {
@@ -330,8 +327,10 @@ export default function HealthPackagePage() {
 				}
 
 				await updateHealthPackageApi(editingPackage.id, changedFields);
+				toast.success("Package updated successfully!");
 			} else {
 				await createHealthPackageApi(finalData);
+				toast.success("Package created successfully!");
 			}
 
 			setPackageModal(false);
@@ -370,8 +369,10 @@ export default function HealthPackagePage() {
 					editingCategory.id,
 					changedFields as Partial<HealthCategory>,
 				);
+				toast.success("Category updated successfully!");
 			} else {
 				await createCategoryApi(catForm as any);
+				toast.success("Category created successfully!");
 			}
 
 			setCategoryModal(false);
@@ -522,15 +523,9 @@ export default function HealthPackagePage() {
 													</TableCell>
 													<TableCell>
 														<div className="font-semibold">
-															{pkg.discountedPrice != null
+															₹{pkg.discountedPrice || pkg.price}
-																? `₹${pkg.discountedPrice}`
-																: pkg.price != null
-																	? `₹${pkg.price}`
-																	: "Not Entered"}
 														</div>
-
+														{pkg.discountedPrice &&
-														{pkg.discountedPrice != null &&
-															pkg.price != null &&
 															pkg.discountedPrice < pkg.price && (
 																<div className="text-xs text-muted-foreground line-through">
 																	₹{pkg.price}
@@ -844,19 +839,14 @@ export default function HealthPackagePage() {
 											<Input
 												type="number"
 												value={pkgForm.price || ""}
-												onChange={(e) => {
+												onChange={(e) =>
-													const value = e.target.value
-														? Number(e.target.value)
-														: undefined;
-
 													setPkgForm({
 														...pkgForm,
-														price: value,
+														price: e.target.value
-														discountedPrice: value
+															? Number(e.target.value)
-															? pkgForm.discountedPrice
 															: undefined,
-													});
+													})
-												}}
+												}
 												className="text-base"
 											/>
 										</div>
@@ -866,7 +856,6 @@ export default function HealthPackagePage() {
 											</Label>
 											<Input
 												type="number"
-												disabled={!pkgForm.price}
 												value={pkgForm.discountedPrice || ""}
 												onChange={(e) =>
 													setPkgForm({
@@ -1076,11 +1065,7 @@ export default function HealthPackagePage() {
 									Pricing
 								</p>
 								<p className="text-xl font-bold">
-									{selectedPackage?.discountedPrice != null
+									₹{selectedPackage?.discountedPrice || selectedPackage?.price}
-										? `₹${selectedPackage.discountedPrice}`
-										: selectedPackage?.price != null
-											? `₹${selectedPackage.price}`
-											: "Not Entered"}
 								</p>
 							</div>
 						</div>