chore: remove console logs

backend/prisma/migrations/20260525122431_health_check_seo/migration.sql

@@ -1,14 +0,0 @@
-/*
-  Warnings:
-
-  - A unique constraint covering the columns `[seoId]` on the table `HealthPackage` will be added. If there are existing duplicate values, this will fail.
-
-*/
--- AlterTable
-ALTER TABLE "HealthPackage" ADD COLUMN     "seoId" INTEGER;
-
--- CreateIndex
-CREATE UNIQUE INDEX "HealthPackage_seoId_key" ON "HealthPackage"("seoId");
-
--- AddForeignKey
-ALTER TABLE "HealthPackage" ADD CONSTRAINT "HealthPackage_seoId_fkey" FOREIGN KEY ("seoId") REFERENCES "Seo"("id") ON DELETE SET NULL ON UPDATE CASCADE;

backend/prisma/schema.prisma

@@ -259,9 +259,6 @@ model HealthPackage {
   
   inquiries    HealthPackageInquiry[]
 
-  seoId            Int?                @unique
-  seo              Seo?                @relation(fields: [seoId], references: [id])
-
   createdAt    DateTime            @default(now())
   updatedAt    DateTime            @updatedAt
 }
@@ -297,9 +294,7 @@ model DoctorSpecialization {
 
 model Seo {
   id                Int      @id @default(autoincrement())
-  doctor            Doctor?
+  doctor              Doctor?
-  healthPackage     HealthPackage?
-
 
   seoTitle          String?
   metaDescription   String?   @db.Text

backend/src/controllers/doctor.controller.js

@@ -189,15 +189,7 @@ export const getDoctorsByDepartmentId = async (req, res) => {
 				doctor: {isActive: true},
 			},
 			include: {
-				doctor: {
+				doctor: true,
-					include: {
-						seo: {
-							select: {
-								slug: true,
-							},
-						},
-					},
-				},
 			},
 			orderBy: {sortOrder: "asc"},
 		});
@@ -208,7 +200,6 @@ 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({
@@ -363,8 +354,6 @@ export const updateDoctor = async (req, res) => {
 			professionalSummary,
 			seoTitle,
 			metaDescription,
-			ogTitle,
-			ogDescription,
 			focusKeyphrase,
 			slug,
 			tags,
@@ -440,8 +429,6 @@ export const updateDoctor = async (req, res) => {
 				data: {
 					seoTitle,
 					metaDescription,
-					ogTitle,
-					ogDescription,
 					ogImage,
 					focusKeyphrase,
 					slug: slug ? slug : null,
@@ -452,10 +439,8 @@ export const updateDoctor = async (req, res) => {
 			const seo = await prisma.seo.create({
 				data: {
 					ogImage,
-					metaDescription,
 					seoTitle,
-					ogDescription,
+					metaDescription,
-					ogTitle,
 					focusKeyphrase,
 					slug: slug ? slug : null,
 					tags: tags || [],

backend/src/controllers/healthCheck.controller.js

@@ -121,10 +121,7 @@ export const getAllPackages = async (req, res) => {
 					categorySlug ? { category: { slug: categorySlug } } : {},
 				],
 			},
-			include: {
+			include: { category: true },
-				category: true,
-				seo: true,
-			},
 			orderBy: [{ sortOrder: "asc" }, { createdAt: "desc" }],
 		});
 
@@ -151,7 +148,6 @@ export const createPackage = async (req, res) => {
 			isActive,
 			isFeatured,
 			sortOrder,
-			seo,
 		} = req.body;
 
 		const healthPackage = await prisma.healthPackage.create({
@@ -167,25 +163,6 @@ export const createPackage = async (req, res) => {
 				isActive: isActive ?? true,
 				isFeatured: isFeatured ?? false,
 				sortOrder: sortOrder ? Number(sortOrder) : 1000,
-
-				...(seo && {
-					seo: {
-						create: {
-							seoTitle: seo.seoTitle,
-							metaDescription: seo.metaDescription,
-							focusKeyphrase: seo.focusKeyphrase,
-							slug: slug,
-							tags: seo.tags || [],
-							ogTitle: seo.ogTitle,
-							ogDescription: seo.ogDescription,
-							ogImage: seo.ogImage,
-						},
-					},
-				}),
-			},
-			include: {
-				category: true,
-				seo: true,
 			},
 		});
 
@@ -206,58 +183,13 @@ export const updatePackage = async (req, res) => {
 		const data = { ...req.body };
 		delete data.id;
 		delete data.category;
-		delete data.createdAt;
-		delete data.updatedAt;
-		delete data.seoId;
 
 		if (data.categoryId) data.categoryId = Number(data.categoryId);
 		if (data.sortOrder) data.sortOrder = Number(data.sortOrder);
 
-		const existingPackage = await prisma.healthPackage.findUnique({
-			where: { id: Number(id) },
-			select: { slug: true },
-		});
-		const seoSlug = data.slug || existingPackage.slug;
-
 		const updated = await prisma.healthPackage.update({
 			where: { id: Number(id) },
-
+			data,
-			data: {
-				...data,
-
-				seo: data.seo
-					? {
-							upsert: {
-								create: {
-									seoTitle: data.seo.seoTitle,
-									metaDescription: data.seo.metaDescription,
-									focusKeyphrase: data.seo.focusKeyphrase,
-									slug: seoSlug,
-									tags: data.seo.tags || [],
-									ogTitle: data.seo.ogTitle,
-									ogDescription: data.seo.ogDescription,
-									ogImage: data.seo.ogImage,
-								},
-
-								update: {
-									seoTitle: data.seo.seoTitle,
-									metaDescription: data.seo.metaDescription,
-									focusKeyphrase: data.seo.focusKeyphrase,
-									slug: seoSlug,
-									tags: data.seo.tags || [],
-									ogTitle: data.seo.ogTitle,
-									ogDescription: data.seo.ogDescription,
-									ogImage: data.seo.ogImage,
-								},
-							},
-						}
-					: undefined,
-			},
-
-			include: {
-				category: true,
-				seo: true,
-			},
 		});
 
 		return res
@@ -272,21 +204,11 @@ export const updatePackage = async (req, res) => {
 export const deletePackage = async (req, res) => {
 	try {
 		const { id } = req.params;
-
+		await prisma.healthPackage.delete({ where: { id: Number(id) } });
-		await prisma.healthPackage.delete({
+		return res.status(200).json({ success: true, message: "Package deleted" });
-			where: { id: Number(id) },
-		});
-
-		return res.status(200).json({
-			success: true,
-			message: "Package deleted",
-		});
 	} catch (error) {
 		console.error(error);
-		return res.status(500).json({
+		return res.status(500).json({ success: false, message: "Delete failed" });
-			success: false,
-			message: "Delete failed",
-		});
 	}
 };
 
@@ -441,11 +363,7 @@ export const getPackageBySlug = async (req, res) => {
 		const { slug } = req.params;
 		const healthPackage = await prisma.healthPackage.findFirst({
 			where: { slug, isActive: true },
-
+			include: { category: true },
-			include: {
-				category: true,
-				seo: true,
-			},
 		});
 
 		if (!healthPackage) {
@@ -454,10 +372,7 @@ export const getPackageBySlug = async (req, res) => {
 				.json({ success: false, message: "Package not found" });
 		}
 
-		return res.status(200).json({
+		return res.status(200).json({ success: true, data: healthPackage });
-			success: true,
-			data: healthPackage,
-		});
 	} catch (error) {
 		console.error(error);
 		return res
@@ -499,9 +414,7 @@ export const getAllInquiries = async (req, res) => {
 				take: queryLimit,
 				include: {
 					healthPackage: {
-						include: {
+						include: { category: true },
-							category: true,
-						},
 					},
 				},
 				orderBy: { createdAt: "desc" },

frontend/src/api/healthCheck.ts

@@ -1,15 +1,6 @@
 import apiClient from "@/api/client";
 import toast from "react-hot-toast";
 
-export interface SeoData {
-	seoTitle?: string;
-	metaDescription?: string;
-	focusKeyphrase?: string;
-	tags?: string[];
-	ogTitle?: string;
-	ogDescription?: string;
-	ogImage?: string;
-}
 export interface HealthPackage {
 	id?: number;
 	name: string;
@@ -23,7 +14,6 @@ export interface HealthPackage {
 	isActive: boolean;
 	isFeatured: boolean;
 	sortOrder: number;
-	seo?: SeoData | null;
 	category?: {
 		name: string;
 	};

frontend/src/components/BytescaleUploader/BytescaleUploader.tsx

@@ -7,12 +7,11 @@ interface BytescaleUploaderProps {
 	value: string;
 	onChange: (url: string) => void;
 	folderPath:
-		| "/health-packages"
-		| "/seo"
 		| "/doctors"
 		| "/departments"
 		| "/news"
 		| "/blog"
+		| "/health-packages"
 		| "/doctor-og";
 }
 

frontend/src/components/HealthPackageModal/HealthPackageModal.tsx

@@ -1,436 +0,0 @@
-import { BytescaleUploader } from "@/components/BytescaleUploader/BytescaleUploader";
-import SeoFields from "@/components/SeoFields/SeoFields";
-import { useEffect } from "react";
-
-import {
-	Dialog,
-	DialogContent,
-	DialogFooter,
-	DialogHeader,
-	DialogTitle,
-} from "@/components/ui/dialog";
-
-import { Input } from "@/components/ui/input";
-import { Textarea } from "@/components/ui/textarea";
-import { Button } from "@/components/ui/button";
-import { Label } from "@/components/ui/label";
-import { Badge } from "@/components/ui/badge";
-import { Switch } from "@/components/ui/switch";
-
-import {
-	Select,
-	SelectContent,
-	SelectItem,
-	SelectTrigger,
-	SelectValue,
-} from "@/components/ui/select";
-
-import {
-	Accordion,
-	AccordionContent,
-	AccordionItem,
-	AccordionTrigger,
-} from "@/components/ui/accordion";
-
-import { Plus, Trash2 } from "lucide-react";
-
-interface Props {
-	open: boolean;
-	onOpenChange: (open: boolean) => void;
-	editingPackage: any;
-	pkgForm: any;
-	setPkgForm: any;
-	inclusionsList: any[];
-	setInclusionsList: any;
-	categories: any[];
-	onSave: () => void;
-}
-
-export default function HealthPackageModal({
-	open,
-	onOpenChange,
-	editingPackage,
-	pkgForm,
-	setPkgForm,
-	inclusionsList,
-	setInclusionsList,
-	categories,
-	onSave,
-}: Props) {
-	useEffect(() => {
-		if (!editingPackage && pkgForm.name) {
-			setPkgForm((prev: any) => ({
-				...prev,
-				slug: prev.slug
-					? prev.slug
-					: pkgForm.name
-							.toLowerCase()
-							.replace(/[^a-z0-9]+/g, "-")
-							.replace(/(^-|-$)/g, ""),
-			}));
-		}
-	}, [pkgForm.name]);
-
-	const handleAddInclusionField = () => {
-		setInclusionsList([
-			...inclusionsList,
-			{
-				id: Date.now(),
-				category: "",
-				items: "",
-			},
-		]);
-	};
-
-	const handleRemoveInclusionField = (id: number) => {
-		setInclusionsList(inclusionsList.filter((item) => item.id !== id));
-	};
-
-	const handleUpdateInclusionField = (
-		id: number,
-		field: string,
-		value: string,
-	) => {
-		setInclusionsList(
-			inclusionsList.map((item) =>
-				item.id === id
-					? {
-							...item,
-							[field]: value,
-						}
-					: item,
-			),
-		);
-	};
-
-	return (
-		<Dialog open={open} onOpenChange={onOpenChange}>
-			<DialogContent className="w-full !max-w-7xl h-[92vh] flex flex-col p-0 overflow-hidden">
-				<DialogHeader className="px-6 py-5 border-b bg-background sticky top-0 z-20">
-					<DialogTitle className="text-2xl font-bold">
-						{editingPackage ? "Edit Health Package" : "Create Health Package"}
-					</DialogTitle>
-				</DialogHeader>
-
-				<div className="flex-1 overflow-y-auto">
-					<div className="grid grid-cols-1 xl:grid-cols-[1.2fr_0.8fr] gap-8 p-6">
-						{/* LEFT COLUMN */}
-						<div className="space-y-8">
-							<div className="space-y-5">
-								<div className="sticky top-0 bg-background z-10 pb-2">
-									<h3 className="text-lg font-bold">Profile & Pricing</h3>
-
-									<p className="text-sm text-muted-foreground">
-										Main package information
-									</p>
-								</div>
-
-								<div className="space-y-5">
-									<div className="space-y-2">
-										<Label className="font-semibold">Package Image</Label>
-
-										<p className="text-xs text-muted-foreground">
-											Recommended size: 650 × 250
-										</p>
-
-										<BytescaleUploader
-											value={pkgForm.image || ""}
-											folderPath="/health-packages"
-											onChange={(url) =>
-												setPkgForm({
-													...pkgForm,
-													image: url,
-												})
-											}
-										/>
-									</div>
-
-									<div className="flex items-center justify-between border rounded-xl p-4 bg-muted/30">
-										<div>
-											<p className="font-semibold">Active Visibility</p>
-
-											<p className="text-sm text-muted-foreground">
-												Show this package publicly
-											</p>
-										</div>
-
-										<Switch
-											checked={pkgForm.isActive}
-											onCheckedChange={(val) =>
-												setPkgForm({
-													...pkgForm,
-													isActive: val,
-												})
-											}
-										/>
-									</div>
-
-									<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-										<div className="space-y-2">
-											<Label className="font-semibold">Package Name</Label>
-
-											<Input
-												value={pkgForm.name}
-												onChange={(e) =>
-													setPkgForm({
-														...pkgForm,
-														name: e.target.value,
-													})
-												}
-											/>
-										</div>
-
-										<div className="space-y-2">
-											<Label className="font-semibold">URL Slug</Label>
-
-											<Input
-												value={pkgForm.slug}
-												onChange={(e) =>
-													setPkgForm({
-														...pkgForm,
-														slug: e.target.value,
-													})
-												}
-											/>
-										</div>
-									</div>
-
-									<div className="space-y-2">
-										<Label className="font-semibold">Category</Label>
-
-										<Select
-											value={pkgForm.categoryId?.toString()}
-											onValueChange={(v) =>
-												setPkgForm({
-													...pkgForm,
-													categoryId: Number(v),
-												})
-											}
-										>
-											<SelectTrigger>
-												<SelectValue placeholder="Select category" />
-											</SelectTrigger>
-
-											<SelectContent>
-												{categories.map((c) => (
-													<SelectItem key={c.id} value={c.id.toString()}>
-														{c.name}
-													</SelectItem>
-												))}
-											</SelectContent>
-										</Select>
-									</div>
-
-									<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
-										<div className="space-y-2">
-											<Label className="font-semibold">Regular Price (₹)</Label>
-
-											<Input
-												type="number"
-												value={pkgForm.price || ""}
-												onChange={(e) => {
-													const value = e.target.value
-														? Number(e.target.value)
-														: undefined;
-
-													setPkgForm({
-														...pkgForm,
-														price: value,
-													});
-												}}
-											/>
-										</div>
-
-										<div className="space-y-2">
-											<Label className="font-semibold">
-												Discounted Price (₹)
-											</Label>
-
-											<Input
-												type="number"
-												disabled={!pkgForm.price}
-												value={pkgForm.discountedPrice || ""}
-												onChange={(e) =>
-													setPkgForm({
-														...pkgForm,
-														discountedPrice: e.target.value
-															? Number(e.target.value)
-															: undefined,
-													})
-												}
-											/>
-										</div>
-
-										<div className="space-y-2">
-											<Label className="font-semibold">Sort Priority</Label>
-
-											<Input
-												type="number"
-												value={pkgForm.sortOrder}
-												onChange={(e) =>
-													setPkgForm({
-														...pkgForm,
-														sortOrder: Number(e.target.value),
-													})
-												}
-											/>
-										</div>
-									</div>
-
-									<div className="space-y-2">
-										<Label className="font-semibold">Description</Label>
-
-										<Textarea
-											rows={5}
-											value={pkgForm.description}
-											onChange={(e) =>
-												setPkgForm({
-													...pkgForm,
-													description: e.target.value,
-												})
-											}
-										/>
-									</div>
-								</div>
-							</div>
-
-							{/* INCLUSIONS */}
-							<div className="space-y-5">
-								<div className="flex items-center justify-between">
-									<div>
-										<h3 className="text-lg font-bold">Tests & Inclusions</h3>
-
-										<p className="text-sm text-muted-foreground">
-											Group tests into categories
-										</p>
-									</div>
-
-									<Badge variant="outline">
-										{inclusionsList.length} Groups
-									</Badge>
-								</div>
-
-								<Accordion type="multiple" className="space-y-4">
-									{inclusionsList.map((inc, index) => {
-										const testCount = inc.items
-											?.split(",")
-											.filter(Boolean).length;
-
-										return (
-											<AccordionItem
-												key={inc.id}
-												value={inc.id.toString()}
-												className="border rounded-xl bg-background px-5 shadow-sm"
-											>
-												<AccordionTrigger className="hover:no-underline w-full">
-													<div className="flex w-full items-center justify-between">
-														<div className="flex flex-col items-start text-left">
-															<p className="font-semibold">
-																{inc.category || `Group ${index + 1}`}
-															</p>
-
-															<p className="text-xs text-muted-foreground">
-																{testCount || 0} tests included
-															</p>
-														</div>
-
-														<Button
-															variant="ghost"
-															size="sm"
-															className="text-red-500 hover:text-red-600"
-															onClick={() => handleRemoveInclusionField(inc.id)}
-														>
-															<Trash2 className="h-4 w-4 mr-1" />
-															Remove
-														</Button>
-													</div>
-												</AccordionTrigger>
-
-												<AccordionContent className="pt-4">
-													<div className="space-y-4">
-														<div className="space-y-2">
-															<Label>Category Title</Label>
-
-															<Input
-																placeholder="Routine Blood Tests"
-																value={inc.category}
-																onChange={(e) =>
-																	handleUpdateInclusionField(
-																		inc.id,
-																		"category",
-																		e.target.value,
-																	)
-																}
-															/>
-														</div>
-
-														<div className="space-y-2">
-															<div className="flex items-center justify-between">
-																<Label>Included Tests</Label>
-															</div>
-
-															<Textarea
-																rows={4}
-																placeholder="CBC, LFT, RFT, TSH"
-																value={inc.items}
-																onChange={(e) =>
-																	handleUpdateInclusionField(
-																		inc.id,
-																		"items",
-																		e.target.value,
-																	)
-																}
-															/>
-
-															<p className="text-xs text-muted-foreground">
-																Separate each test using commas
-															</p>
-														</div>
-													</div>
-												</AccordionContent>
-											</AccordionItem>
-										);
-									})}
-								</Accordion>
-
-								<Button
-									variant="outline"
-									className="w-full border-dashed border-2 h-12"
-									onClick={handleAddInclusionField}
-								>
-									<Plus className="h-4 w-4 mr-2" />
-									Add New Inclusion Group
-								</Button>
-							</div>
-						</div>
-
-						{/* RIGHT COLUMN */}
-						<div className="space-y-6">
-							<SeoFields
-								value={pkgForm.seo}
-								slug={pkgForm.slug}
-								folderPath="/seo"
-								onChange={(seo) =>
-									setPkgForm({
-										...pkgForm,
-										seo,
-									})
-								}
-							/>
-						</div>
-					</div>
-				</div>
-
-				<DialogFooter className="p-6 border-t bg-background sticky bottom-0 z-20">
-					<Button variant="ghost" onClick={() => onOpenChange(false)}>
-						Cancel
-					</Button>
-
-					<Button className="px-10" onClick={onSave}>
-						{editingPackage ? "Save Changes" : "Create Package"}
-					</Button>
-				</DialogFooter>
-			</DialogContent>
-		</Dialog>
-	);
-}

frontend/src/components/SeoFields/SeoFields.tsx

@@ -1,211 +0,0 @@
-import { BytescaleUploader } from "@/components/BytescaleUploader/BytescaleUploader";
-
-import { Badge } from "@/components/ui/badge";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import { Textarea } from "@/components/ui/textarea";
-
-import { X } from "lucide-react";
-
-interface SeoData {
-	seoTitle?: string;
-	metaDescription?: string;
-	focusKeyphrase?: string;
-	tags?: string[];
-	ogTitle?: string;
-	ogDescription?: string;
-	ogImage?: string;
-}
-
-interface SeoFieldsProps {
-	value?: SeoData;
-	onChange: (seo: SeoData) => void;
-	slug?: string;
-	folderPath?: "/seo";
-}
-
-export default function SeoFields({
-	value,
-	onChange,
-	slug,
-	folderPath = "/seo",
-}: SeoFieldsProps) {
-	const seo = value || {};
-
-	const updateSeo = (field: keyof SeoData, fieldValue: any) => {
-		onChange({
-			...seo,
-			[field]: fieldValue,
-		});
-	};
-
-	const removeTag = (index: number) => {
-		updateSeo(
-			"tags",
-			(seo.tags || []).filter((_, i) => i !== index),
-		);
-	};
-
-	return (
-		<div className="space-y-5 p-5 border rounded-xl bg-muted/20">
-			<div className="flex items-center justify-between">
-				<div>
-					<h3 className="text-lg font-bold">SEO Settings</h3>
-
-					<p className="text-sm text-muted-foreground">
-						Optimize for Google & social sharing
-					</p>
-				</div>
-
-				<Badge variant="secondary">Optional</Badge>
-			</div>
-
-			<div className="space-y-2">
-				<div className="flex items-center justify-between">
-					<Label className="text-sm font-semibold">SEO Title</Label>
-
-					<span className="text-xs text-muted-foreground">
-						{seo.seoTitle?.length || 0}/60
-					</span>
-				</div>
-
-				<Input
-					placeholder="Best Health Checkup Package in Kochi"
-					value={seo.seoTitle || ""}
-					onChange={(e) => updateSeo("seoTitle", e.target.value)}
-				/>
-
-				<p className="text-xs text-muted-foreground">
-					Recommended: 50–60 characters
-				</p>
-			</div>
-
-			<div className="space-y-2">
-				<div className="flex items-center justify-between">
-					<Label className="text-sm font-semibold">Meta Description</Label>
-
-					<span className="text-xs text-muted-foreground">
-						{seo.metaDescription?.length || 0}/160
-					</span>
-				</div>
-
-				<Textarea
-					rows={4}
-					placeholder="Short description shown in Google search results"
-					value={seo.metaDescription || ""}
-					onChange={(e) => updateSeo("metaDescription", e.target.value)}
-				/>
-
-				<p className="text-xs text-muted-foreground">
-					Recommended: 150–160 characters
-				</p>
-			</div>
-
-			<div className="space-y-2">
-				<Label className="text-sm font-semibold">Focus Keyphrase</Label>
-
-				<Input
-					placeholder="health checkup package kochi"
-					value={seo.focusKeyphrase || ""}
-					onChange={(e) => updateSeo("focusKeyphrase", e.target.value)}
-				/>
-			</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">
-					{(seo.tags || []).map((tag, index) => (
-						<div
-							key={index}
-							className="bg-primary/10 text-primary px-3 py-1 rounded-full text-sm flex items-center gap-2"
-						>
-							<span>{tag}</span>
-
-							<button
-								type="button"
-								onClick={() => removeTag(index)}
-								className="hover:text-red-500 transition-colors"
-							>
-								<X className="h-3 w-3" />
-							</button>
-						</div>
-					))}
-
-					<Input
-						placeholder="Type keyword and press Enter"
-						className="border-0 shadow-none focus-visible:ring-0 min-w-[220px] flex-1"
-						onKeyDown={(e) => {
-							if (e.key === "Enter" && e.currentTarget.value.trim()) {
-								e.preventDefault();
-
-								const newTag = e.currentTarget.value.trim();
-
-								if (!(seo.tags || []).includes(newTag)) {
-									updateSeo("tags", [...(seo.tags || []), newTag]);
-								}
-
-								e.currentTarget.value = "";
-							}
-						}}
-					/>
-				</div>
-
-				<p className="text-xs text-muted-foreground">Press Enter to add tags</p>
-			</div>
-
-			<div className="border-t pt-5 space-y-5">
-				<div className="flex items-center justify-between">
-					<div>
-						<h4 className="font-bold">Open Graph (Social Preview)</h4>
-
-						<p className="text-sm text-muted-foreground">
-							Facebook, WhatsApp & Twitter sharing
-						</p>
-					</div>
-
-					<Badge variant="secondary">Optional</Badge>
-				</div>
-
-				<div className="space-y-2">
-					<Label className="text-sm font-semibold">OG Title</Label>
-
-					<Input
-						placeholder="Title for social sharing"
-						value={seo.ogTitle || ""}
-						onChange={(e) => updateSeo("ogTitle", e.target.value)}
-					/>
-
-					<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
-						rows={4}
-						placeholder="Description for social sharing"
-						value={seo.ogDescription || ""}
-						onChange={(e) => updateSeo("ogDescription", e.target.value)}
-					/>
-
-					<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={seo.ogImage || ""}
-						folderPath={folderPath}
-						onChange={(url) => updateSeo("ogImage", url)}
-					/>
-				</div>
-			</div>
-		</div>
-	);
-}

frontend/src/components/SeoPreview/SeoPreview.tsx

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

frontend/src/components/ui/accordion.tsx

@@ -1,79 +0,0 @@
-import * as React from "react"
-import { Accordion as AccordionPrimitive } from "radix-ui"
-
-import { cn } from "@/lib/utils"
-import { ChevronDownIcon, ChevronUpIcon } from "lucide-react"
-
-function Accordion({
-  className,
-  ...props
-}: React.ComponentProps<typeof AccordionPrimitive.Root>) {
-  return (
-    <AccordionPrimitive.Root
-      data-slot="accordion"
-      className={cn("flex w-full flex-col", className)}
-      {...props}
-    />
-  )
-}
-
-function AccordionItem({
-  className,
-  ...props
-}: React.ComponentProps<typeof AccordionPrimitive.Item>) {
-  return (
-    <AccordionPrimitive.Item
-      data-slot="accordion-item"
-      className={cn("not-last:border-b", className)}
-      {...props}
-    />
-  )
-}
-
-function AccordionTrigger({
-  className,
-  children,
-  ...props
-}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
-  return (
-    <AccordionPrimitive.Header className="flex">
-      <AccordionPrimitive.Trigger
-        data-slot="accordion-trigger"
-        className={cn(
-          "group/accordion-trigger relative flex flex-1 items-start justify-between rounded-lg border border-transparent py-2.5 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:after:border-ring disabled:pointer-events-none disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 **:data-[slot=accordion-trigger-icon]:text-muted-foreground",
-          className
-        )}
-        {...props}
-      >
-        {children}
-        <ChevronDownIcon data-slot="accordion-trigger-icon" className="pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden" />
-        <ChevronUpIcon data-slot="accordion-trigger-icon" className="pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline" />
-      </AccordionPrimitive.Trigger>
-    </AccordionPrimitive.Header>
-  )
-}
-
-function AccordionContent({
-  className,
-  children,
-  ...props
-}: React.ComponentProps<typeof AccordionPrimitive.Content>) {
-  return (
-    <AccordionPrimitive.Content
-      data-slot="accordion-content"
-      className="overflow-hidden text-sm data-open:animate-accordion-down data-closed:animate-accordion-up"
-      {...props}
-    >
-      <div
-        className={cn(
-          "h-(--radix-accordion-content-height) pt-0 pb-2.5 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4",
-          className
-        )}
-      >
-        {children}
-      </div>
-    </AccordionPrimitive.Content>
-  )
-}
-
-export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }

frontend/src/pages/HealthPackagePage.tsx

@@ -1,21 +1,21 @@
 import { useState, useEffect, useCallback, useMemo } from "react";
 import toast from "react-hot-toast";
 import { AxiosError } from "axios";
+import { BytescaleUploader } from "@/components/BytescaleUploader/BytescaleUploader";
 
 import {
 	getHealthPackagesApi,
 	getHealthCategoriesApi,
-	updateHealthPackageApi,
 	createHealthPackageApi,
+	updateHealthPackageApi,
 	createCategoryApi,
 	updateCategoryApi,
+	deleteCategoryApi,
 	HealthPackage,
 	HealthCategory,
 } from "@/api/healthCheck";
 
 import PackageInquiriesTab from "@/components/PackageInquiriesTab/PackageInquiriesTab";
-import HealthPackageModal from "@/components/HealthPackageModal/HealthPackageModal";
-import SeoPreview from "@/components/SeoPreview/SeoPreview";
 
 import {
 	Table,
@@ -35,10 +35,18 @@ import {
 	DialogFooter,
 } from "@/components/ui/dialog";
 import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
 import { Badge } from "@/components/ui/badge";
 import { Switch } from "@/components/ui/switch";
 import { Label } from "@/components/ui/label";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from "@/components/ui/select";
 
 import {
 	Loader2,
@@ -49,10 +57,10 @@ import {
 	ChevronRight,
 	LayoutGrid,
 	Eye,
+	Trash2,
 } from "lucide-react";
 
 export default function HealthPackagePage() {
-	const WEBSITE_URL = import.meta.env.VITE_WEBSITE_URL;
 	const [packages, setPackages] = useState<HealthPackage[]>([]);
 	const [categories, setCategories] = useState<HealthCategory[]>([]);
 	const [loading, setLoading] = useState(true);
@@ -86,20 +94,11 @@ export default function HealthPackagePage() {
 		slug: "",
 		description: "",
 		image: "",
-		price: undefined,
+		price: 0,
-		discountedPrice: undefined,
+		discountedPrice: 0,
 		categoryId: 0,
 		isActive: true,
 		sortOrder: 1000,
-		seo: {
-			seoTitle: "",
-			metaDescription: "",
-			focusKeyphrase: "",
-			tags: [],
-			ogTitle: "",
-			ogDescription: "",
-			ogImage: "",
-		},
 	});
 	const [inclusionsList, setInclusionsList] = useState([
 		{ id: Date.now(), category: "", items: "" },
@@ -205,20 +204,11 @@ export default function HealthPackagePage() {
 			slug: "",
 			description: "",
 			image: "",
-			price: undefined,
+			price: 0,
-			discountedPrice: undefined,
+			discountedPrice: 0,
 			categoryId: categories[0]?.id || 0,
 			isActive: true,
 			sortOrder: 1000,
-			seo: {
-				seoTitle: "",
-				metaDescription: "",
-				focusKeyphrase: "",
-				tags: [],
-				ogTitle: "",
-				ogDescription: "",
-				ogImage: "",
-			},
 		});
 		setInclusionsList([{ id: Date.now(), category: "", items: "" }]);
 		setPackageModal(true);
@@ -251,6 +241,28 @@ export default function HealthPackagePage() {
 
 		setPackageModal(true);
 	};
+	const handleAddInclusionField = () => {
+		setInclusionsList([
+			...inclusionsList,
+			{ id: Date.now(), category: "", items: "" },
+		]);
+	};
+
+	const handleRemoveInclusionField = (id: number) => {
+		setInclusionsList(inclusionsList.filter((item) => item.id !== id));
+	};
+
+	const handleUpdateInclusionField = (
+		id: number,
+		field: string,
+		value: string,
+	) => {
+		setInclusionsList(
+			inclusionsList.map((item) =>
+				item.id === id ? { ...item, [field]: value } : item,
+			),
+		);
+	};
 
 	const savePackage = async () => {
 		if (!pkgForm.image) return toast.error("Package image is required.");
@@ -271,6 +283,7 @@ export default function HealthPackagePage() {
 		}
 
 		try {
+			// Convert the dynamic array back into the required JSON object format
 			const parsedInclusions: Record<string, string[]> = {};
 			inclusionsList.forEach((entry) => {
 				const catName = entry.category.trim();
@@ -287,17 +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 =
-				finalData.discountedPrice !== undefined &&
-				finalData.discountedPrice !== null
-					? Number(finalData.discountedPrice)
-					: null;
 
+			if (!finalData.discountedPrice) {
+				delete finalData.discountedPrice;
+			}
 			if (editingPackage?.id) {
 				const changedFields: Record<string, any> = {};
 				Object.keys(finalData).forEach((key) => {
@@ -318,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);
@@ -358,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);
@@ -370,7 +383,18 @@ export default function HealthPackagePage() {
 		}
 	};
 
-	const previewUrl = `${WEBSITE_URL}/preventivecheckupdirectory/${selectedPackage?.slug}`;
+	const deleteCategory = async (id: number) => {
+		if (confirm("Delete this category? Ensure no packages are linked to it.")) {
+			try {
+				await deleteCategoryApi(id);
+				toast.success("Category deleted successfully!");
+				fetchData();
+			} catch (err) {
+				console.error(err);
+				toast.error("Failed to delete category.");
+			}
+		}
+	};
 
 	return (
 		<div className="p-6 space-y-6">
@@ -499,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}
@@ -707,18 +725,268 @@ export default function HealthPackagePage() {
 				</TabsContent>
 			</Tabs>
 
-			{/* --- REPLACED MODAL CONTAINER --- */}
+			{/* --- PACKAGE MODAL --- */}
-			<HealthPackageModal
+			<Dialog open={packageModal} onOpenChange={setPackageModal}>
-				open={packageModal}
+				<DialogContent className="w-full !max-w-5xl h-[90vh] flex flex-col p-0 overflow-hidden">
-				onOpenChange={setPackageModal}
+					<DialogHeader className="p-6 border-b bg-background z-10">
-				editingPackage={editingPackage}
+						<DialogTitle className="text-2xl">
-				pkgForm={pkgForm}
+							{editingPackage ? "Edit Package" : "Add Package"}
-				setPkgForm={setPkgForm}
+						</DialogTitle>
-				inclusionsList={inclusionsList}
+					</DialogHeader>
-				setInclusionsList={setInclusionsList}
+
-				categories={categories}
+					<div className="flex-1 overflow-y-auto p-6">
-				onSave={savePackage}
+						<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
-			/>
+							<div className="space-y-6">
+								<h3 className="font-bold text-base border-b pb-2">
+									Profile & Pricing
+								</h3>
+								<div className="space-y-4">
+									<div className="space-y-2">
+										<Label className="text-sm font-semibold">
+											Package Image(Dimensions: 650w x 250h)
+										</Label>
+
+										<BytescaleUploader
+											value={pkgForm.image || ""}
+											folderPath="/health-packages"
+											onChange={(url) =>
+												setPkgForm({
+													...pkgForm,
+													image: url,
+												})
+											}
+										/>
+									</div>
+									<div className="flex items-center justify-between p-3 border rounded-md bg-muted/30">
+										<Label className="text-base font-semibold cursor-pointer">
+											Active Visibility
+										</Label>
+										<Switch
+											checked={pkgForm.isActive}
+											onCheckedChange={(val) =>
+												setPkgForm({ ...pkgForm, isActive: val })
+											}
+										/>
+									</div>
+
+									<div className="space-y-1">
+										<Label className="text-sm font-semibold">
+											Sort Priority (Lower numbers show first)
+										</Label>
+										<Input
+											type="number"
+											value={pkgForm.sortOrder}
+											onChange={(e) =>
+												setPkgForm({
+													...pkgForm,
+													sortOrder: Number(e.target.value),
+												})
+											}
+											className="text-base"
+										/>
+									</div>
+
+									<div className="space-y-1">
+										<Label className="text-sm font-semibold">
+											Package Name
+										</Label>
+										<Input
+											value={pkgForm.name}
+											onChange={(e) =>
+												setPkgForm({ ...pkgForm, name: e.target.value })
+											}
+											className="text-base"
+										/>
+									</div>
+
+									<div className="space-y-1">
+										<Label className="text-sm font-semibold">URL Slug</Label>
+										<Input
+											value={pkgForm.slug}
+											onChange={(e) =>
+												setPkgForm({ ...pkgForm, slug: e.target.value })
+											}
+											className="text-base"
+										/>
+									</div>
+
+									<div className="space-y-1">
+										<Label className="text-sm font-semibold">Category</Label>
+										<Select
+											value={pkgForm.categoryId?.toString()}
+											onValueChange={(v) =>
+												setPkgForm({ ...pkgForm, categoryId: Number(v) })
+											}
+										>
+											<SelectTrigger className="text-base">
+												<SelectValue />
+											</SelectTrigger>
+											<SelectContent>
+												{categories.map((c) => (
+													<SelectItem key={c.id} value={c.id.toString()}>
+														{c.name}
+													</SelectItem>
+												))}
+											</SelectContent>
+										</Select>
+									</div>
+
+									<div className="grid grid-cols-2 gap-4">
+										<div className="space-y-1">
+											<Label className="text-sm font-semibold">
+												Regular Price (₹)
+											</Label>
+											<Input
+												type="number"
+												value={pkgForm.price || ""}
+												onChange={(e) =>
+													setPkgForm({
+														...pkgForm,
+														price: e.target.value
+															? Number(e.target.value)
+															: undefined,
+													})
+												}
+												className="text-base"
+											/>
+										</div>
+										<div className="space-y-1">
+											<Label className="text-sm font-semibold">
+												Discounted Price (₹)
+											</Label>
+											<Input
+												type="number"
+												value={pkgForm.discountedPrice || ""}
+												onChange={(e) =>
+													setPkgForm({
+														...pkgForm,
+														discountedPrice: e.target.value
+															? Number(e.target.value)
+															: undefined,
+													})
+												}
+												className="text-base"
+											/>
+										</div>
+									</div>
+								</div>
+							</div>
+
+							<div className="space-y-6">
+								<h3 className="font-bold text-base border-b pb-2">
+									Details & Inclusions
+								</h3>
+								<div className="space-y-4">
+									<div className="space-y-1">
+										<Label className="text-sm font-semibold">Description</Label>
+										<Textarea
+											rows={3}
+											value={pkgForm.description}
+											onChange={(e) =>
+												setPkgForm({ ...pkgForm, description: e.target.value })
+											}
+											className="text-base"
+										/>
+									</div>
+
+									<div className="space-y-1">
+										<div className="space-y-4">
+											<div className="flex items-center justify-between mb-2">
+												<Label className="text-sm font-semibold">
+													Tests & Inclusions
+												</Label>
+												<Badge variant="outline">Grouped Fields</Badge>
+											</div>
+
+											<div className="space-y-4 max-h-[400px] overflow-y-auto pr-2">
+												{inclusionsList.map((inc) => (
+													<div
+														key={inc.id}
+														className="p-4 border rounded-md bg-muted/10 relative"
+													>
+														{/* Remove Button */}
+														<Button
+															variant="ghost"
+															size="icon"
+															className="absolute top-2 right-2 h-8 w-8 text-red-500 hover:text-red-700 hover:bg-red-50"
+															onClick={() => handleRemoveInclusionField(inc.id)}
+														>
+															<Trash2 className="h-4 w-4" />
+														</Button>
+
+														<div className="space-y-3 pr-8">
+															<div className="space-y-1">
+																<Label className="text-xs text-muted-foreground uppercase font-bold">
+																	Category Title
+																</Label>
+																<Input
+																	placeholder="e.g. Routine Blood Tests"
+																	value={inc.category}
+																	onChange={(e) =>
+																		handleUpdateInclusionField(
+																			inc.id,
+																			"category",
+																			e.target.value,
+																		)
+																	}
+																	className="font-semibold text-base"
+																/>
+															</div>
+															<div className="space-y-1">
+																<Label className="text-xs text-muted-foreground uppercase font-bold">
+																	Included Tests
+																</Label>
+																<p className="text-[10px] text-muted-foreground leading-none mb-1">
+																	Separate tests with a comma (,)
+																</p>
+																<Textarea
+																	rows={2}
+																	placeholder="e.g. CBC, LFT, RFT, TSH"
+																	value={inc.items}
+																	onChange={(e) =>
+																		handleUpdateInclusionField(
+																			inc.id,
+																			"items",
+																			e.target.value,
+																		)
+																	}
+																	className="text-sm"
+																/>
+															</div>
+														</div>
+													</div>
+												))}
+											</div>
+
+											<Button
+												variant="outline"
+												className="w-full mt-2 border-dashed border-2"
+												onClick={handleAddInclusionField}
+											>
+												<Plus className="mr-2 h-4 w-4" />
+												Add New Category Group
+											</Button>
+										</div>
+									</div>
+								</div>
+							</div>
+						</div>
+					</div>
+
+					<DialogFooter className="p-6 border-t">
+						<Button
+							variant="ghost"
+							onClick={() => setPackageModal(false)}
+							className="text-base"
+						>
+							Cancel
+						</Button>
+						<Button onClick={savePackage} className="px-10 text-base">
+							{editingPackage ? "Save Changes" : "Create Package"}
+						</Button>
+					</DialogFooter>
+				</DialogContent>
+			</Dialog>
 
 			{/* --- CATEGORY MODAL --- */}
 			<Dialog open={categoryModal} onOpenChange={setCategoryModal}>
@@ -774,12 +1042,82 @@ export default function HealthPackagePage() {
 				</DialogContent>
 			</Dialog>
 
-			<SeoPreview
+			{/* --- VIEW MODAL --- */}
-				open={viewModal}
+			<Dialog open={viewModal} onOpenChange={setViewModal}>
-				onOpenChange={setViewModal}
+				<DialogContent className="w-full !max-w-5xl h-[90vh] flex flex-col p-0 overflow-hidden">
-				previewData={selectedPackage}
+					<DialogHeader className="p-6 border-b bg-background z-10">
-				url={previewUrl}
+						<DialogTitle className="text-2xl">
-			/>
+							{selectedPackage?.name}
+						</DialogTitle>
+					</DialogHeader>
+					<div className="flex-1 overflow-y-auto p-6 space-y-6">
+						<div className="flex justify-between items-center bg-muted/20 p-4 rounded-lg">
+							<div>
+								<p className="text-sm text-muted-foreground uppercase font-bold">
+									Category
+								</p>
+								<p className="text-base font-medium">
+									{selectedPackage?.category?.name}
+								</p>
+							</div>
+							<div className="text-right">
+								<p className="text-sm text-muted-foreground uppercase font-bold">
+									Pricing
+								</p>
+								<p className="text-xl font-bold">
+									₹{selectedPackage?.discountedPrice || selectedPackage?.price}
+								</p>
+							</div>
+						</div>
+						<div>
+							<h3 className="font-bold text-base border-b pb-2 mb-4">
+								Inclusions
+							</h3>
+							<div className="space-y-6">
+								{selectedPackage?.inclusions &&
+								typeof selectedPackage.inclusions === "object" &&
+								!Array.isArray(selectedPackage.inclusions) ? (
+									Object.entries(selectedPackage.inclusions).map(
+										([category, tests], idx) => (
+											<div key={idx}>
+												<h4 className="font-semibold text-sm text-primary mb-3 uppercase tracking-wider">
+													{category}
+												</h4>
+												<div className="grid grid-cols-2 gap-3">
+													{Array.isArray(tests) &&
+														tests.map((item, i) => (
+															<div
+																key={i}
+																className="text-sm border p-3 rounded bg-background shadow-sm"
+															>
+																✓ {item}
+															</div>
+														))}
+												</div>
+											</div>
+										),
+									)
+								) : (
+									<div className="grid grid-cols-2 gap-3">
+										{Array.isArray(selectedPackage?.inclusions) &&
+											selectedPackage.inclusions.map((item, i) => (
+												<div
+													key={i}
+													className="text-sm border p-3 rounded bg-background shadow-sm"
+												>
+													✓ {item}
+												</div>
+											))}
+									</div>
+								)}
+							</div>
+						</div>
+					</div>
+					<DialogFooter className="p-6 border-t">
+						<Button onClick={() => setViewModal(false)}>Close</Button>
+					</DialogFooter>
+				</DialogContent>
+			</Dialog>
 		</div>
 	);
 }