feat: add dynamic slug

backend/src/controllers/doctor.controller.js

@@ -189,7 +189,15 @@ export const getDoctorsByDepartmentId = async (req, res) => {
 				doctor: {isActive: true},
 			},
 			include: {
-				doctor: true,
+				doctor: {
+					include: {
+						seo: {
+							select: {
+								slug: true,
+							},
+						},
+					},
+				},
 			},
 			orderBy: {sortOrder: "asc"},
 		});
@@ -200,6 +208,7 @@ export const getDoctorsByDepartmentId = async (req, res) => {
 			image: d.doctor.image ?? "",
 			designation: d.doctor.designation,
 			hierarchyOrder: d.sortOrder,
+			slug: d.doctor.seo?.slug ?? "",
 		}));
 
 		res.status(200).json({
@@ -357,10 +366,8 @@ export const updateDoctor = async (req, res) => {
 			focusKeyphrase,
 			slug,
 			tags,
-			ogImage,
 			specializations,
 		} = req.body;
-
 		if (!doctorId) {
 			return res.status(400).json({
 				success: false,
@@ -429,7 +436,6 @@ export const updateDoctor = async (req, res) => {
 				data: {
 					seoTitle,
 					metaDescription,
-					ogImage,
 					focusKeyphrase,
 					slug: slug ? slug : null,
 					tags: tags || [],
@@ -438,7 +444,6 @@ export const updateDoctor = async (req, res) => {
 		} else {
 			const seo = await prisma.seo.create({
 				data: {
-					ogImage,
 					seoTitle,
 					metaDescription,
 					focusKeyphrase,

frontend/src/components/SeoPreview/SeoPreview.tsx

@@ -1,131 +0,0 @@
-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,7 +28,6 @@ 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";
@@ -61,8 +60,6 @@ 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);
@@ -103,8 +100,6 @@ export default function DoctorPage() {
 		slug: "",
 		tags: [],
 	});
-	const [openOgPreview, setOpenOgPreview] = useState(false);
-	const [previewDoctor, setPreviewDoctor] = useState<any>(null);
 
 	const fetchAll = useCallback(async () => {
 		setLoading(true);
@@ -321,10 +316,7 @@ export default function DoctorPage() {
 		}
 	}
 
-	function handlePreview(doc: any) {
+	console.log("Current form state:", form); // Debug log to check form state
-		setPreviewDoctor(doc);
-		setOpenOgPreview(true);
-	}
 
 	async function handleSubmit() {
 		try {
@@ -340,24 +332,6 @@ 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">
@@ -518,14 +492,6 @@ 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"
@@ -1160,12 +1126,6 @@ export default function DoctorPage() {
 					</DialogFooter>
 				</DialogContent>
 			</Dialog>
-			<SeoPreview
-				open={openOgPreview}
-				onOpenChange={setOpenOgPreview}
-				previewData={previewDoctor}
-				url={getDoctorUrl(previewDoctor)}
-			/>
 		</div>
 	);
 }