feat/add blog

backend/package-lock.json

@@ -22,7 +22,8 @@
 				"jsonwebtoken": "^9.0.3",
 				"multer": "^2.1.1",
 				"postmark": "^4.0.7",
-				"prisma": "^6.19.2"
+				"prisma": "^6.19.2",
+				"slugify": "^1.6.9"
 			},
 			"devDependencies": {
 				"nodemon": "^3.1.11"
@@ -1727,7 +1728,6 @@
 			"integrity": "sha512-XTKeKxtQElcq3U9/jHyxSPgiRgeYDKxWTPOf6NkXA0dNj5j40MfEsZkMbyNpwDWCUv7YBFUl7I2VK/6ALbmhEg==",
 			"hasInstallScript": true,
 			"license": "Apache-2.0",
-			"peer": true,
 			"dependencies": {
 				"@prisma/config": "6.19.2",
 				"@prisma/engines": "6.19.2"
@@ -2064,6 +2064,15 @@
 				"node": ">=10"
 			}
 		},
+		"node_modules/slugify": {
+			"version": "1.6.9",
+			"resolved": "https://registry.npmjs.org/slugify/-/slugify-1.6.9.tgz",
+			"integrity": "sha512-vZ7rfeehZui7wQs438JXBckYLkIIdfHOXsaVEUMyS5fHo1483l1bMdo0EDSWYclY0yZKFOipDy4KHuKs6ssvdg==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=8.0.0"
+			}
+		},
 		"node_modules/statuses": {
 			"version": "2.0.2",
 			"resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.2.tgz",

backend/package.json

@@ -28,7 +28,8 @@
 		"jsonwebtoken": "^9.0.3",
 		"multer": "^2.1.1",
 		"postmark": "^4.0.7",
-		"prisma": "^6.19.2"
+		"prisma": "^6.19.2",
+		"slugify": "^1.6.9"
 	},
 	"devDependencies": {
 		"nodemon": "^3.1.11"

backend/prisma/migrations/20260414074145_doctor_image_field/migration.sql

@@ -1,2 +0,0 @@
--- AlterTable
-ALTER TABLE "Doctor" ADD COLUMN     "image" TEXT;

backend/prisma/migrations/20260414083619_added_slug/migration.sql

@@ -0,0 +1,8 @@
+/*
+  Warnings:
+
+  - Added the required column `slug` to the `Blog` table without a default value. This is not possible if the table is not empty.
+
+*/
+-- AlterTable
+ALTER TABLE "Blog" ADD COLUMN     "slug" TEXT NOT NULL;

backend/prisma/migrations/20260414091055/migration.sql

@@ -0,0 +1,8 @@
+/*
+  Warnings:
+
+  - A unique constraint covering the columns `[slug]` on the table `Blog` will be added. If there are existing duplicate values, this will fail.
+
+*/
+-- CreateIndex
+CREATE UNIQUE INDEX "Blog_slug_key" ON "Blog"("slug");

backend/prisma/migrations/20260414102430_department_image/migration.sql

@@ -1,2 +0,0 @@
--- AlterTable
-ALTER TABLE "Department" ADD COLUMN     "image" TEXT;

backend/prisma/migrations/20260414105925_news_media/migration.sql

@@ -1,12 +0,0 @@
--- CreateTable
-CREATE TABLE "NewsImage" (
-    "id" SERIAL NOT NULL,
-    "url" TEXT NOT NULL,
-    "newsMediaId" INTEGER NOT NULL,
-    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
-
-    CONSTRAINT "NewsImage_pkey" PRIMARY KEY ("id")
-);
-
--- AddForeignKey
-ALTER TABLE "NewsImage" ADD CONSTRAINT "NewsImage_newsMediaId_fkey" FOREIGN KEY ("newsMediaId") REFERENCES "NewsMedia"("id") ON DELETE CASCADE ON UPDATE CASCADE;

backend/prisma/schema.prisma

@@ -21,7 +21,6 @@ model Doctor {
   id            Int     @id @default(autoincrement())
   doctorId      String  @unique
   name          String
-  image         String?
   designation   String?
   workingStatus String?
   qualification String?
@@ -37,8 +36,6 @@ model Department {
   id           Int    @id @default(autoincrement())
   departmentId String @unique
   name         String
-  image        String?
-
 
   para1      String?
   para2      String?
@@ -96,6 +93,7 @@ model Blog {
   image    String?
   content  Json
   isActive Boolean @default(true)
+  slug     String @unique
 
   createdAt DateTime @default(now())
   updatedAt DateTime @updatedAt
@@ -152,20 +150,20 @@ model Appointment {
 }
 
 model Inquiry {
-  id        Int      @id @default(autoincrement())
+  id Int @id @default(autoincrement())
 
-  fullName  String
+  fullName String
-  number    String
+  number   String
-  emailId   String?
+  emailId  String?
-  subject   String?
+  subject  String?
-  message   String?
+  message  String?
 
   createdAt DateTime @default(now())
   updatedAt DateTime @updatedAt
 }
 
 model AcademicsResearch {
-  id         Int      @id @default(autoincrement())
+  id Int @id @default(autoincrement())
 
   fullName   String
   number     String
@@ -174,42 +172,33 @@ model AcademicsResearch {
   courseName String?
   message    String?
 
-  createdAt  DateTime @default(now())
+  createdAt DateTime @default(now())
-  updatedAt  DateTime @updatedAt
+  updatedAt DateTime @updatedAt
 }
 
-
 model EmailConfig {
-  id        Int    @id @default(autoincrement())
+  id       Int     @id @default(autoincrement())
-  name      String 
+  name     String
-  email     String
+  email    String
-  type      String 
+  type     String
-  isActive  Boolean @default(true)
+  isActive Boolean @default(true)
 
   createdAt DateTime @default(now())
   updatedAt DateTime @updatedAt
 }
 
 model NewsMedia {
-  id         Int         @id @default(autoincrement())
+  id Int @id @default(autoincrement())
+
   headline   String
   content    String?
   firstPara  String?
   secondPara String?
   author     String?
   date       DateTime?
-  images     NewsImage[] 
 
-  isActive   Boolean  @default(true)
+  isActive Boolean @default(true)
-  createdAt  DateTime    @default(now())
+
-  updatedAt  DateTime    @updatedAt
+  createdAt DateTime @default(now())
-}
+  updatedAt DateTime @updatedAt
-
-model NewsImage {
-  id          Int       @id @default(autoincrement())
-  url         String    
-  newsMediaId Int
-  newsMedia   NewsMedia @relation(fields: [newsMediaId], references: [id], onDelete: Cascade)
-
-  createdAt   DateTime  @default(now())
 }

backend/src/controllers/blog.controller.js

@@ -1,4 +1,5 @@
 import prisma from "../prisma/client.js";
+import slugify from "slugify";
 
 /* CREATE BLOG */
 
@@ -13,6 +14,7 @@ export async function createBlog(req, res) {
 				image,
 				content,
 				isActive,
+				slug: slugify(title),
 			},
 		});
 
@@ -54,6 +56,26 @@ export async function getAllBlogs(req, res) {
 /* GET SINGLE BLOG */
 
 export async function getBlog(req, res) {
+	try {
+		const slug = req.params.slug;
+
+		const blog = await prisma.blog.findUnique({
+			where: {slug},
+		});
+
+		if (!blog) {
+			return res.status(404).json({error: "Blog not found"});
+		}
+
+		res.json(blog);
+	} catch (error) {
+		res.status(500).json({error: error.message});
+	}
+}
+
+/* GET SINGLE BLOG (ADMIN)*/
+
+export async function getBlogForAdmin(req, res) {
 	try {
 		const id = Number(req.params.id);
 

backend/src/controllers/department.controller.js

@@ -9,7 +9,6 @@ export const getAllDepartments = async (req, res) => {
 		const response = departments.map((dep) => ({
 			departmentId: dep.departmentId,
 			name: dep.name,
-			image: dep.image ?? "",
 			para1: dep.para1 ?? "",
 			para2: dep.para2 ?? "",
 			para3: dep.para3 ?? "",
@@ -57,7 +56,6 @@ export const getDepartmentByName = async (req, res) => {
 		const response = {
 			departmentId: department.departmentId,
 			name: department.name,
-			image: department.image ?? "",
 			para1: department.para1 ?? "",
 			para2: department.para2 ?? "",
 			para3: department.para3 ?? "",
@@ -80,16 +78,8 @@ export const getDepartmentByName = async (req, res) => {
 
 export async function createDepartment(req, res) {
 	try {
-		const {
+		const {departmentId, name, para1, para2, para3, facilities, services} =
-			departmentId,
+			req.body;
-			name,
-			image,
-			para1,
-			para2,
-			para3,
-			facilities,
-			services,
-		} = req.body;
 
 		if (!departmentId || !name) {
 			return res
@@ -101,7 +91,6 @@ export async function createDepartment(req, res) {
 			data: {
 				departmentId,
 				name,
-				image,
 				para1,
 				para2,
 				para3,
@@ -127,13 +116,12 @@ export const updateDepartment = async (req, res) => {
 	try {
 		const {departmentId} = req.params;
 
-		const {name, image, para1, para2, para3, facilities, services} = req.body;
+		const {name, para1, para2, para3, facilities, services} = req.body;
 
 		const department = await prisma.department.update({
 			where: {departmentId},
 			data: {
 				name,
-				image,
 				para1,
 				para2,
 				para3,

backend/src/controllers/doctor.controller.js

@@ -20,7 +20,6 @@ export const getAllDoctors = async (req, res) => {
 			SL_NO: String(index + 1),
 			doctorId: doc.doctorId,
 			name: doc.name,
-			image: doc.image ?? "",
 			designation: doc.designation,
 			workingStatus: doc.workingStatus,
 			qualification: doc.qualification,
@@ -88,7 +87,6 @@ export const getDoctorByDoctorId = async (req, res) => {
 		const response = {
 			doctorId: doctor.doctorId,
 			name: doctor.name,
-			image: doctor.image ?? "",
 			designation: doctor.designation,
 			workingStatus: doctor.workingStatus,
 			qualification: doctor.qualification,
@@ -145,7 +143,6 @@ export const getDoctorsByDepartmentId = async (req, res) => {
 		const result = doctors.map((d) => ({
 			GG_ID: d.doctor.doctorId,
 			Name: d.doctor.name,
-			image: d.doctor.image ?? "",
 		}));
 
 		res.status(200).json({
@@ -167,7 +164,6 @@ export const createDoctor = async (req, res) => {
 		const {
 			doctorId,
 			name,
-			image,
 			designation,
 			workingStatus,
 			qualification,
@@ -178,7 +174,6 @@ export const createDoctor = async (req, res) => {
 			data: {
 				doctorId,
 				name,
-				image,
 				designation,
 				workingStatus,
 				qualification,
@@ -226,14 +221,8 @@ export const createDoctor = async (req, res) => {
 export const updateDoctor = async (req, res) => {
 	try {
 		const {doctorId} = req.params;
-		const {
+		const {name, designation, workingStatus, qualification, departments} =
-			name,
+			req.body;
-			designation,
-			image,
-			workingStatus,
-			qualification,
-			departments,
-		} = req.body;
 
 		const doctor = await prisma.doctor.findUnique({
 			where: {doctorId},
@@ -247,7 +236,7 @@ export const updateDoctor = async (req, res) => {
 
 		await prisma.doctor.update({
 			where: {id: doctor.id},
-			data: {name, designation, image, workingStatus, qualification},
+			data: {name, designation, workingStatus, qualification},
 		});
 
 		const oldRelations = await prisma.doctorDepartment.findMany({

backend/src/controllers/inquiry.controller.js

@@ -1,8 +1,5 @@
 import prisma from "../prisma/client.js";
 
-import {sendEmail} from "../utils/sendEmail.js";
-import {getEmailsByType} from "../utils/getEmailByTypes.js";
-
 /* CREATE INQUIRY */
 export const createInquiry = async (req, res) => {
 	try {
@@ -24,28 +21,6 @@ export const createInquiry = async (req, res) => {
 				message,
 			},
 		});
-		try {
-			const emailList = await getEmailsByType("INQUIRY");
-
-			if (emailList && emailList.length > 0) {
-				await sendEmail({
-					to: emailList,
-					subject: "New Inquiry Received",
-					html: `
-						<h2>New Inquiry</h2>
-
-						<p><b>Name:</b> ${fullName}</p>
-						<p><b>Phone:</b> ${number}</p>
-						<p><b>Email:</b> ${emailId}</p>
-
-						<p><b>Subject:</b> ${subject}</p>
-					<p><b>Message:</b> ${message}</p>
-					`,
-				});
-			}
-		} catch (err) {
-			console.error("Inquiry email failed:", err);
-		}
 
 		res.status(200).json({
 			success: true,

backend/src/controllers/newsMedia.controller.js

@@ -7,13 +7,8 @@ export const getAllNews = async (req, res) => {
 		const page = parseInt(req.query.page);
 		const limit = parseInt(req.query.limit);
 
-		const includeImages = {
-			images: true,
-		};
-
 		if (!page && !limit) {
 			const news = await prisma.newsMedia.findMany({
-				include: includeImages,
 				orderBy: { createdAt: "desc" },
 			});
 
@@ -25,10 +20,6 @@ export const getAllNews = async (req, res) => {
 				SecondPara: n.secondPara,
 				Date: n.date,
 				Author: n.author,
-				Images: n.images.map((img) => ({
-					id: img.id,
-					image: img.url,
-				})),
 			}));
 
 			return res.status(200).json({
@@ -45,7 +36,6 @@ export const getAllNews = async (req, res) => {
 
 		const [news, total] = await Promise.all([
 			prisma.newsMedia.findMany({
-				include: includeImages,
 				orderBy: { createdAt: "desc" },
 				skip,
 				take: currentLimit,
@@ -61,10 +51,6 @@ export const getAllNews = async (req, res) => {
 			SecondPara: n.secondPara,
 			Date: n.date,
 			Author: n.author,
-			Images: n.images.map((img) => ({
-				id: img.id,
-				image: img.url,
-			})),
 		}));
 
 		return res.status(200).json({
@@ -94,7 +80,6 @@ export const getNewsById = async (req, res) => {
 
 		const n = await prisma.newsMedia.findUnique({
 			where: { id: Number(id) },
-			include: { images: true },
 		});
 
 		if (!n) {
@@ -112,10 +97,6 @@ export const getNewsById = async (req, res) => {
 			SecondPara: n.secondPara,
 			Date: n.date,
 			Author: n.author,
-			Images: n.images.map((img) => ({
-				id: img.id,
-				image: img.url,
-			})),
 		};
 
 		return res.status(200).json({
@@ -135,15 +116,7 @@ export const getNewsById = async (req, res) => {
 
 export const createNews = async (req, res) => {
 	try {
-		const {
+		const { headline, content, firstPara, secondPara, date, author } = req.body;
-			headline,
-			content,
-			firstPara,
-			secondPara,
-			date,
-			author,
-			imageUrls,
-		} = req.body;
 
 		if (!headline) {
 			return res.status(400).json({
@@ -160,13 +133,7 @@ export const createNews = async (req, res) => {
 				secondPara,
 				date: date ? new Date(date) : null,
 				author,
-				images: imageUrls
-					? {
-							create: imageUrls.map((url) => ({ url })),
-						}
-					: undefined,
 			},
-			include: { images: true },
 		});
 
 		return res.status(201).json({
@@ -188,21 +155,13 @@ export const createNews = async (req, res) => {
 export const updateNews = async (req, res) => {
 	try {
 		const { id } = req.params;
-		const { imageUrls, ...otherData } = req.body;
 
 		const news = await prisma.newsMedia.update({
 			where: { id: Number(id) },
 			data: {
-				...otherData,
+				...req.body,
 				date: req.body.date ? new Date(req.body.date) : undefined,
-				images: imageUrls
-					? {
-							deleteMany: {},
-							create: imageUrls.map((url) => ({ url })),
-						}
-					: undefined,
 			},
-			include: { images: true },
 		});
 
 		return res.status(200).json({

backend/src/routes/blog.routes.js

@@ -6,6 +6,7 @@ import {
 	updateBlog,
 	deleteBlog,
 	getAllBlogs,
+	getBlogForAdmin,
 } from "../controllers/blog.controller.js";
 
 import jwtAuthMiddleware from "../middleware/auth.js";
@@ -15,11 +16,14 @@ const router = express.Router();
 /* PUBLIC */
 
 router.get("/", getBlogs);
-router.get("/:id", getBlog);
+router.get("/:slug", getBlog);
 
 // Protected
 
 router.get("/admin/all", jwtAuthMiddleware, getAllBlogs);
+
+router.get("/admin/:id", jwtAuthMiddleware, getBlogForAdmin);
+
 router.post("/", jwtAuthMiddleware, createBlog);
 router.put("/:id", jwtAuthMiddleware, updateBlog);
 router.delete("/:id", jwtAuthMiddleware, deleteBlog);

frontend/package-lock.json

@@ -8,7 +8,6 @@
       "name": "frontend",
       "version": "0.0.0",
       "dependencies": {
-        "@bytescale/sdk": "^3.53.0",
         "@editorjs/code": "^2.9.4",
         "@editorjs/delimiter": "^1.4.2",
         "@editorjs/editorjs": "^2.31.5",
@@ -525,12 +524,6 @@
         "node": ">=6.9.0"
       }
     },
-    "node_modules/@bytescale/sdk": {
-      "version": "3.53.0",
-      "resolved": "https://registry.npmjs.org/@bytescale/sdk/-/sdk-3.53.0.tgz",
-      "integrity": "sha512-qCeNup3pSjaklXuBrO9JeKbozZEs/PjQEvuqCiOAWLBRl6lDjd0V9gRVYqyttPimXYFoV+J/7dmPWtK6RfOABQ==",
-      "license": "MIT"
-    },
     "node_modules/@codexteam/icons": {
       "version": "0.3.3",
       "resolved": "https://registry.npmjs.org/@codexteam/icons/-/icons-0.3.3.tgz",

frontend/package.json

@@ -10,7 +10,6 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@bytescale/sdk": "^3.53.0",
     "@editorjs/code": "^2.9.4",
     "@editorjs/delimiter": "^1.4.2",
     "@editorjs/editorjs": "^2.31.5",

frontend/src/App.tsx

@@ -20,6 +20,7 @@ import CandidatePage from "./pages/candidates";
 import InquiryPage from "./pages/inquiry";
 import AcademicsPage from "./pages/Academics";
 import NewsPage from "./pages/newsMedia";
+import BlogDetail from "./pages/BlogDetails";
 
 export default function App() {
 	return (
@@ -35,6 +36,7 @@ export default function App() {
 							<Route path="/department" element={<Department />} />
 							<Route path="/doctor" element={<Doctor />} />
 							<Route path="/blog" element={<Blog />} />
+							<Route path="/blog/:id" element={<BlogDetail />} />
 							<Route path="/blog/create" element={<BlogEditorPage />} />
 							<Route path="/blog/edit/:id" element={<BlogEditorPage />} />
 							<Route path="/appointment" element={<Appointment />} />

frontend/src/api/blog.ts

@@ -14,7 +14,7 @@ export const getAllBlogsApi = async () => {
 };
 
 export const getBlogByIdApi = async (id: number) => {
-	const res = await apiClient.get(`/blogs/${id}`);
+	const res = await apiClient.get(`/blogs/admin/${id}`);
 	return res.data;
 };
 

frontend/src/api/department.ts

@@ -3,7 +3,6 @@ import apiClient from "@/api/client";
 export interface Department {
 	departmentId: string;
 	name: string;
-	image?: string;
 	para1: string;
 	para2: string;
 	para3: string;

frontend/src/api/doctor.ts

@@ -3,7 +3,6 @@ import apiClient from "@/api/client";
 export interface Doctor {
 	doctorId: string;
 	name: string;
-	image?: string;
 	designation?: string;
 	workingStatus?: string;
 	qualification?: string;

frontend/src/components/BytescaleUploader/BytescaleUploader.tsx

@@ -1,109 +0,0 @@
-import { useState, useRef } from "react";
-import * as Bytescale from "@bytescale/sdk";
-import { Button } from "@/components/ui/button";
-import { User, X, Loader2 } from "lucide-react";
-
-interface BytescaleUploaderProps {
-	value: string;
-	onChange: (url: string) => void;
-	folderPath: "/doctors" | "/departments" | "/news";
-}
-
-const uploadManager = new Bytescale.UploadManager({
-	apiKey: "public_223k2cv3MyaAxBeyALCfJa8EMLek",
-});
-
-export function BytescaleUploader({ value, onChange }: BytescaleUploaderProps) {
-	const [isUploading, setIsUploading] = useState(false);
-	const fileInputRef = useRef<HTMLInputElement>(null);
-
-	const onFileSelected = async (event: React.ChangeEvent<HTMLInputElement>) => {
-		const file = event.target.files?.[0];
-		if (!file) return;
-
-		setIsUploading(true);
-		try {
-			const { fileUrl } = await uploadManager.upload({
-				data: file,
-				path: {
-					folderPath: "/doctors",
-				},
-			});
-
-			onChange(fileUrl);
-		} catch (e: any) {
-			console.error("Upload Error:", e);
-			alert(`Error:\n${e.message}`);
-		} finally {
-			setIsUploading(false);
-			if (fileInputRef.current) fileInputRef.current.value = "";
-		}
-	};
-
-	return (
-		<div className="flex flex-col gap-2 p-3 border rounded-md bg-muted/5">
-			<div className="flex items-center gap-4">
-				<div className="relative">
-					{value ? (
-						<>
-							<img
-								src={value}
-								className="w-16 h-16 rounded-full object-cover border-2 border-primary/20"
-								alt="Doctor Profile"
-							/>
-							<button
-								type="button"
-								onClick={() => onChange("")}
-								className="absolute -top-1 -right-1 bg-destructive text-white rounded-full p-0.5 shadow-sm hover:scale-110 transition-transform"
-							>
-								<X className="w-3 h-3" />
-							</button>
-						</>
-					) : (
-						<div className="w-16 h-16 rounded-full bg-muted flex items-center justify-center">
-							{isUploading ? (
-								<Loader2 className="w-8 h-8 animate-spin text-primary" />
-							) : (
-								<User className="w-8 h-8 text-muted-foreground" />
-							)}
-						</div>
-					)}
-				</div>
-
-				<input
-					type="file"
-					ref={fileInputRef}
-					onChange={onFileSelected}
-					accept="image/jpeg,image/png,image/webp"
-					className="hidden"
-				/>
-
-				<Button
-					type="button"
-					variant="outline"
-					size="sm"
-					disabled={isUploading}
-					onClick={() => fileInputRef.current?.click()}
-				>
-					{isUploading ? (
-						<>
-							<Loader2 className="mr-2 h-4 w-4 animate-spin" />
-							Uploading...
-						</>
-					) : value ? (
-						"Change Photo"
-					) : (
-						"Upload Photo"
-					)}
-				</Button>
-			</div>
-
-			{value && (
-				<p className="text-xs text-amber-600 pl-[72px]">
-					⚠️ Make sure to save the changes by clicking the "Save Changes" button
-					at the bottom.
-				</p>
-			)}
-		</div>
-	);
-}

frontend/src/pages/Blog.tsx

@@ -17,7 +17,7 @@ import {Card, CardContent, CardHeader, CardTitle} from "@/components/ui/card";
 import {Button} from "@/components/ui/button";
 import {Input} from "@/components/ui/input";
 
-import {Loader2, RefreshCw, Plus, Pencil, Trash} from "lucide-react";
+import {Loader2, RefreshCw, Plus, Pencil, Trash, Eye} from "lucide-react";
 
 interface Blog {
 	id: number;
@@ -161,6 +161,13 @@ export default function BlogPage() {
 													<Pencil className="h-4 w-4" />
 												</Button>
 
+												<Button
+													size="sm"
+													variant="secondary"
+													onClick={() => navigate(`/blog/${blog.id}`)}
+												>
+													<Eye className="h-4 w-4" />
+												</Button>
 												<Button
 													size="sm"
 													variant="destructive"

frontend/src/pages/BlogDetails.tsx

@@ -0,0 +1,74 @@
+import React, {useEffect, useState} from "react";
+import {useParams, useNavigate} from "react-router-dom";
+import axios from "axios";
+
+import {Button} from "@/components/ui/button";
+import {Card, CardContent} from "@/components/ui/card";
+import {getBlogByIdApi} from "@/api/blog";
+
+const BlogDetail = () => {
+	const {id} = useParams();
+	const navigate = useNavigate();
+	const [blog, setBlog] = useState<any>(null);
+
+	const fetchBlogById = async () => {
+		try {
+			const response = await getBlogByIdApi(Number(id));
+
+			setBlog(response);
+		} catch (error) {
+			console.error("Error fetching blog", error);
+		}
+	};
+
+	useEffect(() => {
+		fetchBlogById();
+	}, [id]); // ✅ FIXED dependency
+
+	if (!blog) {
+		return <div className="mt-40 text-center text-gray-500">Loading...</div>;
+	}
+
+	return (
+		<div className=" mx-auto flex flex-col ">
+			<Card>
+				<CardContent className="p-6 space-y-4">
+					{/* Back */}
+					<Button
+						variant="ghost"
+						className="text-black-600 p-0"
+						onClick={() => navigate(-1)}
+					>
+						← Back
+					</Button>
+
+					{/* Title */}
+					<h1 className="text-2xl md:text-4xl lg:text-5xl font-bold">
+						{blog.title}
+					</h1>
+
+					{/* Meta */}
+					<p className="text-gray-500 text-sm">
+						{blog.writer} • {new Date(blog.createdAt).toLocaleDateString()}
+					</p>
+
+					{/* Image */}
+					<img
+						src={blog.image}
+						alt={blog.title}
+						className="w-full h-[220px] md:h-[400px] object-cover rounded-md"
+					/>
+
+					{/* Content */}
+					<div className="space-y-3 text-gray-800 leading-relaxed">
+						{blog.content?.blocks?.map((block: any, index: number) => (
+							<p key={index}>{block.data?.text}</p>
+						))}
+					</div>
+				</CardContent>
+			</Card>
+		</div>
+	);
+};
+
+export default BlogDetail;

frontend/src/pages/Department.tsx

@@ -1,6 +1,5 @@
 import { useState, useEffect, useCallback } from "react";
 import { AxiosError } from "axios";
-import { BytescaleUploader } from "@/components/BytescaleUploader/BytescaleUploader";
 
 import {
 	getDepartmentsApi,
@@ -46,7 +45,6 @@ import {
 interface Department {
 	departmentId: string;
 	name: string;
-	image?: string;
 	para1: string;
 	para2: string;
 	para3: string;
@@ -73,7 +71,6 @@ export default function DepartmentPage() {
 	const [form, setForm] = useState<Department>({
 		departmentId: "",
 		name: "",
-		image: "",
 		para1: "",
 		para2: "",
 		para3: "",
@@ -135,7 +132,6 @@ export default function DepartmentPage() {
 		setForm({
 			departmentId: "",
 			name: "",
-			image: "",
 			para1: "",
 			para2: "",
 			para3: "",
@@ -397,14 +393,6 @@ export default function DepartmentPage() {
 					</DialogHeader>
 
 					<div className="space-y-4">
-						<div className="space-y-2">
-							<label className="text-sm font-semibold">Department Image</label>
-							<BytescaleUploader
-								value={form.image}
-								folderPath="/departments"
-								onChange={(url) => setForm({ ...form, image: url })}
-							/>
-						</div>
 						<Input
 							name="departmentId"
 							value={form.departmentId}

frontend/src/pages/Doctor.tsx

@@ -1,8 +1,5 @@
 import { useState, useEffect, useCallback } from "react";
 import { AxiosError } from "axios";
-
-import { BytescaleUploader } from "@/components/BytescaleUploader/BytescaleUploader";
-
 import {
 	getDoctorsApi,
 	createDoctorApi,
@@ -39,7 +36,6 @@ import {
 	Trash,
 	ChevronLeft,
 	ChevronRight,
-	User,
 } from "lucide-react";
 
 interface Department {
@@ -76,7 +72,6 @@ export default function DoctorPage() {
 	const [form, setForm] = useState<any>({
 		doctorId: "",
 		name: "",
-		image: "",
 		designation: "",
 		workingStatus: "",
 		qualification: "",
@@ -166,7 +161,6 @@ export default function DoctorPage() {
 		setForm({
 			doctorId: "",
 			name: "",
-			image: "",
 			designation: "",
 			workingStatus: "",
 			qualification: "",
@@ -183,7 +177,6 @@ export default function DoctorPage() {
 			setForm({
 				doctorId: doc.doctorId,
 				name: doc.name,
-				image: doc.image || "",
 				designation: doc.designation,
 				workingStatus: doc.workingStatus,
 				qualification: doc.qualification,
@@ -446,172 +439,155 @@ export default function DoctorPage() {
 			</Card>
 
 			<Dialog open={openModal} onOpenChange={setOpenModal}>
-				<DialogContent className="w-full !max-w-5xl h-[90vh] flex flex-col p-0 overflow-hidden">
+				<DialogContent className="w-full !max-w-5xl max-h-[90vh] overflow-y-auto">
-					<DialogHeader className="p-6 border-b bg-background z-10">
+					<DialogHeader>
 						<DialogTitle className="text-2xl">
 							{editing ? "Edit Doctor" : "Add Doctor"}
 						</DialogTitle>
 					</DialogHeader>
 
-					<div className="flex-1 overflow-y-auto p-6">
+					<div className="grid grid-cols-1 md:grid-cols-2 gap-8 mt-6">
-						<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+						<div className="space-y-6">
-							<div className="space-y-6">
+							<h3 className="font-bold text-base border-b pb-2">
-								<h3 className="font-bold text-base border-b pb-2">
+								Basic Information
-									Basic Information
+							</h3>
-								</h3>
+							<div className="space-y-4">
-								<div className="space-y-4">
+								<div className="space-y-1">
-									<div className="space-y-2">
+									<label className="text-sm font-semibold">Doctor ID</label>
-										<label className="text-sm font-semibold">
+									<Input
-											Doctor Photo
+										name="doctorId"
-										</label>
+										placeholder="GG-DOC-001"
-										<BytescaleUploader
+										value={form.doctorId}
-											value={form.image}
+										onChange={handleChange}
-											folderPath="/doctors"
+										disabled={!!editing}
-											onChange={(url) => setForm({ ...form, image: url })}
+										className="text-base"
-										/>
+									/>
-									</div>
-
-									<div className="space-y-1">
-										<label className="text-sm font-semibold">Doctor ID</label>
-										<Input
-											name="doctorId"
-											placeholder="GG-DOC-001"
-											value={form.doctorId}
-											onChange={handleChange}
-											disabled={!!editing}
-											className="text-base"
-										/>
-									</div>
-									<div className="space-y-1">
-										<label className="text-sm font-semibold">Full Name</label>
-										<Input
-											name="name"
-											placeholder="Dr. John Doe"
-											value={form.name}
-											onChange={handleChange}
-											className="text-base"
-										/>
-									</div>
-									<div className="space-y-1">
-										<label className="text-sm font-semibold">Designation</label>
-										<Input
-											name="designation"
-											placeholder="Senior Consultant"
-											value={form.designation}
-											onChange={handleChange}
-											className="text-base"
-										/>
-									</div>
-									<div className="space-y-1">
-										<label className="text-sm font-semibold">
-											Working Status
-										</label>
-										<Input
-											name="workingStatus"
-											placeholder="Active / On Call"
-											value={form.workingStatus}
-											onChange={handleChange}
-											className="text-base"
-										/>
-									</div>
-									<div className="space-y-1">
-										<label className="text-sm font-semibold">
-											Qualification
-										</label>
-										<Input
-											name="qualification"
-											placeholder="MBBS, MD"
-											value={form.qualification}
-											onChange={handleChange}
-											className="text-base"
-										/>
-									</div>
 								</div>
-
+								<div className="space-y-1">
-								<div className="p-5 border rounded-md bg-muted/20">
+									<label className="text-sm font-semibold">Full Name</label>
-									<p className="text-base font-bold mb-4">Assign Departments</p>
+									<Input
-									<div className="grid grid-cols-2 gap-3">
+										name="name"
-										{departments.map((dep) => {
+										placeholder="Dr. John Doe"
-											const isSelected = form.departments.some(
+										value={form.name}
-												(d: any) => d.departmentId === dep.departmentId,
+										onChange={handleChange}
-											);
+										className="text-base"
-											return (
+									/>
-												<Button
+								</div>
-													key={dep.departmentId}
+								<div className="space-y-1">
-													type="button"
+									<label className="text-sm font-semibold">Designation</label>
-													variant={isSelected ? "default" : "outline"}
+									<Input
-													size="sm"
+										name="designation"
-													className="justify-start text-sm min-h-11 whitespace-normal break-words text-left py-2"
+										placeholder="Senior Consultant"
-													onClick={() =>
+										value={form.designation}
-														handleDepartmentToggle(dep.departmentId)
+										onChange={handleChange}
-													}
+										className="text-base"
-												>
+									/>
-													{dep.name}
+								</div>
-												</Button>
+								<div className="space-y-1">
-											);
+									<label className="text-sm font-semibold">
-										})}
+										Working Status
-									</div>
+									</label>
+									<Input
+										name="workingStatus"
+										placeholder="Active / On Call"
+										value={form.workingStatus}
+										onChange={handleChange}
+										className="text-base"
+									/>
+								</div>
+								<div className="space-y-1">
+									<label className="text-sm font-semibold">Qualification</label>
+									<Input
+										name="qualification"
+										placeholder="MBBS, MD"
+										value={form.qualification}
+										onChange={handleChange}
+										className="text-base"
+									/>
 								</div>
 							</div>
 
-							<div className="space-y-6">
+							<div className="p-5 border rounded-md bg-muted/20">
-								<h3 className="font-bold text-base border-b pb-2">
+								<p className="text-base font-bold mb-4">Assign Departments</p>
-									Working Hours / Timing
+								<div className="grid grid-cols-2 gap-3">
-								</h3>
+									{departments.map((dep) => {
-								{form.departments.length === 0 ? (
+										const isSelected = form.departments.some(
-									<div className="text-base text-muted-foreground italic py-24 text-center border-2 border-dashed rounded-lg">
+											(d: any) => d.departmentId === dep.departmentId,
-										Select a department to configure timing slots
+										);
-									</div>
+										return (
-								) : (
+											<Button
-									<div className="space-y-8">
+												key={dep.departmentId}
-										{form.departments.map((dep: any) => {
+												type="button"
-											const depName = departments.find(
+												variant={isSelected ? "default" : "outline"}
-												(d) => d.departmentId === dep.departmentId,
+												size="sm"
-											)?.name;
+												className="justify-start text-sm h-9"
-											return (
+												onClick={() => handleDepartmentToggle(dep.departmentId)}
-												<div
+											>
-													key={dep.departmentId}
+												{dep.name}
-													className="space-y-4 p-5 border rounded-lg bg-background shadow-sm"
+											</Button>
-												>
+										);
-													<div className="flex items-center justify-between">
+									})}
-														<p className="font-bold text-base text-primary">
+								</div>
-															{depName}
+							</div>
-														</p>
+						</div>
-														<Badge variant="outline" className="text-xs">
+
-															Timing Slot
+						<div className="space-y-6">
-														</Badge>
+							<h3 className="font-bold text-base border-b pb-2">
-													</div>
+								Working Hours / Timing
-													<div className="grid grid-cols-1 sm:grid-cols-2 gap-x-6 gap-y-3">
+							</h3>
-														{DAYS.map((day) => (
+							{form.departments.length === 0 ? (
-															<div key={day} className="space-y-1">
+								<div className="text-base text-muted-foreground italic py-24 text-center border-2 border-dashed rounded-lg">
-																<label className="text-xs uppercase font-bold text-muted-foreground">
+									Select a department to configure timing slots
-																	{day}
+								</div>
-																</label>
+							) : (
-																<Input
+								<div className="space-y-8">
-																	className="h-9 text-sm"
+									{form.departments.map((dep: any) => {
-																	placeholder="e.g. 09:00 AM - 01:00 PM"
+										const depName = departments.find(
-																	value={dep.timing?.[day] || ""}
+											(d) => d.departmentId === dep.departmentId,
-																	onChange={(e) =>
+										)?.name;
-																		handleTimingChange(
+										return (
-																			dep.departmentId,
+											<div
-																			day,
+												key={dep.departmentId}
-																			e.target.value,
+												className="space-y-4 p-5 border rounded-lg bg-background shadow-sm"
-																		)
+											>
-																	}
+												<div className="flex items-center justify-between">
-																/>
+													<p className="font-bold text-base text-primary">
-															</div>
+														{depName}
-														))}
+													</p>
-													</div>
+													<Badge variant="outline" className="text-xs">
+														Timing Slot
+													</Badge>
 												</div>
-											);
+												<div className="grid grid-cols-1 sm:grid-cols-2 gap-x-6 gap-y-3">
-										})}
+													{DAYS.map((day) => (
-									</div>
+														<div key={day} className="space-y-1">
-								)}
+															<label className="text-xs uppercase font-bold text-muted-foreground">
-							</div>
+																{day}
+															</label>
+															<Input
+																className="h-9 text-sm"
+																placeholder="e.g. 09:00 AM - 01:00 PM"
+																value={dep.timing?.[day] || ""}
+																onChange={(e) =>
+																	handleTimingChange(
+																		dep.departmentId,
+																		day,
+																		e.target.value,
+																	)
+																}
+															/>
+														</div>
+													))}
+												</div>
+											</div>
+										);
+									})}
+								</div>
+							)}
 						</div>
 					</div>
 
-					<DialogFooter className="p-6 border-t bg-background z-10 mt-0">
+					<DialogFooter className="mt-10 pt-6 border-t">
 						<Button
 							variant="ghost"
 							onClick={() => setOpenModal(false)}

frontend/src/pages/email.tsx

@@ -1,4 +1,4 @@
-import {useState, useEffect, useCallback} from "react";
+import { useState, useEffect, useCallback } from "react";
 
 import {
 	getEmailConfigsApi,
@@ -16,9 +16,9 @@ import {
 	TableRow,
 } from "@/components/ui/table";
 
-import {Card, CardContent, CardHeader, CardTitle} from "@/components/ui/card";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import {Button} from "@/components/ui/button";
+import { Button } from "@/components/ui/button";
-import {Input} from "@/components/ui/input";
+import { Input } from "@/components/ui/input";
 
 import {
 	Dialog,
@@ -28,7 +28,7 @@ import {
 	DialogFooter,
 } from "@/components/ui/dialog";
 
-import {Loader2, Plus, Pencil, Trash, RefreshCw} from "lucide-react";
+import { Loader2, Plus, Pencil, Trash, RefreshCw } from "lucide-react";
 
 export default function EmailPage() {
 	const [emails, setEmails] = useState<any[]>([]);
@@ -69,7 +69,7 @@ export default function EmailPage() {
 	);
 
 	function handleChange(e: any) {
-		setForm({...form, [e.target.name]: e.target.value});
+		setForm({ ...form, [e.target.name]: e.target.value });
 	}
 
 	function openAdd() {
@@ -181,16 +181,14 @@ export default function EmailPage() {
 											<Button
 												size="sm"
 												variant="outline"
-												onClick={() => openEdit(item)}
+												onClick={() => openEdit(item)}>
-											>
 												<Pencil className="h-4 w-4" />
 											</Button>
 
 											<Button
 												size="sm"
 												variant="destructive"
-												onClick={() => handleDelete(item.id)}
+												onClick={() => handleDelete(item.id)}>
-											>
 												<Trash className="h-4 w-4" />
 											</Button>
 										</TableCell>
@@ -227,12 +225,10 @@ export default function EmailPage() {
 							name="type"
 							value={form.type}
 							onChange={handleChange}
-							className="border rounded px-2 py-2 w-full"
+							className="border rounded px-2 py-2 w-full">
-						>
 							<option value="APPOINTMENT">APPOINTMENT</option>
 							<option value="CANDIDATE">CANDIDATE</option>
 							<option value="ACADEMICS">ACADEMICS</option>
-							<option value="INQUIRY">INQUIRY</option>
 						</select>
 
 						<select
@@ -244,8 +240,7 @@ export default function EmailPage() {
 									isActive: e.target.value === "true",
 								})
 							}
-							className="border rounded px-2 py-2 w-full"
+							className="border rounded px-2 py-2 w-full">
-						>
 							<option value="true">Active</option>
 							<option value="false">Inactive</option>
 						</select>

frontend/src/pages/newsMedia.tsx

@@ -1,5 +1,4 @@
 import { useState, useEffect, useCallback } from "react";
-import { BytescaleUploader } from "@/components/BytescaleUploader/BytescaleUploader";
 
 import {
 	getNewsApi,
@@ -40,8 +39,6 @@ import {
 	ChevronLeft,
 	ChevronRight,
 	Newspaper,
-	ImageIcon,
-	X,
 } from "lucide-react";
 
 export default function NewsPage() {
@@ -63,7 +60,6 @@ export default function NewsPage() {
 	const [form, setForm] = useState({
 		headline: "",
 		content: "",
-		imageUrls: [] as string[],
 		firstPara: "",
 		secondPara: "",
 		date: "",
@@ -100,19 +96,11 @@ export default function NewsPage() {
 		setForm({ ...form, [e.target.name]: e.target.value });
 	}
 
-	function removeImageUrl(index: number) {
-		setForm((prev) => ({
-			...prev,
-			imageUrls: prev.imageUrls.filter((_, i) => i !== index),
-		}));
-	}
-
 	function openAdd() {
 		setEditing(null);
 		setForm({
 			headline: "",
 			content: "",
-			imageUrls: [],
 			firstPara: "",
 			secondPara: "",
 			date: "",
@@ -126,7 +114,6 @@ export default function NewsPage() {
 		setForm({
 			headline: item.Headline || "",
 			content: item.Content || "",
-			imageUrls: item.Images ? item.Images.map((img: any) => img.image) : [],
 			firstPara: item.FirstPara || "",
 			secondPara: item.SecondPara || "",
 			date: item.Date ? item.Date.split("T")[0] : "",
@@ -218,9 +205,6 @@ export default function NewsPage() {
 									<TableHead className="w-[80px] bg-background font-bold">
 										ID
 									</TableHead>
-									<TableHead className="w-[100px] bg-background font-bold">
-										Cover
-									</TableHead>
 									<TableHead className="w-[280px] bg-background font-bold">
 										Headline
 									</TableHead>
@@ -242,14 +226,14 @@ export default function NewsPage() {
 							<TableBody>
 								{loading ? (
 									<TableRow>
-										<TableCell colSpan={7} className="text-center py-10">
+										<TableCell colSpan={6} className="text-center py-10">
 											<Loader2 className="h-8 w-8 animate-spin mx-auto text-primary" />
 										</TableCell>
 									</TableRow>
 								) : filteredNews.length === 0 ? (
 									<TableRow>
 										<TableCell
-											colSpan={7}
+											colSpan={6}
 											className="text-center text-muted-foreground py-10 text-base"
 										>
 											No news articles found
@@ -261,19 +245,6 @@ export default function NewsPage() {
 											<TableCell className="font-mono text-xs">
 												{item.Id}
 											</TableCell>
-											<TableCell>
-												{item.Images?.[0] ? (
-													<img
-														src={item.Images[0].image}
-														className="w-10 h-10 object-cover rounded border"
-														alt="cover"
-													/>
-												) : (
-													<div className="w-10 h-10 bg-muted flex items-center justify-center rounded">
-														<ImageIcon className="w-4 h-4 text-muted-foreground" />
-													</div>
-												)}
-											</TableCell>
 											<TableCell>
 												<div
 													className="font-semibold text-base line-clamp-2"
@@ -372,20 +343,20 @@ export default function NewsPage() {
 			</Card>
 
 			<Dialog open={openModal} onOpenChange={setOpenModal}>
-				<DialogContent className="w-full !max-w-6xl max-h-[90vh] overflow-y-auto">
+				<DialogContent className="w-full !max-w-5xl max-h-[90vh] overflow-y-auto">
 					<DialogHeader>
 						<DialogTitle className="text-2xl font-bold">
 							{editing ? "Edit News Article" : "Add New News Article"}
 						</DialogTitle>
 					</DialogHeader>
 
-					<div className="grid grid-cols-1 lg:grid-cols-3 gap-8 mt-6">
+					<div className="grid grid-cols-1 md:grid-cols-2 gap-8 mt-6">
-						<div className="lg:col-span-2 space-y-6">
+						<div className="space-y-6">
 							<h3 className="font-bold text-base border-b pb-2 text-primary">
 								Article Information
 							</h3>
-							<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+							<div className="space-y-4">
-								<div className="space-y-1 col-span-2">
+								<div className="space-y-1">
 									<label className="text-sm font-semibold">Headline</label>
 									<Input
 										name="headline"
@@ -414,75 +385,42 @@ export default function NewsPage() {
 									/>
 								</div>
 							</div>
-							<div className="space-y-1">
+							<div className="space-y-1 pt-2">
 								<label className="text-sm font-semibold">Intro Paragraph</label>
 								<Textarea
 									name="firstPara"
 									value={form.firstPara}
 									onChange={handleChange}
-									className="min-h-[100px] text-base"
+									className="min-h-[140px] text-base"
-								/>
-							</div>
-							<div className="space-y-1">
-								<label className="text-sm font-semibold">
-									Full Story Content
-								</label>
-								<Textarea
-									name="content"
-									value={form.content}
-									onChange={handleChange}
-									className="min-h-[200px] text-base"
 								/>
 							</div>
 						</div>
 
-						{/* Image Management Sidebar */}
+						<div className="space-y-6">
-						<div className="space-y-6 border-l pl-6">
+							<h3 className="font-bold text-base border-b pb-2 text-primary">
-							<h3 className="font-bold text-base border-b pb-2 text-primary flex items-center gap-2">
+								Story Details
-								<ImageIcon className="w-4 h-4" /> Gallery Management
 							</h3>
-
 							<div className="space-y-4">
-								<label className="text-sm font-semibold">Upload Images</label>
+								<div className="space-y-1">
-								<BytescaleUploader
+									<label className="text-sm font-semibold">
-									value=""
+										Second Paragraph
-									folderPath="/news"
+									</label>
-									onChange={(url) => {
+									<Textarea
-										if (url) {
+										name="secondPara"
-											setForm((prev) => ({
+										value={form.secondPara}
-												...prev,
+										onChange={handleChange}
-												imageUrls: [...prev.imageUrls, url],
+										className="min-h-[140px] text-base"
-											}));
+									/>
-										}
+								</div>
-									}}
+								<div className="space-y-1">
-								/>
+									<label className="text-sm font-semibold">Content</label>
-
+									<Textarea
-								<div className="grid grid-cols-2 gap-2 max-h-[400px] overflow-y-auto pr-2 mt-4">
+										name="content"
-									{form.imageUrls.map((url, index) => (
+										value={form.content}
-										<div
+										onChange={handleChange}
-											key={index}
+										className="min-h-[200px] text-base"
-											className="relative group border rounded-lg overflow-hidden h-24 bg-muted"
+									/>
-										>
-											<img
-												src={url}
-												alt="upload"
-												className="w-full h-full object-cover"
-											/>
-											<button
-												type="button"
-												onClick={() => removeImageUrl(index)}
-												className="absolute top-1 right-1 bg-destructive text-white rounded-full p-1 opacity-0 group-hover:opacity-100 transition-opacity shadow-sm"
-											>
-												<X className="w-3 h-3" />
-											</button>
-										</div>
-									))}
 								</div>
-								{form.imageUrls.length === 0 && (
-									<p className="text-xs text-muted-foreground text-center py-10 border-2 border-dashed rounded-lg">
-										No images uploaded yet.
-									</p>
-								)}
 							</div>
 						</div>
 					</div>
@@ -532,17 +470,6 @@ export default function NewsPage() {
 								</div>
 							</div>
 
-							<div className="grid grid-cols-3 md:grid-cols-4 gap-2">
-								{viewData.Images?.map((img: any, i: number) => (
-									<img
-										key={i}
-										src={img.image}
-										className="w-full h-24 object-cover rounded-md border"
-										alt="gallery"
-									/>
-								))}
-							</div>
-
 							<div className="space-y-5 leading-relaxed text-base">
 								<div className="bg-muted/30 p-4 rounded-lg border-l-4 border-primary">
 									<p className="whitespace-pre-line">{viewData.FirstPara}</p>