Merge branch 'feat/seo-preview' into feat/healthcheck-seo

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>
 	);
 }