feat: health check seo preview

frontend/src/pages/HealthPackagePage.tsx

@@ -9,13 +9,13 @@ import {
 	createHealthPackageApi,
 	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,
@@ -771,86 +771,12 @@ export default function HealthPackagePage() {
 				</DialogContent>
 			</Dialog>
 
-			{/* --- VIEW MODAL --- */}
-			<Dialog open={viewModal} onOpenChange={setViewModal}>
-				<DialogContent className="w-full !max-w-5xl h-[90vh] flex flex-col p-0 overflow-hidden">
-					<DialogHeader className="p-6 border-b bg-background z-10">
-						<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 != null
-										? `₹${selectedPackage.discountedPrice}`
-										: selectedPackage?.price != null
-											? `₹${selectedPackage.price}`
-											: "Not Entered"}
-								</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>
+			<SeoPreview
+				open={viewModal}
+				onOpenChange={setViewModal}
+				previewData={selectedPackage}
+				url="asdfasdfasD"
+			/>
 		</div>
 	);
 }