feat/add blog

Reviewed-on: #6

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/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/schema.prisma

@@ -93,6 +93,7 @@ model Blog {
   image    String?
   content  Json
   isActive Boolean @default(true)
+  slug     String @unique
 
   createdAt DateTime @default(now())
   updatedAt DateTime @updatedAt
@@ -149,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
@@ -171,24 +172,23 @@ 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?
@@ -197,8 +197,8 @@ model NewsMedia {
   author     String?
   date       DateTime?
 
-  isActive   Boolean  @default(true)
+  isActive Boolean @default(true)
 
-  createdAt  DateTime @default(now())
+  createdAt DateTime @default(now())
-  updatedAt  DateTime @updatedAt
+  updatedAt DateTime @updatedAt
-}
+}

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

@@ -29,6 +29,53 @@ export const getAllDepartments = async (req, res) => {
 	}
 };
 
+export const getDepartmentByName = async (req, res) => {
+	try {
+		const {name} = req.query;
+
+		if (!name) {
+			return res.status(400).json({
+				success: false,
+				message: "Department name is required",
+			});
+		}
+
+		const department = await prisma.department.findFirst({
+			where: {
+				name: name,
+			},
+		});
+
+		if (!department) {
+			return res.status(404).json({
+				success: false,
+				message: "Department not found",
+			});
+		}
+
+		const response = {
+			departmentId: department.departmentId,
+			name: department.name,
+			para1: department.para1 ?? "",
+			para2: department.para2 ?? "",
+			para3: department.para3 ?? "",
+			facilities: department.facilities ?? "",
+			services: department.services ?? "",
+		};
+
+		return res.status(200).json({
+			success: true,
+			data: [response],
+		});
+	} catch (error) {
+		console.error(error);
+		return res.status(500).json({
+			success: false,
+			message: "Failed to fetch department",
+		});
+	}
+};
+
 export async function createDepartment(req, res) {
 	try {
 		const {departmentId, name, para1, para2, para3, facilities, services} =

backend/src/controllers/doctor.controller.js

@@ -16,38 +16,35 @@ export const getAllDoctors = async (req, res) => {
 			orderBy: {name: "asc"},
 		});
 
-		const formatted = doctors.map((doc, index) => {
+		const formatted = doctors.map((doc, index) => ({
-			return {
+			SL_NO: String(index + 1),
-				SL_NO: String(index + 1),
+			doctorId: doc.doctorId,
-				doctorId: doc.doctorId,
+			name: doc.name,
-				name: doc.name,
+			designation: doc.designation,
-				designation: doc.designation,
+			workingStatus: doc.workingStatus,
-				workingStatus: doc.workingStatus,
+			qualification: doc.qualification,
-				qualification: doc.qualification,
 
-				departments: doc.departments.map((d) => {
+			departments: doc.departments.map((d) => {
-					const t = d.timing || {};
+				const t = d.timing || {};
 
-					const timingArray = [
+				const timingArray = [
-						t.monday && `Monday ${t.monday}`,
+					t.monday && `Monday ${t.monday}`,
-						t.tuesday && `Tuesday ${t.tuesday}`,
+					t.tuesday && `Tuesday ${t.tuesday}`,
-						t.wednesday && `Wednesday ${t.wednesday}`,
+					t.wednesday && `Wednesday ${t.wednesday}`,
-						t.thursday && `Thursday ${t.thursday}`,
+					t.thursday && `Thursday ${t.thursday}`,
-						t.friday && `Friday ${t.friday}`,
+					t.friday && `Friday ${t.friday}`,
-						t.saturday && `Saturday ${t.saturday}`,
+					t.saturday && `Saturday ${t.saturday}`,
-						t.sunday && `Sunday ${t.sunday}`,
+					t.sunday && `Sunday ${t.sunday}`,
-						t.additional && t.additional,
+					t.additional && t.additional,
-					].filter(Boolean);
+				].filter(Boolean);
 
-					return {
+				return {
-						departmentId: d.department.departmentId,
+					departmentId: d.department.departmentId,
-						departmentName: d.department.name,
+					departmentName: d.department.name,
-
+					timing: timingArray.join(" & "),
-						timing: timingArray.join(" & "),
+				};
-					};
+			}),
-				}),
+		}));
-			};
-		});
 
 		res.status(200).json({
 			success: true,
@@ -113,6 +110,54 @@ export const getDoctorByDoctorId = async (req, res) => {
 	}
 };
 
+// get doctors by department
+export const getDoctorsByDepartmentId = async (req, res) => {
+	try {
+		const {Department_ID} = req.query;
+
+		if (!Department_ID) {
+			return res.status(400).json({
+				success: false,
+				message: "Department_ID is required",
+			});
+		}
+
+		const department = await prisma.department.findUnique({
+			where: {departmentId: Department_ID},
+		});
+
+		if (!department) {
+			return res.status(404).json({
+				success: false,
+				message: "Department not found",
+			});
+		}
+
+		const doctors = await prisma.doctorDepartment.findMany({
+			where: {departmentId: department.id},
+			include: {
+				doctor: true,
+			},
+		});
+
+		const result = doctors.map((d) => ({
+			GG_ID: d.doctor.doctorId,
+			Name: d.doctor.name,
+		}));
+
+		res.status(200).json({
+			success: true,
+			data: result,
+		});
+	} catch (error) {
+		console.error(error);
+		res.status(500).json({
+			success: false,
+			message: "Failed to fetch doctors",
+		});
+	}
+};
+
 // add doctors
 export const createDoctor = async (req, res) => {
 	try {
@@ -184,20 +229,14 @@ export const updateDoctor = async (req, res) => {
 		});
 
 		if (!doctor) {
-			return res.status(404).json({
+			return res
-				success: false,
+				.status(404)
-				message: "Doctor not found",
+				.json({success: false, message: "Doctor not found"});
-			});
 		}
 
 		await prisma.doctor.update({
 			where: {id: doctor.id},
-			data: {
+			data: {name, designation, workingStatus, qualification},
-				name,
-				designation,
-				workingStatus,
-				qualification,
-			},
 		});
 
 		const oldRelations = await prisma.doctorDepartment.findMany({
@@ -229,25 +268,24 @@ export const updateDoctor = async (req, res) => {
 			});
 
 			if (dep.timing) {
+				const {id, doctorDepartmentId, createdAt, updatedAt, ...cleanTiming} =
+					dep.timing;
+
 				await prisma.doctorTiming.create({
 					data: {
 						doctorDepartmentId: doctorDepartment.id,
-						...dep.timing,
+						...cleanTiming,
 					},
 				});
 			}
 		}
 
-		res.status(200).json({
+		res
-			success: true,
+			.status(200)
-			message: "Doctor updated successfully",
+			.json({success: true, message: "Doctor updated successfully"});
-		});
 	} catch (error) {
-		console.error(error);
+		console.error("Update Error:", error);
-		res.status(500).json({
+		res.status(500).json({success: false, message: "Failed to update doctor"});
-			success: false,
-			message: "Failed to update doctor",
-		});
 	}
 };
 //delete doctor
@@ -256,13 +294,6 @@ export const deleteDoctor = async (req, res) => {
 	try {
 		const {doctorId} = req.params;
 
-		if (!doctorId) {
-			return res.status(400).json({
-				success: false,
-				message: "Doctor ID is required",
-			});
-		}
-
 		const doctor = await prisma.doctor.findUnique({
 			where: {doctorId},
 		});
@@ -270,7 +301,7 @@ export const deleteDoctor = async (req, res) => {
 		if (!doctor) {
 			return res.status(404).json({
 				success: false,
-				message: `Doctor with ID ${doctorId} not found`,
+				message: "Doctor not found",
 			});
 		}
 
@@ -294,7 +325,7 @@ export const deleteDoctor = async (req, res) => {
 
 		res.status(200).json({
 			success: true,
-			message: `Doctor ${doctorId} deleted successfully`,
+			message: "Doctor deleted successfully",
 		});
 	} catch (error) {
 		console.error(error);
@@ -320,23 +351,19 @@ export const getDoctorTimings = async (req, res) => {
 		});
 
 		const result = doctors.map((doc) => {
-			let timing = {};
+			const timing = doc.departments[0]?.timing || {};
-
-			if (doc.departments.length > 0) {
-				timing = doc.departments[0].timing ?? {};
-			}
 
 			return {
 				Doctor_ID: doc.doctorId,
 				Doctor: doc.name,
-				Monday: timing?.monday ?? "",
+				Monday: timing.monday || "",
-				Tuesday: timing?.tuesday ?? "",
+				Tuesday: timing.tuesday || "",
-				Wednesday: timing?.wednesday ?? "",
+				Wednesday: timing.wednesday || "",
-				Thursday: timing?.thursday ?? "",
+				Thursday: timing.thursday || "",
-				Friday: timing?.friday ?? "",
+				Friday: timing.friday || "",
-				Saturday: timing?.saturday ?? "",
+				Saturday: timing.saturday || "",
-				Sunday: timing?.sunday ?? "",
+				Sunday: timing.sunday || "",
-				Additional: timing?.additional ?? "",
+				Additional: timing.additional || "",
 			};
 		});
 
@@ -380,26 +407,11 @@ export const getDoctorTimingById = async (req, res) => {
 		const result = {
 			doctorId: doctor.doctorId,
 			doctorName: doctor.name,
-
+			departments: doctor.departments.map((d) => ({
-			departments: doctor.departments.map((d) => {
+				departmentId: d.department.departmentId,
-				const t = d.timing || {};
+				departmentName: d.department.name,
-
+				timing: d.timing || {},
-				return {
+			})),
-					departmentId: d.department.departmentId,
-					departmentName: d.department.name,
-
-					timing: {
-						monday: t.monday || "",
-						tuesday: t.tuesday || "",
-						wednesday: t.wednesday || "",
-						thursday: t.thursday || "",
-						friday: t.friday || "",
-						saturday: t.saturday || "",
-						sunday: t.sunday || "",
-						additional: t.additional || "",
-					},
-				};
-			}),
 		};
 
 		res.status(200).json({

backend/src/routes/academicsResearch.routes.js

@@ -11,8 +11,8 @@ import jwtAuthMiddleware from "../middleware/auth.js";
 const router = express.Router();
 
 router.post("/", createAcademicsResearch);
-router.get("/getAll", getAcademicsResearch);
+router.get("/getAll", jwtAuthMiddleware, getAcademicsResearch);
-router.get("/:id", getSingleAcademicsResearch);
+router.get("/:id", jwtAuthMiddleware, getSingleAcademicsResearch);
 router.delete("/:id", jwtAuthMiddleware, deleteAcademicsResearch);
 
 export default router;

backend/src/routes/appointment.routes.js

@@ -13,11 +13,11 @@ const router = express.Router();
 
 /* PUBLIC */
 
-router.get("/getall", getAppointments);
+router.get("/getall", jwtAuthMiddleware, getAppointments);
 router.post("/", createAppointment);
 
-router.get("/:id", getAppointment);
+router.get("/:id", jwtAuthMiddleware, getAppointment);
-router.patch("/:id", updateAppointment);
+router.patch("/:id", jwtAuthMiddleware, updateAppointment);
 router.delete("/:id", jwtAuthMiddleware, deleteAppointment);
 
 export default router;

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

backend/src/routes/candidate.routes.js

@@ -13,13 +13,13 @@ import jwtAuthMiddleware from "../middleware/auth.js";
 const router = express.Router();
 
 /* PUBLIC */
-
-router.get("/getAll", getCandidates);
-router.get("/:id", getCandidate);
-router.get("/career/:careerId", getCandidatesByCareer);
-
 router.post("/", createCandidate);
-router.patch("/:id", updateCandidate);
+
+router.get("/getAll", jwtAuthMiddleware, getCandidates);
+router.get("/:id", jwtAuthMiddleware, getCandidate);
+router.get("/career/:careerId", jwtAuthMiddleware, getCandidatesByCareer);
+
+router.patch("/:id", jwtAuthMiddleware, updateCandidate);
 router.delete("/:id", jwtAuthMiddleware, deleteCandidate);
 
 export default router;

backend/src/routes/career.routes.js

@@ -6,12 +6,14 @@ import {
 	deleteCareer,
 } from "../controllers/career.controller.js";
 
+import jwtAuthMiddleware from "../middleware/auth.js";
+
 const router = express.Router();
 
 router.get("/getAll", getAllCareers);
 
-router.post("/", createCareer);
+router.post("/", jwtAuthMiddleware, createCareer);
-router.patch("/:id", updateCareer);
+router.patch("/:id", jwtAuthMiddleware, updateCareer);
-router.delete("/:id", deleteCareer);
+router.delete("/:id", jwtAuthMiddleware, deleteCareer);
 
 export default router;

backend/src/routes/department.routes.js

@@ -1,6 +1,7 @@
 import express from "express";
 import {
 	getAllDepartments,
+	getDepartmentByName,
 	createDepartment,
 	updateDepartment,
 	deleteDepartment,
@@ -11,6 +12,7 @@ const router = express.Router();
 
 // Public
 router.get("/getAll", getAllDepartments);
+router.get("/search", getDepartmentByName);
 
 // Protected
 router.post("/", jwtAuthMiddleware, createDepartment);

backend/src/routes/doctor.routes.js

@@ -7,6 +7,7 @@ import {
 	getDoctorTimings,
 	getDoctorTimingById,
 	getDoctorByDoctorId,
+	getDoctorsByDepartmentId,
 } from "../controllers/doctor.controller.js";
 
 import jwtAuthMiddleware from "../middleware/auth.js";
@@ -14,9 +15,10 @@ import jwtAuthMiddleware from "../middleware/auth.js";
 const router = express.Router();
 
 router.get("/getAll", getAllDoctors);
-router.get("/:doctorId", getDoctorByDoctorId);
+router.get("/search", getDoctorsByDepartmentId);
 router.get("/getTimings", getDoctorTimings);
 router.get("/getTimings/:doctorId", getDoctorTimingById);
+router.get("/:doctorId", getDoctorByDoctorId);
 
 router.post("/", jwtAuthMiddleware, createDoctor);
 router.patch("/:doctorId", jwtAuthMiddleware, updateDoctor);

backend/src/routes/inquiry.routes.js

@@ -12,8 +12,8 @@ const router = express.Router();
 
 router.post("/", createInquiry);
 
-router.get("/getAll", getInquiries);
+router.get("/getAll", jwtAuthMiddleware, getInquiries);
-router.get("/:id", getInquiry);
+router.get("/:id", jwtAuthMiddleware, getInquiry);
 router.delete("/:id", jwtAuthMiddleware, deleteInquiry);
 
 export default router;

frontend/package-lock.json

@@ -115,7 +115,6 @@
       "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.29.0.tgz",
       "integrity": "sha512-CGOfOJqWjg2qW/Mb6zNsDm+u5vFQ8DxXfbM09z69p5Z6+mE1ikP2jUXw+j42Pf1XTYED2Rni5f95npYeuwMDQA==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.29.0",
         "@babel/generator": "^7.29.0",
@@ -1760,7 +1759,6 @@
       "resolved": "https://registry.npmjs.org/@noble/ciphers/-/ciphers-1.3.0.tgz",
       "integrity": "sha512-2I0gnIVPtfnMw9ee9h1dJG7tp81+8Ob3OJb3Mv37rx5L40/b0i7djjCVvGOVqc9AEIQyvyu1i6ypKdFw8R8gQw==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": "^14.21.3 || >=16"
       },
@@ -4093,7 +4091,6 @@
       "integrity": "sha512-GYDxsZi3ChgmckRT9HPU0WEhKLP08ev/Yfcq2AstjrDASOYCSXeyjDsHg4v5t4jOj7cyDX3vmprafKlWIG9MXQ==",
       "devOptional": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "undici-types": "~7.16.0"
       }
@@ -4104,7 +4101,6 @@
       "integrity": "sha512-ilcTH/UniCkMdtexkoCN0bI7pMcJDvmQFPvuPvmEaYA/NSfFTAgdUSLAoVjaRJm7+6PvcM+q1zYOwS4wTYMF9w==",
       "devOptional": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "csstype": "^3.2.2"
       }
@@ -4115,7 +4111,6 @@
       "integrity": "sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ==",
       "devOptional": true,
       "license": "MIT",
-      "peer": true,
       "peerDependencies": {
         "@types/react": "^19.2.0"
       }
@@ -4177,7 +4172,6 @@
       "integrity": "sha512-XZzOmihLIr8AD1b9hL9ccNMzEMWt/dE2u7NyTY9jJG6YNiNthaD5XtUHVF2uCXZ15ng+z2hT3MVuxnUYhq6k1g==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@typescript-eslint/scope-manager": "8.57.0",
         "@typescript-eslint/types": "8.57.0",
@@ -4468,7 +4462,6 @@
       "integrity": "sha512-UVJyE9MttOsBQIDKw1skb9nAwQuR5wuGD3+82K6JgJlm/Y+KI92oNsMNGZCYdDsVtRHSak0pcV5Dno5+4jh9sw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -4728,7 +4721,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.9.0",
         "caniuse-lite": "^1.0.30001759",
@@ -5558,7 +5550,6 @@
       "integrity": "sha512-XoMjdBOwe/esVgEvLmNsD3IRHkm7fbKIUGvrleloJXUZgDHig2IPWNniv+GwjyJXzuNqVjlr5+4yVUZjycJwfQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.8.0",
         "@eslint-community/regexpp": "^4.12.1",
@@ -5811,7 +5802,6 @@
       "resolved": "https://registry.npmjs.org/express/-/express-5.2.1.tgz",
       "integrity": "sha512-hIS4idWWai69NezIdRt2xFVofaF4j+6INOpJlVOLDO8zXGpUVEVzIYk12UUi2JzjEzWL3IOAxcTubgz9Po0yXw==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "accepts": "^2.0.0",
         "body-parser": "^2.2.1",
@@ -6466,7 +6456,6 @@
       "resolved": "https://registry.npmjs.org/hono/-/hono-4.12.7.tgz",
       "integrity": "sha512-jq9l1DM0zVIvsm3lv9Nw9nlJnMNPOcAtsbsgiUhWcFzPE99Gvo6yRTlszSLLYacMeQ6quHD6hMfId8crVHvexw==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=16.9.0"
       }
@@ -8131,7 +8120,6 @@
       "resolved": "https://registry.npmjs.org/react/-/react-19.2.4.tgz",
       "integrity": "sha512-9nfp2hYpCwOjAN+8TZFGhtWEwgvWHXqESH8qT89AT/lWklpLON22Lc8pEtnpsZz7VmawabSU0gCjnj8aC0euHQ==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -8141,7 +8129,6 @@
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.4.tgz",
       "integrity": "sha512-AXJdLo8kgMbimY95O2aKQqsz2iWi9jMgKJhRBAxECE4IFxfcazB2LmzloIoibJI3C12IlY20+KFaLv+71bUJeQ==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "scheduler": "^0.27.0"
       },
@@ -8905,8 +8892,7 @@
       "version": "4.2.1",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.2.1.tgz",
       "integrity": "sha512-/tBrSQ36vCleJkAOsy9kbNTgaxvGbyOamC30PRePTQe/o1MFwEKHQk4Cn7BNGaPtjp+PuUrByJehM1hgxfq4sw==",
-      "license": "MIT",
+      "license": "MIT"
-      "peer": true
     },
     "node_modules/tailwindcss-animate": {
       "version": "1.0.7",
@@ -9113,7 +9099,6 @@
       "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
       "devOptional": true,
       "license": "Apache-2.0",
-      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -9314,7 +9299,6 @@
       "integrity": "sha512-w+N7Hifpc3gRjZ63vYBXA56dvvRlNWRczTdmCBBa+CotUzAPf5b7YMdMR/8CQoeYE5LX3W4wj6RYTgonm1b9DA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "esbuild": "^0.27.0",
         "fdir": "^6.5.0",
@@ -9659,7 +9643,6 @@
       "resolved": "https://registry.npmjs.org/zod/-/zod-4.3.6.tgz",
       "integrity": "sha512-rftlrkhHZOcjDwkGlnUtZZkvaPHCsDATp4pGpuOOMDaTdDDXF91wuVDJoWoPsKX/3YPQ5fHuF3STjcYyKr+Qhg==",
       "license": "MIT",
-      "peer": true,
       "funding": {
         "url": "https://github.com/sponsors/colinhacks"
       }

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/components/ui/badge.tsx

@@ -0,0 +1,49 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { Slot } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+const badgeVariants = cva(
+  "group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
+        secondary:
+          "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
+        destructive:
+          "bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20",
+        outline:
+          "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground",
+        ghost:
+          "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Badge({
+  className,
+  variant = "default",
+  asChild = false,
+  ...props
+}: React.ComponentProps<"span"> &
+  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot.Root : "span"
+
+  return (
+    <Comp
+      data-slot="badge"
+      data-variant={variant}
+      className={cn(badgeVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+export { Badge, badgeVariants }

frontend/src/pages/Academics.tsx

@@ -13,11 +13,26 @@ import {
 } from "@/components/ui/table";
 
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
+import {
+	Dialog,
+	DialogContent,
+	DialogHeader,
+	DialogTitle,
+	DialogFooter,
+} from "@/components/ui/dialog";
 
-import { Loader2, Trash, RefreshCw, Download } from "lucide-react";
+import {
+	Loader2,
+	Trash,
+	RefreshCw,
+	Download,
+	ChevronLeft,
+	ChevronRight,
+	Eye,
+	BookOpen,
+} from "lucide-react";
 
 export default function AcademicsPage() {
 	const [records, setRecords] = useState<any[]>([]);
@@ -25,6 +40,12 @@ export default function AcademicsPage() {
 
 	const [searchText, setSearchText] = useState("");
 
+	const [viewOpen, setViewOpen] = useState(false);
+	const [viewData, setViewData] = useState<any>(null);
+
+	const [currentPage, setCurrentPage] = useState(1);
+	const itemsPerPage = 10;
+
 	const fetchAll = useCallback(async () => {
 		setLoading(true);
 		try {
@@ -51,6 +72,20 @@ export default function AcademicsPage() {
 		);
 	});
 
+	useEffect(() => {
+		setCurrentPage(1);
+	}, [searchText]);
+
+	const totalPages = Math.ceil(filteredRecords.length / itemsPerPage);
+	const indexOfLastItem = currentPage * itemsPerPage;
+	const indexOfFirstItem = indexOfLastItem - itemsPerPage;
+	const currentItems = filteredRecords.slice(indexOfFirstItem, indexOfLastItem);
+
+	function openView(item: any) {
+		setViewData(item);
+		setViewOpen(true);
+	}
+
 	async function handleDelete(id: number) {
 		if (!confirm("Delete record?")) return;
 		await deleteAcademicsApi(id);
@@ -74,24 +109,29 @@ export default function AcademicsPage() {
 
 	return (
 		<div className="p-6 space-y-6">
-			<div className="flex justify-between items-center gap-3 flex-wrap">
+			<div className="flex flex-col md:flex-row md:justify-between md:items-center gap-4">
-				<h1 className="text-2xl font-bold">Academics & Research</h1>
+				<h1 className="text-3xl font-bold">Academics & Research</h1>
 
-				<div className="flex flex-wrap gap-2">
+				<div className="flex flex-wrap gap-3">
 					<Input
-						placeholder="Search name / phone / email / subject..."
+						placeholder="Search name / course / email..."
 						value={searchText}
 						onChange={(e) => setSearchText(e.target.value)}
-						className="w-[260px]"
+						className="w-[280px] text-base"
 					/>
 
-					<Button variant="outline" onClick={fetchAll} disabled={loading}>
+					<Button
-						<RefreshCw className="mr-2 h-4 w-4" />
+						variant="outline"
+						onClick={fetchAll}
+						disabled={loading}
+						className="text-base"
+					>
+						<RefreshCw className="mr-2 h-5 w-5" />
 						Refresh
 					</Button>
 
-					<Button variant="outline" onClick={handleExport}>
+					<Button onClick={handleExport} className="text-base">
-						<Download className="mr-2 h-4 w-4" />
+						<Download className="mr-2 h-5 w-5" />
 						Export
 					</Button>
 				</div>
@@ -99,65 +139,108 @@ export default function AcademicsPage() {
 
 			<Card>
 				<CardHeader>
-					<CardTitle>Academics Records</CardTitle>
+					<CardTitle className="text-xl">Academic Records</CardTitle>
 				</CardHeader>
 
-				<CardContent>
+				<CardContent className="p-0 sm:p-6 space-y-4">
-					<div className="overflow-x-auto">
+					<div className="rounded-md border overflow-x-auto overflow-y-auto max-h-[650px] relative">
-						<Table className="min-w-[1000px]">
+						<Table className="w-full min-w-[1100px] table-fixed border-separate border-spacing-0">
-							<TableHeader>
+							<TableHeader className="sticky top-0 z-20 bg-background shadow-sm">
 								<TableRow>
-									<TableHead>ID</TableHead>
+									<TableHead className="w-[60px] bg-background font-bold text-sm">
-									<TableHead>Name</TableHead>
+										ID
-									<TableHead>Phone</TableHead>
+									</TableHead>
-									<TableHead>Email</TableHead>
+									<TableHead className="w-[220px] bg-background font-bold text-sm">
-									<TableHead>Course</TableHead>
+										Full Name
-									<TableHead>Subject</TableHead>
+									</TableHead>
-									<TableHead>Message</TableHead>
+									<TableHead className="w-[180px] bg-background font-bold text-sm">
-									<TableHead>Date</TableHead>
+										Course
-									<TableHead>Actions</TableHead>
+									</TableHead>
+									<TableHead className="w-[180px] bg-background font-bold text-sm">
+										Subject
+									</TableHead>
+									<TableHead className="w-[140px] bg-background font-bold text-sm">
+										Applied Date
+									</TableHead>
+									<TableHead className="w-[220px] bg-background font-bold text-sm">
+										Message
+									</TableHead>
+									<TableHead className="w-[120px] bg-background font-bold text-right text-sm">
+										Actions
+									</TableHead>
 								</TableRow>
 							</TableHeader>
 
 							<TableBody>
 								{loading ? (
 									<TableRow>
-										<TableCell colSpan={9} className="text-center">
+										<TableCell colSpan={7} className="text-center py-10">
-											<Loader2 className="h-6 w-6 animate-spin mx-auto" />
+											<Loader2 className="h-8 w-8 animate-spin mx-auto" />
 										</TableCell>
 									</TableRow>
-								) : filteredRecords.length === 0 ? (
+								) : currentItems.length === 0 ? (
 									<TableRow>
-										<TableCell colSpan={9} className="text-center">
+										<TableCell
+											colSpan={7}
+											className="text-center text-muted-foreground py-10 text-base"
+										>
 											No records found
 										</TableCell>
 									</TableRow>
 								) : (
-									filteredRecords.map((item) => (
+									currentItems.map((item) => (
-										<TableRow key={item.id}>
+										<TableRow key={item.id} className="hover:bg-muted/50">
-											<TableCell>{item.id}</TableCell>
+											<TableCell className="font-mono text-xs">
-											<TableCell>{item.fullName}</TableCell>
+												{item.id}
-											<TableCell>{item.number}</TableCell>
-											<TableCell>{item.emailId}</TableCell>
-
-											<TableCell>{item.courseName}</TableCell>
-											<TableCell>{item.subject}</TableCell>
-
-											<TableCell className="max-w-[250px] whitespace-normal">
-												{item.message}
 											</TableCell>
-
 											<TableCell>
+												<div className="font-semibold text-base truncate">
+													{item.fullName}
+												</div>
+												<div className="text-xs text-muted-foreground truncate">
+													{item.emailId}
+												</div>
+												<div className="text-[11px] font-medium">
+													{item.number}
+												</div>
+											</TableCell>
+											<TableCell>
+												<div className="text-sm font-medium line-clamp-2">
+													{item.courseName || "-"}
+												</div>
+											</TableCell>
+											<TableCell>
+												<div className="text-sm line-clamp-2">
+													{item.subject || "-"}
+												</div>
+											</TableCell>
+											<TableCell className="text-sm">
 												{new Date(item.createdAt).toLocaleDateString()}
 											</TableCell>
-
 											<TableCell>
-												<Button
+												<div className="text-sm line-clamp-2 text-muted-foreground italic">
-													size="sm"
+													{item.message || "-"}
-													variant="destructive"
+												</div>
-													onClick={() => handleDelete(item.id)}>
+											</TableCell>
-													<Trash className="h-4 w-4" />
+											<TableCell className="text-right">
-												</Button>
+												<div className="flex justify-end gap-2">
+													<Button
+														size="icon"
+														variant="ghost"
+														className="h-9 w-9"
+														onClick={() => openView(item)}
+													>
+														<Eye className="h-4 w-4" />
+													</Button>
+													<Button
+														size="icon"
+														variant="ghost"
+														className="h-9 w-9 text-destructive hover:text-destructive hover:bg-destructive/10"
+														onClick={() => handleDelete(item.id)}
+													>
+														<Trash className="h-4 w-4" />
+													</Button>
+												</div>
 											</TableCell>
 										</TableRow>
 									))
@@ -165,8 +248,117 @@ export default function AcademicsPage() {
 							</TableBody>
 						</Table>
 					</div>
+
+					{!loading && filteredRecords.length > 0 && (
+						<div className="flex items-center justify-between px-2 py-6 border-t">
+							<div className="text-base text-muted-foreground">
+								Showing{" "}
+								<span className="font-semibold">{indexOfFirstItem + 1}</span> to{" "}
+								<span className="font-semibold">
+									{Math.min(indexOfLastItem, filteredRecords.length)}
+								</span>{" "}
+								of{" "}
+								<span className="font-semibold">{filteredRecords.length}</span>{" "}
+								records
+							</div>
+							<div className="flex items-center gap-6">
+								<div className="text-base font-semibold">
+									Page {currentPage} of {totalPages}
+								</div>
+								<div className="flex gap-2">
+									<Button
+										variant="outline"
+										size="icon"
+										className="h-10 w-10"
+										onClick={() =>
+											setCurrentPage((prev) => Math.max(prev - 1, 1))
+										}
+										disabled={currentPage === 1}
+									>
+										<ChevronLeft className="h-5 w-5" />
+									</Button>
+									<Button
+										variant="outline"
+										size="icon"
+										className="h-10 w-10"
+										onClick={() =>
+											setCurrentPage((prev) => Math.min(prev + 1, totalPages))
+										}
+										disabled={currentPage === totalPages || totalPages === 0}
+									>
+										<ChevronRight className="h-5 w-5" />
+									</Button>
+								</div>
+							</div>
+						</div>
+					)}
 				</CardContent>
 			</Card>
+
+			<Dialog open={viewOpen} onOpenChange={setViewOpen}>
+				<DialogContent className="w-full !max-w-3xl max-h-[85vh] overflow-y-auto">
+					<DialogHeader>
+						<DialogTitle className="text-2xl border-b pb-2 flex items-center gap-2">
+							<BookOpen className="h-6 w-6" /> Academic Detail View
+						</DialogTitle>
+					</DialogHeader>
+					{viewData && (
+						<div className="space-y-6 py-4">
+							<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+								<div className="space-y-4">
+									<div>
+										<p className="text-xs uppercase font-bold text-muted-foreground">
+											Applicant Information
+										</p>
+										<p className="text-lg font-bold text-primary">
+											{viewData.fullName}
+										</p>
+										<p className="text-sm font-medium">{viewData.emailId}</p>
+										<p className="text-sm">{viewData.number}</p>
+									</div>
+									<div>
+										<p className="text-xs uppercase font-bold text-muted-foreground">
+											Course & Subject
+										</p>
+										<p className="text-base font-semibold">
+											{viewData.courseName || "N/A"}
+										</p>
+										<p className="text-sm text-muted-foreground">
+											{viewData.subject}
+										</p>
+									</div>
+									<div>
+										<p className="text-xs uppercase font-bold text-muted-foreground">
+											Submission Date
+										</p>
+										<p className="text-sm">
+											{new Date(viewData.createdAt).toLocaleString()}
+										</p>
+									</div>
+								</div>
+								<div className="space-y-4">
+									<div className="p-4 bg-muted/30 rounded-lg border">
+										<p className="text-xs uppercase font-bold text-muted-foreground mb-2">
+											Message / Research Inquiry
+										</p>
+										<p className="text-sm leading-relaxed whitespace-pre-wrap italic">
+											{viewData.message || "No message content provided."}
+										</p>
+									</div>
+								</div>
+							</div>
+						</div>
+					)}
+					<DialogFooter>
+						<Button
+							onClick={() => setViewOpen(false)}
+							className="w-full md:w-auto"
+						>
+							Close
+						</Button>
+					</DialogFooter>
+				</DialogContent>
+			</Dialog>
 		</div>
 	);
 }

frontend/src/pages/Appointment.tsx

@@ -1,7 +1,7 @@
-import {useState, useEffect, useCallback} from "react";
+import { useState, useEffect, useCallback } from "react";
 
-import {getAppointmentsApi, deleteAppointmentApi} from "@/api/appointment";
+import { getAppointmentsApi, deleteAppointmentApi } from "@/api/appointment";
-import {exportToExcel} from "@/utils/exportToExcel";
+import { exportToExcel } from "@/utils/exportToExcel";
 
 import {
 	Table,
@@ -12,12 +12,26 @@ 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 { Input } from "@/components/ui/input";
+import {
+	Dialog,
+	DialogContent,
+	DialogHeader,
+	DialogTitle,
+	DialogFooter,
+} from "@/components/ui/dialog";
 
-import {Button} from "@/components/ui/button";
+import {
-import {Input} from "@/components/ui/input";
+	Loader2,
-
+	Trash,
-import {Loader2, Trash, RefreshCw, Download} from "lucide-react";
+	RefreshCw,
+	Download,
+	ChevronLeft,
+	ChevronRight,
+	Eye,
+} from "lucide-react";
 
 export default function AppointmentPage() {
 	const [appointments, setAppointments] = useState<any[]>([]);
@@ -25,9 +39,14 @@ export default function AppointmentPage() {
 
 	const [searchText, setSearchText] = useState("");
 	const [filterDoctor, setFilterDoctor] = useState("");
-	const [filterDepartment, setFilterDepartment] = useState("");
 	const [filterDate, setFilterDate] = useState("");
 
+	const [viewOpen, setViewOpen] = useState(false);
+	const [viewData, setViewData] = useState<any>(null);
+
+	const [currentPage, setCurrentPage] = useState(1);
+	const itemsPerPage = 10;
+
 	const fetchAll = useCallback(async () => {
 		setLoading(true);
 		try {
@@ -54,19 +73,30 @@ export default function AppointmentPage() {
 			? item.doctor?.name?.toLowerCase().includes(filterDoctor.toLowerCase())
 			: true;
 
-		const matchesDepartment = filterDepartment
-			? item.department?.name
-					?.toLowerCase()
-					.includes(filterDepartment.toLowerCase())
-			: true;
-
 		const matchesDate = filterDate
 			? new Date(item.date).toISOString().split("T")[0] === filterDate
 			: true;
 
-		return matchesSearch && matchesDoctor && matchesDepartment && matchesDate;
+		return matchesSearch && matchesDoctor && matchesDate;
 	});
 
+	useEffect(() => {
+		setCurrentPage(1);
+	}, [searchText, filterDoctor, filterDate]);
+
+	const totalPages = Math.ceil(filteredAppointments.length / itemsPerPage);
+	const indexOfLastItem = currentPage * itemsPerPage;
+	const indexOfFirstItem = indexOfLastItem - itemsPerPage;
+	const currentItems = filteredAppointments.slice(
+		indexOfFirstItem,
+		indexOfLastItem,
+	);
+
+	function openView(item: any) {
+		setViewData(item);
+		setViewOpen(true);
+	}
+
 	async function handleDelete(id: number) {
 		if (!confirm("Delete appointment?")) return;
 		await deleteAppointmentApi(id);
@@ -84,51 +114,41 @@ export default function AppointmentPage() {
 			Date: new Date(item.date).toLocaleDateString(),
 			Message: item.message,
 		}));
-
 		exportToExcel(exportData, "appointments");
 	};
 
 	return (
 		<div className="p-6 space-y-6">
-			<div className="flex justify-between items-center gap-3 flex-wrap">
+			<div className="flex flex-col md:flex-row md:justify-between md:items-center gap-4">
-				<h1 className="text-2xl font-bold">Appointments</h1>
+				<h1 className="text-3xl font-bold">Appointments</h1>
 
-				<div className="flex flex-wrap gap-2">
+				<div className="flex flex-wrap gap-3">
 					<Input
-						placeholder="Search name / phone / email..."
+						placeholder="Search name / phone..."
 						value={searchText}
 						onChange={(e) => setSearchText(e.target.value)}
-						className="w-[220px]"
+						className="w-[220px] text-base"
-					/>
-
-					<Input
-						placeholder="Filter Doctor"
-						value={filterDoctor}
-						onChange={(e) => setFilterDoctor(e.target.value)}
-						className="w-[180px]"
-					/>
-
-					<Input
-						placeholder="Filter Department"
-						value={filterDepartment}
-						onChange={(e) => setFilterDepartment(e.target.value)}
-						className="w-[200px]"
 					/>
 
 					<Input
 						type="date"
 						value={filterDate}
 						onChange={(e) => setFilterDate(e.target.value)}
-						className="w-[180px]"
+						className="w-[160px] text-base"
 					/>
 
-					<Button variant="outline" onClick={fetchAll} disabled={loading}>
+					<Button
-						<RefreshCw className="mr-2 h-4 w-4" />
+						variant="outline"
+						onClick={fetchAll}
+						disabled={loading}
+						className="text-base"
+					>
+						<RefreshCw className="mr-2 h-5 w-5" />
 						Refresh
 					</Button>
 
-					<Button variant="outline" onClick={handleExport}>
+					<Button onClick={handleExport} className="text-base">
-						<Download className="mr-2 h-4 w-4" />
+						<Download className="mr-2 h-5 w-5" />
 						Export
 					</Button>
 				</div>
@@ -136,72 +156,102 @@ export default function AppointmentPage() {
 
 			<Card>
 				<CardHeader>
-					<CardTitle>Appointment List</CardTitle>
+					<CardTitle className="text-xl">Appointment List</CardTitle>
 				</CardHeader>
 
-				<CardContent>
+				<CardContent className="p-0 sm:p-6 space-y-4">
-					<div className="overflow-x-auto">
+					<div className="rounded-md border overflow-x-auto overflow-y-auto max-h-[650px] relative">
-						<Table className="min-w-[700px]">
+						<Table className="w-full min-w-[1000px] table-fixed border-separate border-spacing-0">
-							<TableHeader>
+							<TableHeader className="sticky top-0 z-20 bg-background shadow-sm">
 								<TableRow>
-									<TableHead>ID</TableHead>
+									<TableHead className="w-[60px] bg-background font-bold text-sm">
-									<TableHead>Name</TableHead>
+										ID
-									<TableHead>Phone</TableHead>
+									</TableHead>
-									<TableHead>Email</TableHead>
+									<TableHead className="w-[200px] bg-background font-bold text-sm">
-									<TableHead>Doctor</TableHead>
+										Patient
-									<TableHead>Department</TableHead>
+									</TableHead>
-									<TableHead>Appointment Date</TableHead>
+									<TableHead className="w-[180px] bg-background font-bold text-sm">
-									<TableHead>Message</TableHead>
+										Doctor
-									<TableHead>Generated on</TableHead>
+									</TableHead>
-
+									<TableHead className="w-[150px] bg-background font-bold text-sm">
-									<TableHead>Actions</TableHead>
+										Date
+									</TableHead>
+									<TableHead className="w-[250px] bg-background font-bold text-sm">
+										Message
+									</TableHead>
+									<TableHead className="w-[120px] bg-background font-bold text-right text-sm">
+										Actions
+									</TableHead>
 								</TableRow>
 							</TableHeader>
 
 							<TableBody>
 								{loading ? (
 									<TableRow>
-										<TableCell colSpan={9} className="text-center">
+										<TableCell colSpan={6} className="text-center py-10">
-											<Loader2 className="h-6 w-6 animate-spin mx-auto" />
+											<Loader2 className="h-8 w-8 animate-spin mx-auto" />
 										</TableCell>
 									</TableRow>
-								) : filteredAppointments.length === 0 ? (
+								) : currentItems.length === 0 ? (
 									<TableRow>
-										<TableCell colSpan={9} className="text-center">
+										<TableCell
+											colSpan={6}
+											className="text-center text-muted-foreground py-10 text-base"
+										>
 											No appointments found
 										</TableCell>
 									</TableRow>
 								) : (
-									filteredAppointments.map((item) => (
+									currentItems.map((item) => (
-										<TableRow key={item.id}>
+										<TableRow key={item.id} className="hover:bg-muted/50">
-											<TableCell>{item.id}</TableCell>
+											<TableCell className="font-mono text-xs">
-											<TableCell>{item.name}</TableCell>
+												{item.id}
-											<TableCell>{item.mobileNumber}</TableCell>
-											<TableCell>{item.email}</TableCell>
-											<TableCell>{item.doctor?.name}</TableCell>
-											<TableCell>{item.department?.name}</TableCell>
-
-											{/* ✅ DATE ONLY */}
-											<TableCell>
-												{new Date(item.date).toLocaleDateString()}
-											</TableCell>
-
-											<TableCell className="max-w-[250px] whitespace-normal">
-												{item.message}
 											</TableCell>
 											<TableCell>
-												{" "}
+												<div className="font-semibold text-base truncate">
-												{new Date(item.createdAt).toLocaleDateString()}
+													{item.name}
+												</div>
+												<div className="text-xs text-muted-foreground">
+													{item.mobileNumber}
+												</div>
 											</TableCell>
-
 											<TableCell>
-												<Button
+												<div className="text-sm font-medium">
-													size="sm"
+													{item.doctor?.name || "-"}
-													variant="destructive"
+												</div>
-													onClick={() => handleDelete(item.id)}
+												<div className="text-[10px] text-muted-foreground truncate">
-												>
+													{item.department?.name}
-													<Trash className="h-4 w-4" />
+												</div>
-												</Button>
+											</TableCell>
+											<TableCell>
+												<div className="text-sm">
+													{new Date(item.date).toLocaleDateString()}
+												</div>
+											</TableCell>
+											<TableCell>
+												<div className="text-sm line-clamp-2 text-muted-foreground italic">
+													{item.message || "-"}
+												</div>
+											</TableCell>
+											<TableCell className="text-right">
+												<div className="flex justify-end gap-2">
+													<Button
+														size="icon"
+														variant="ghost"
+														className="h-9 w-9"
+														onClick={() => openView(item)}
+													>
+														<Eye className="h-4 w-4" />
+													</Button>
+													<Button
+														size="icon"
+														variant="ghost"
+														className="h-9 w-9 text-destructive hover:text-destructive hover:bg-destructive/10"
+														onClick={() => handleDelete(item.id)}
+													>
+														<Trash className="h-4 w-4" />
+													</Button>
+												</div>
 											</TableCell>
 										</TableRow>
 									))
@@ -209,8 +259,123 @@ export default function AppointmentPage() {
 							</TableBody>
 						</Table>
 					</div>
+
+					{!loading && filteredAppointments.length > 0 && (
+						<div className="flex items-center justify-between px-2 py-6 border-t">
+							<div className="text-base text-muted-foreground">
+								Showing{" "}
+								<span className="font-semibold">{indexOfFirstItem + 1}</span> to{" "}
+								<span className="font-semibold">
+									{Math.min(indexOfLastItem, filteredAppointments.length)}
+								</span>{" "}
+								of{" "}
+								<span className="font-semibold">
+									{filteredAppointments.length}
+								</span>
+							</div>
+							<div className="flex items-center gap-6">
+								<div className="text-base font-semibold">
+									Page {currentPage} of {totalPages}
+								</div>
+								<div className="flex gap-2">
+									<Button
+										variant="outline"
+										size="icon"
+										className="h-10 w-10"
+										onClick={() =>
+											setCurrentPage((prev) => Math.max(prev - 1, 1))
+										}
+										disabled={currentPage === 1}
+									>
+										<ChevronLeft className="h-5 w-5" />
+									</Button>
+									<Button
+										variant="outline"
+										size="icon"
+										className="h-10 w-10"
+										onClick={() =>
+											setCurrentPage((prev) => Math.min(prev + 1, totalPages))
+										}
+										disabled={currentPage === totalPages || totalPages === 0}
+									>
+										<ChevronRight className="h-5 w-5" />
+									</Button>
+								</div>
+							</div>
+						</div>
+					)}
 				</CardContent>
 			</Card>
+
+			<Dialog open={viewOpen} onOpenChange={setViewOpen}>
+				<DialogContent className="w-full !max-w-3xl max-h-[85vh] overflow-y-auto">
+					<DialogHeader>
+						<DialogTitle className="text-2xl border-b pb-2">
+							Appointment Details
+						</DialogTitle>
+					</DialogHeader>
+					{viewData && (
+						<div className="space-y-6 py-4">
+							<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+								<div className="space-y-4">
+									<div>
+										<p className="text-xs uppercase font-bold text-muted-foreground">
+											Patient Information
+										</p>
+										<p className="text-lg font-bold text-primary">
+											{viewData.name}
+										</p>
+										<p className="text-sm">{viewData.mobileNumber}</p>
+										<p className="text-sm">
+											{viewData.email || "No email provided"}
+										</p>
+									</div>
+									<div>
+										<p className="text-xs uppercase font-bold text-muted-foreground">
+											Appointment Date
+										</p>
+										<p className="text-base font-semibold">
+											{new Date(viewData.date).toLocaleDateString()}
+										</p>
+										<p className="text-[10px] text-muted-foreground">
+											Booked on: {new Date(viewData.createdAt).toLocaleString()}
+										</p>
+									</div>
+								</div>
+								<div className="space-y-4">
+									<div>
+										<p className="text-xs uppercase font-bold text-muted-foreground">
+											Doctor / Department
+										</p>
+										<p className="text-base font-bold">
+											{viewData.doctor?.name || "Not Assigned"}
+										</p>
+										<p className="text-sm text-muted-foreground">
+											{viewData.department?.name || "General"}
+										</p>
+									</div>
+									<div className="p-4 bg-muted/30 rounded-lg">
+										<p className="text-xs uppercase font-bold text-muted-foreground mb-2">
+											Message from Patient
+										</p>
+										<p className="text-sm italic leading-relaxed whitespace-pre-wrap">
+											{viewData.message || "No message provided."}
+										</p>
+									</div>
+								</div>
+							</div>
+						</div>
+					)}
+					<DialogFooter>
+						<Button
+							onClick={() => setViewOpen(false)}
+							className="w-full md:w-auto"
+						>
+							Close
+						</Button>
+					</DialogFooter>
+				</DialogContent>
+			</Dialog>
 		</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/Career.tsx

@@ -1,7 +1,6 @@
 import { useState, useEffect, useCallback } from "react";
 
 import { getCareersApi, deleteCareerApi } from "@/api/career";
-
 import apiClient from "@/api/client";
 
 import {
@@ -15,7 +14,6 @@ import {
 
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
-
 import {
 	Dialog,
 	DialogContent,
@@ -25,8 +23,17 @@ import {
 } from "@/components/ui/dialog";
 
 import { Input } from "@/components/ui/input";
+import { Badge } from "@/components/ui/badge";
 
-import { Loader2, Plus, Pencil, Trash, RefreshCw } from "lucide-react";
+import {
+	Loader2,
+	Plus,
+	Pencil,
+	Trash,
+	RefreshCw,
+	ChevronLeft,
+	ChevronRight,
+} from "lucide-react";
 
 export default function CareerPage() {
 	const [careers, setCareers] = useState<any[]>([]);
@@ -37,6 +44,9 @@ export default function CareerPage() {
 
 	const [searchText, setSearchText] = useState("");
 
+	const [currentPage, setCurrentPage] = useState(1);
+	const itemsPerPage = 10;
+
 	const [form, setForm] = useState({
 		post: "",
 		designation: "",
@@ -63,10 +73,21 @@ export default function CareerPage() {
 		fetchAll();
 	}, [fetchAll]);
 
-	const filteredCareers = careers.filter((item) =>
+	const filteredCareers = careers.filter(
-		item.post?.toLowerCase().includes(searchText.toLowerCase()),
+		(item) =>
+			item.post?.toLowerCase().includes(searchText.toLowerCase()) ||
+			item.designation?.toLowerCase().includes(searchText.toLowerCase()),
 	);
 
+	useEffect(() => {
+		setCurrentPage(1);
+	}, [searchText]);
+
+	const totalPages = Math.ceil(filteredCareers.length / itemsPerPage);
+	const indexOfLastItem = currentPage * itemsPerPage;
+	const indexOfFirstItem = indexOfLastItem - itemsPerPage;
+	const currentItems = filteredCareers.slice(indexOfFirstItem, indexOfLastItem);
+
 	function handleChange(e: any) {
 		setForm({ ...form, [e.target.name]: e.target.value });
 	}
@@ -87,7 +108,6 @@ export default function CareerPage() {
 
 	function openEdit(item: any) {
 		setEditing(item);
-
 		setForm({
 			post: item.post || "",
 			designation: item.designation || "",
@@ -97,7 +117,6 @@ export default function CareerPage() {
 			number: item.number || "",
 			status: item.status || "new",
 		});
-
 		setOpenModal(true);
 	}
 
@@ -108,7 +127,6 @@ export default function CareerPage() {
 			} else {
 				await apiClient.post("/careers", form);
 			}
-
 			setOpenModal(false);
 			fetchAll();
 		} catch (err) {
@@ -124,24 +142,29 @@ export default function CareerPage() {
 
 	return (
 		<div className="p-6 space-y-6">
-			<div className="flex justify-between items-center gap-3 flex-wrap">
+			<div className="flex flex-col md:flex-row md:justify-between md:items-center gap-4">
-				<h1 className="text-2xl font-bold">Careers</h1>
+				<h1 className="text-3xl font-bold">Careers</h1>
 
-				<div className="flex gap-2 flex-wrap">
+				<div className="flex flex-wrap gap-3">
 					<Input
-						placeholder="Search career..."
+						placeholder="Search post / designation..."
 						value={searchText}
 						onChange={(e) => setSearchText(e.target.value)}
-						className="w-[220px]"
+						className="w-[250px] text-base"
 					/>
 
-					<Button variant="outline" onClick={fetchAll} disabled={loading}>
+					<Button
-						<RefreshCw className="mr-2 h-4 w-4" />
+						variant="outline"
+						onClick={fetchAll}
+						disabled={loading}
+						className="text-base"
+					>
+						<RefreshCw className="mr-2 h-5 w-5" />
 						Refresh
 					</Button>
 
-					<Button onClick={openAdd}>
+					<Button onClick={openAdd} className="text-base">
-						<Plus className="mr-2 h-4 w-4" />
+						<Plus className="mr-2 h-5 w-5" />
 						Add Career
 					</Button>
 				</div>
@@ -149,67 +172,113 @@ export default function CareerPage() {
 
 			<Card>
 				<CardHeader>
-					<CardTitle>Career List</CardTitle>
+					<CardTitle className="text-xl">Career Opportunities</CardTitle>
 				</CardHeader>
 
-				<CardContent>
+				<CardContent className="p-0 sm:p-6 space-y-4">
-					<div className="overflow-x-auto">
+					<div className="rounded-md border overflow-x-auto overflow-y-auto max-h-[650px] relative">
-						<Table className="min-w-[900px]">
+						<Table className="w-full min-w-[1000px] table-fixed border-separate border-spacing-0">
-							<TableHeader>
+							<TableHeader className="sticky top-0 z-20 bg-background shadow-sm">
 								<TableRow>
-									<TableHead>ID</TableHead>
+									<TableHead className="w-[60px] bg-background font-bold text-sm">
-									<TableHead>Post</TableHead>
+										ID
-									<TableHead>Designation</TableHead>
+									</TableHead>
-									<TableHead>Qualification</TableHead>
+									<TableHead className="w-[200px] bg-background font-bold text-sm">
-									<TableHead>Experience</TableHead>
+										Post & Designation
-									<TableHead>Email</TableHead>
+									</TableHead>
-									<TableHead>Phone</TableHead>
+									<TableHead className="w-[200px] bg-background font-bold text-sm">
-									<TableHead>Status</TableHead>
+										Qualification
-									<TableHead>Actions</TableHead>
+									</TableHead>
+									<TableHead className="w-[120px] bg-background font-bold text-sm">
+										Experience
+									</TableHead>
+									<TableHead className="w-[200px] bg-background font-bold text-sm">
+										Contact Info
+									</TableHead>
+									<TableHead className="w-[100px] bg-background font-bold text-sm">
+										Status
+									</TableHead>
+									<TableHead className="w-[120px] bg-background font-bold text-right text-sm">
+										Actions
+									</TableHead>
 								</TableRow>
 							</TableHeader>
 
 							<TableBody>
 								{loading ? (
 									<TableRow>
-										<TableCell colSpan={9} className="text-center">
+										<TableCell colSpan={7} className="text-center py-10">
-											<Loader2 className="h-6 w-6 animate-spin mx-auto" />
+											<Loader2 className="h-8 w-8 animate-spin mx-auto" />
 										</TableCell>
 									</TableRow>
-								) : filteredCareers.length === 0 ? (
+								) : currentItems.length === 0 ? (
 									<TableRow>
-										<TableCell colSpan={9} className="text-center">
+										<TableCell
+											colSpan={7}
+											className="text-center text-muted-foreground py-10 text-base"
+										>
 											No careers found
 										</TableCell>
 									</TableRow>
 								) : (
-									filteredCareers.map((item) => (
+									currentItems.map((item) => (
-										<TableRow key={item.id}>
+										<TableRow key={item.id} className="hover:bg-muted/50">
-											<TableCell>{item.id}</TableCell>
+											<TableCell className="font-mono text-xs">
-											<TableCell>{item.post}</TableCell>
+												{item.id}
-											<TableCell>{item.designation}</TableCell>
+											</TableCell>
-											<TableCell>{item.qualification}</TableCell>
+											<TableCell>
-											<TableCell>{item.experienceNeed}</TableCell>
+												<div className="font-semibold text-base truncate">
-											<TableCell>{item.email}</TableCell>
+													{item.post}
-											<TableCell>{item.number}</TableCell>
+												</div>
-											<TableCell>{item.status}</TableCell>
+												<div className="text-xs text-muted-foreground truncate">
-
+													{item.designation}
-											<TableCell className="flex gap-2">
+												</div>
-												<Button
+											</TableCell>
-													size="sm"
+											<TableCell>
-													variant="outline"
+												<div className="text-sm line-clamp-2">
-													onClick={() => openEdit(item)}
+													{item.qualification}
+												</div>
+											</TableCell>
+											<TableCell className="text-sm">
+												{item.experienceNeed}
+											</TableCell>
+											<TableCell>
+												<div className="text-sm font-medium">{item.email}</div>
+												<div className="text-xs text-muted-foreground">
+													{item.number}
+												</div>
+											</TableCell>
+											<TableCell>
+												<Badge
+													variant={
+														item.status === "active" ? "default" : "secondary"
+													}
+													className="capitalize"
 												>
-													<Pencil className="h-4 w-4" />
+													{item.status}
-												</Button>
+												</Badge>
+											</TableCell>
 
-												<Button
+											<TableCell className="text-right">
-													size="sm"
+												<div className="flex justify-end gap-2">
-													variant="destructive"
+													<Button
-													onClick={() => handleDelete(item.id)}
+														size="icon"
-												>
+														variant="ghost"
-													<Trash className="h-4 w-4" />
+														className="h-9 w-9"
-												</Button>
+														onClick={() => openEdit(item)}
+													>
+														<Pencil className="h-4 w-4" />
+													</Button>
+
+													<Button
+														size="icon"
+														variant="ghost"
+														className="h-9 w-9 text-destructive hover:text-destructive hover:bg-destructive/10"
+														onClick={() => handleDelete(item.id)}
+													>
+														<Trash className="h-4 w-4" />
+													</Button>
+												</div>
 											</TableCell>
 										</TableRow>
 									))
@@ -217,67 +286,126 @@ export default function CareerPage() {
 							</TableBody>
 						</Table>
 					</div>
+
+					{!loading && filteredCareers.length > 0 && (
+						<div className="flex items-center justify-between px-2 py-6 border-t">
+							<div className="text-base text-muted-foreground">
+								Showing{" "}
+								<span className="font-semibold">{indexOfFirstItem + 1}</span> to{" "}
+								<span className="font-semibold">
+									{Math.min(indexOfLastItem, filteredCareers.length)}
+								</span>{" "}
+								of{" "}
+								<span className="font-semibold">{filteredCareers.length}</span>{" "}
+								careers
+							</div>
+							<div className="flex items-center gap-6">
+								<div className="text-base font-semibold">
+									Page {currentPage} of {totalPages}
+								</div>
+								<div className="flex gap-2">
+									<Button
+										variant="outline"
+										size="icon"
+										className="h-10 w-10"
+										onClick={() =>
+											setCurrentPage((prev) => Math.max(prev - 1, 1))
+										}
+										disabled={currentPage === 1}
+									>
+										<ChevronLeft className="h-5 w-5" />
+									</Button>
+									<Button
+										variant="outline"
+										size="icon"
+										className="h-10 w-10"
+										onClick={() =>
+											setCurrentPage((prev) => Math.min(prev + 1, totalPages))
+										}
+										disabled={currentPage === totalPages || totalPages === 0}
+									>
+										<ChevronRight className="h-5 w-5" />
+									</Button>
+								</div>
+							</div>
+						</div>
+					)}
 				</CardContent>
 			</Card>
 
-			{/* MODAL */}
 			<Dialog open={openModal} onOpenChange={setOpenModal}>
-				<DialogContent>
+				<DialogContent className="w-full max-w-lg">
 					<DialogHeader>
-						<DialogTitle>{editing ? "Edit Career" : "Add Career"}</DialogTitle>
+						<DialogTitle className="text-2xl">
+							{editing ? "Edit Career" : "Add New Career"}
+						</DialogTitle>
 					</DialogHeader>
 
-					<div className="space-y-3">
+					<div className="space-y-4 py-4">
-						<Input
+						<div className="grid grid-cols-1 gap-4">
-							name="post"
+							<Input
-							placeholder="Post"
+								name="post"
-							value={form.post}
+								placeholder="Post (e.g. Staff Nurse)"
-							onChange={handleChange}
+								value={form.post}
-						/>
+								onChange={handleChange}
-						<Input
+								className="text-base"
-							name="designation"
+							/>
-							placeholder="Designation"
+							<Input
-							value={form.designation}
+								name="designation"
-							onChange={handleChange}
+								placeholder="Designation"
-						/>
+								value={form.designation}
-						<Input
+								onChange={handleChange}
-							name="qualification"
+								className="text-base"
-							placeholder="Qualification"
+							/>
-							value={form.qualification}
+							<Input
-							onChange={handleChange}
+								name="qualification"
-						/>
+								placeholder="Qualification"
-						<Input
+								value={form.qualification}
-							name="experienceNeed"
+								onChange={handleChange}
-							placeholder="Experience Needed"
+								className="text-base"
-							value={form.experienceNeed}
+							/>
-							onChange={handleChange}
+							<Input
-						/>
+								name="experienceNeed"
-						<Input
+								placeholder="Experience Needed"
-							name="email"
+								value={form.experienceNeed}
-							placeholder="Email"
+								onChange={handleChange}
-							value={form.email}
+								className="text-base"
-							onChange={handleChange}
+							/>
-						/>
+							<Input
-						<Input
+								name="email"
-							name="number"
+								type="email"
-							placeholder="Phone Number"
+								placeholder="HR Email Address"
-							value={form.number}
+								value={form.email}
-							onChange={handleChange}
+								onChange={handleChange}
-						/>
+								className="text-base"
-						<Input
+							/>
-							name="status"
+							<Input
-							placeholder="Status"
+								name="number"
-							value={form.status}
+								placeholder="Contact Number"
-							onChange={handleChange}
+								value={form.number}
-						/>
+								onChange={handleChange}
+								className="text-base"
+							/>
+							<Input
+								name="status"
+								placeholder="Status (e.g. active / closed)"
+								value={form.status}
+								onChange={handleChange}
+								className="text-base"
+							/>
+						</div>
 					</div>
 
-					<DialogFooter>
+					<DialogFooter className="pt-4 border-t">
-						<Button variant="outline" onClick={() => setOpenModal(false)}>
+						<Button
+							variant="ghost"
+							onClick={() => setOpenModal(false)}
+							className="text-base"
+						>
 							Cancel
 						</Button>
-						<Button onClick={handleSubmit}>
+						<Button onClick={handleSubmit} className="px-8 text-base">
-							{editing ? "Update" : "Create"}
+							{editing ? "Save Changes" : "Create Career"}
 						</Button>
 					</DialogFooter>
 				</DialogContent>

frontend/src/pages/Department.tsx

@@ -31,7 +31,16 @@ import {
 import { Input } from "@/components/ui/input";
 import { Textarea } from "@/components/ui/textarea";
 
-import { Loader2, RefreshCw, Plus, Pencil, Trash, Eye } from "lucide-react";
+import {
+	Loader2,
+	RefreshCw,
+	Plus,
+	Pencil,
+	Trash,
+	Eye,
+	ChevronLeft,
+	ChevronRight,
+} from "lucide-react";
 
 interface Department {
 	departmentId: string;
@@ -56,6 +65,9 @@ export default function DepartmentPage() {
 
 	const [searchText, setSearchText] = useState("");
 
+	const [currentPage, setCurrentPage] = useState(1);
+	const itemsPerPage = 10;
+
 	const [form, setForm] = useState<Department>({
 		departmentId: "",
 		name: "",
@@ -88,8 +100,22 @@ export default function DepartmentPage() {
 		fetchDepartments();
 	}, [fetchDepartments]);
 
-	const filteredDepartments = departments.filter((dep) =>
+	const filteredDepartments = departments.filter(
-		dep.name.toLowerCase().includes(searchText.toLowerCase()),
+		(dep) =>
+			dep.name.toLowerCase().includes(searchText.toLowerCase()) ||
+			dep.departmentId.toLowerCase().includes(searchText.toLowerCase()),
+	);
+
+	useEffect(() => {
+		setCurrentPage(1);
+	}, [searchText]);
+
+	const totalPages = Math.ceil(filteredDepartments.length / itemsPerPage);
+	const indexOfLastItem = currentPage * itemsPerPage;
+	const indexOfFirstItem = indexOfLastItem - itemsPerPage;
+	const currentItems = filteredDepartments.slice(
+		indexOfFirstItem,
+		indexOfLastItem,
 	);
 
 	function handleChange(e: any) {
@@ -155,118 +181,153 @@ export default function DepartmentPage() {
 
 	return (
 		<div className="p-6 space-y-6">
-			<div className="flex flex-col md:flex-row md:justify-between md:items-center gap-3">
+			<div className="flex flex-col md:flex-row md:justify-between md:items-center gap-4">
-				<h1 className="text-2xl font-bold">Departments</h1>
+				<h1 className="text-3xl font-bold">Departments</h1>
 
 				<div className="flex flex-wrap gap-3">
 					<Input
 						placeholder="Search department..."
 						value={searchText}
 						onChange={(e) => setSearchText(e.target.value)}
-						className="w-[220px]"
+						className="w-[250px] text-base"
 					/>
 
 					<Button
 						variant="outline"
 						onClick={fetchDepartments}
-						disabled={loading}>
+						disabled={loading}
-						<RefreshCw className="mr-2 h-4 w-4" />
+						className="text-base"
+					>
+						<RefreshCw className="mr-2 h-5 w-5" />
 						Refresh
 					</Button>
 
-					<Button onClick={openAdd}>
+					<Button onClick={openAdd} className="text-base">
-						<Plus className="mr-2 h-4 w-4" />
+						<Plus className="mr-2 h-5 w-5" />
 						Add Department
 					</Button>
 				</div>
 			</div>
 
 			{error && (
-				<div className="p-4 text-red-600 bg-red-50 border rounded-md">
+				<div className="p-4 text-red-600 bg-red-50 border rounded-md text-base">
 					{error}
 				</div>
 			)}
 
 			<Card>
 				<CardHeader>
-					<CardTitle>Department List</CardTitle>
+					<CardTitle className="text-xl">Department List</CardTitle>
 				</CardHeader>
 
-				<CardContent>
+				<CardContent className="p-0 sm:p-6 space-y-4">
-					<div className="border rounded-md max-h-[500px] overflow-y-auto">
+					<div className="rounded-md border overflow-x-auto overflow-y-auto max-h-[650px] relative">
-						<Table className="w-full table-fixed">
+						<Table className="w-full min-w-[900px] table-fixed border-separate border-spacing-0">
-							<TableHeader>
+							<TableHeader className="sticky top-0 z-20 bg-background shadow-sm">
 								<TableRow>
-									<TableHead className="w-[80px]">ID</TableHead>
+									<TableHead className="w-[100px] bg-background text-sm font-bold">
-									<TableHead className="w-[180px]">Name</TableHead>
+										ID
-									<TableHead className="w-[250px]">Para1</TableHead>
+									</TableHead>
-									<TableHead className="w-[220px]">Facilities</TableHead>
+									<TableHead className="w-[200px] bg-background text-sm font-bold">
-									<TableHead className="w-[220px]">Services</TableHead>
+										Name
-									<TableHead className="w-[120px]">Actions</TableHead>
+									</TableHead>
+									<TableHead className="w-[250px] bg-background text-sm font-bold">
+										Para 1
+									</TableHead>
+									<TableHead className="w-[220px] bg-background text-sm font-bold">
+										Facilities
+									</TableHead>
+									<TableHead className="w-[220px] bg-background text-sm font-bold">
+										Services
+									</TableHead>
+									<TableHead className="w-[140px] bg-background text-right text-sm font-bold">
+										Actions
+									</TableHead>
 								</TableRow>
 							</TableHeader>
 
 							<TableBody>
 								{loading ? (
 									<TableRow>
-										<TableCell colSpan={6} className="text-center">
+										<TableCell colSpan={6} className="text-center py-10">
-											<Loader2 className="h-6 w-6 animate-spin mx-auto" />
+											<Loader2 className="h-8 w-8 animate-spin mx-auto" />
 										</TableCell>
 									</TableRow>
-								) : filteredDepartments.length === 0 ? (
+								) : currentItems.length === 0 ? (
 									<TableRow>
-										<TableCell colSpan={6} className="text-center">
+										<TableCell
+											colSpan={6}
+											className="text-center text-muted-foreground py-10 text-base"
+										>
 											No departments found
 										</TableCell>
 									</TableRow>
 								) : (
-									filteredDepartments.map((dep) => (
+									currentItems.map((dep) => (
-										<TableRow key={dep.departmentId}>
+										<TableRow
-											<TableCell>{dep.departmentId}</TableCell>
+											key={dep.departmentId}
-
+											className="hover:bg-muted/50"
-											<TableCell>
+										>
-												<div className="break-words">{dep.name}</div>
+											<TableCell className="font-mono text-xs">
+												{dep.departmentId}
 											</TableCell>
 
 											<TableCell>
-												<div className="break-words whitespace-normal">
+												<div
+													className="font-semibold text-base truncate"
+													title={dep.name}
+												>
+													{dep.name}
+												</div>
+											</TableCell>
+
+											<TableCell>
+												<div className="text-sm break-words whitespace-normal">
 													{truncate(dep.para1)}
 												</div>
 											</TableCell>
 
 											<TableCell>
-												<div className="break-words whitespace-normal">
+												<div className="text-sm break-words whitespace-normal">
 													{truncate(dep.facilities)}
 												</div>
 											</TableCell>
 
 											<TableCell>
-												<div className="break-words whitespace-normal">
+												<div className="text-sm break-words whitespace-normal">
 													{truncate(dep.services)}
 												</div>
 											</TableCell>
 
-											<TableCell className="flex gap-2 whitespace-nowrap">
+											<TableCell className="text-right">
-												<Button
+												<div className="flex justify-end gap-2">
-													size="sm"
+													<Button
-													variant="outline"
+														size="icon"
-													onClick={() => openView(dep)}>
+														variant="ghost"
-													<Eye className="h-4 w-4" />
+														className="h-9 w-9"
-												</Button>
+														onClick={() => openView(dep)}
+													>
+														<Eye className="h-4 w-4" />
+													</Button>
 
-												<Button
+													<Button
-													size="sm"
+														size="icon"
-													variant="outline"
+														variant="ghost"
-													onClick={() => openEdit(dep)}>
+														className="h-9 w-9"
-													<Pencil className="h-4 w-4" />
+														onClick={() => openEdit(dep)}
-												</Button>
+													>
+														<Pencil className="h-4 w-4" />
+													</Button>
 
-												<Button
+													<Button
-													size="sm"
+														size="icon"
-													variant="destructive"
+														variant="ghost"
-													onClick={() => handleDelete(dep.departmentId)}>
+														className="h-9 w-9 text-destructive hover:text-destructive hover:bg-destructive/10"
-													<Trash className="h-4 w-4" />
+														onClick={() => handleDelete(dep.departmentId)}
-												</Button>
+													>
+														<Trash className="h-4 w-4" />
+													</Button>
+												</div>
 											</TableCell>
 										</TableRow>
 									))
@@ -274,6 +335,52 @@ export default function DepartmentPage() {
 							</TableBody>
 						</Table>
 					</div>
+
+					{!loading && filteredDepartments.length > 0 && (
+						<div className="flex items-center justify-between px-2 py-6 border-t">
+							<div className="text-base text-muted-foreground">
+								Showing{" "}
+								<span className="font-semibold">{indexOfFirstItem + 1}</span> to{" "}
+								<span className="font-semibold">
+									{Math.min(indexOfLastItem, filteredDepartments.length)}
+								</span>{" "}
+								of{" "}
+								<span className="font-semibold">
+									{filteredDepartments.length}
+								</span>{" "}
+								departments
+							</div>
+							<div className="flex items-center gap-6">
+								<div className="text-base font-semibold">
+									Page {currentPage} of {totalPages}
+								</div>
+								<div className="flex gap-2">
+									<Button
+										variant="outline"
+										size="icon"
+										className="h-10 w-10"
+										onClick={() =>
+											setCurrentPage((prev) => Math.max(prev - 1, 1))
+										}
+										disabled={currentPage === 1}
+									>
+										<ChevronLeft className="h-5 w-5" />
+									</Button>
+									<Button
+										variant="outline"
+										size="icon"
+										className="h-10 w-10"
+										onClick={() =>
+											setCurrentPage((prev) => Math.min(prev + 1, totalPages))
+										}
+										disabled={currentPage === totalPages || totalPages === 0}
+									>
+										<ChevronRight className="h-5 w-5" />
+									</Button>
+								</div>
+							</div>
+						</div>
+					)}
 				</CardContent>
 			</Card>
 
@@ -346,7 +453,6 @@ export default function DepartmentPage() {
 
 			<Dialog open={viewOpen} onOpenChange={setViewOpen}>
 				<DialogContent className="w-full !max-w-5xl max-h-[90vh] overflow-y-auto">
-					{" "}
 					<DialogHeader>
 						<DialogTitle>Department Details</DialogTitle>
 					</DialogHeader>
@@ -355,35 +461,29 @@ export default function DepartmentPage() {
 							<p>
 								<b>ID:</b> {viewData.departmentId}
 							</p>
-
 							<p>
 								<b>Name:</b> {viewData.name}
 							</p>
-
 							<p>
 								<b>Para1:</b>
 								<br />
 								{viewData.para1}
 							</p>
-
 							<p>
 								<b>Para2:</b>
 								<br />
 								{viewData.para2}
 							</p>
-
 							<p>
 								<b>Para3:</b>
 								<br />
 								{viewData.para3}
 							</p>
-
 							<p>
 								<b>Facilities:</b>
 								<br />
 								{viewData.facilities}
 							</p>
-
 							<p>
 								<b>Services:</b>
 								<br />

frontend/src/pages/Doctor.tsx

@@ -1,4 +1,5 @@
-import {useState, useEffect, useCallback} from "react";
+import { useState, useEffect, useCallback } from "react";
+import { AxiosError } from "axios";
 import {
 	getDoctorsApi,
 	createDoctorApi,
@@ -6,8 +7,7 @@ import {
 	deleteDoctorApi,
 	getDoctorTimingApi,
 } from "@/api/doctor";
-
+import { getDepartmentsApi } from "@/api/department";
-import {getDepartmentsApi} from "@/api/department";
 
 import {
 	Table,
@@ -17,10 +17,8 @@ import {
 	TableHeader,
 	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 {
 	Dialog,
 	DialogContent,
@@ -28,33 +26,49 @@ import {
 	DialogTitle,
 	DialogFooter,
 } from "@/components/ui/dialog";
-
+import { Input } from "@/components/ui/input";
-import {Popover, PopoverContent, PopoverTrigger} from "@/components/ui/popover";
+import { Badge } from "@/components/ui/badge";
 import {
-	Command,
+	Loader2,
-	CommandGroup,
+	RefreshCw,
-	CommandItem,
+	Plus,
-	CommandInput,
+	Pencil,
-} from "@/components/ui/command";
+	Trash,
-
+	ChevronLeft,
-import {Input} from "@/components/ui/input";
+	ChevronRight,
-import {Loader2, Plus, Pencil, Trash, RefreshCw} from "lucide-react";
+} from "lucide-react";
 
 interface Department {
 	departmentId: string;
 	name: string;
 }
 
+const DAYS = [
+	"monday",
+	"tuesday",
+	"wednesday",
+	"thursday",
+	"friday",
+	"saturday",
+	"sunday",
+	"additional",
+];
+
 export default function DoctorPage() {
 	const [doctors, setDoctors] = useState<any[]>([]);
 	const [departments, setDepartments] = useState<Department[]>([]);
 	const [loading, setLoading] = useState(true);
+	const [error, setError] = useState("");
+
 	const [openModal, setOpenModal] = useState(false);
 	const [editing, setEditing] = useState<any>(null);
 
 	const [searchText, setSearchText] = useState("");
 	const [filterDepartment, setFilterDepartment] = useState("");
 
+	const [currentPage, setCurrentPage] = useState(1);
+	const itemsPerPage = 10;
+
 	const [form, setForm] = useState<any>({
 		doctorId: "",
 		name: "",
@@ -66,16 +80,20 @@ export default function DoctorPage() {
 
 	const fetchAll = useCallback(async () => {
 		setLoading(true);
+		setError("");
 		try {
 			const [docRes, depRes] = await Promise.all([
 				getDoctorsApi(),
 				getDepartmentsApi(),
 			]);
-
 			setDoctors(docRes?.data || []);
 			setDepartments(depRes?.data || []);
 		} catch (err) {
-			console.error(err);
+			if (err instanceof AxiosError) {
+				setError(err.response?.data?.message || "Failed to load data");
+			} else {
+				setError("Something went wrong");
+			}
 		} finally {
 			setLoading(false);
 		}
@@ -97,13 +115,21 @@ export default function DoctorPage() {
 		return matchesSearch && matchesDepartment;
 	});
 
+	useEffect(() => {
+		setCurrentPage(1);
+	}, [searchText, filterDepartment]);
+
+	const totalPages = Math.ceil(filteredDoctors.length / itemsPerPage);
+	const indexOfLastItem = currentPage * itemsPerPage;
+	const indexOfFirstItem = indexOfLastItem - itemsPerPage;
+	const currentItems = filteredDoctors.slice(indexOfFirstItem, indexOfLastItem);
+
 	function handleChange(e: any) {
-		setForm({...form, [e.target.name]: e.target.value});
+		setForm({ ...form, [e.target.name]: e.target.value });
 	}
 
-	function handleDepartmentChange(depId: string) {
+	function handleDepartmentToggle(depId: string) {
 		const exists = form.departments.find((d: any) => d.departmentId === depId);
-
 		if (exists) {
 			setForm({
 				...form,
@@ -114,7 +140,7 @@ export default function DoctorPage() {
 		} else {
 			setForm({
 				...form,
-				departments: [...form.departments, {departmentId: depId, timing: {}}],
+				departments: [...form.departments, { departmentId: depId, timing: {} }],
 			});
 		}
 	}
@@ -124,10 +150,7 @@ export default function DoctorPage() {
 			...form,
 			departments: form.departments.map((d: any) =>
 				d.departmentId === depId
-					? {
+					? { ...d, timing: { ...d.timing, [day]: value } }
-							...d,
-							timing: {...d.timing, [day]: value},
-						}
 					: d,
 			),
 		});
@@ -148,25 +171,20 @@ export default function DoctorPage() {
 
 	async function openEdit(doc: any) {
 		setEditing(doc);
-
 		try {
 			const timingRes = await getDoctorTimingApi(doc.doctorId);
 			const timingData = timingRes?.data?.departments || [];
-
-			const mappedDepartments = timingData.map((d: any) => ({
-				departmentId: d.departmentId,
-				timing: d.timing || {},
-			}));
-
 			setForm({
 				doctorId: doc.doctorId,
 				name: doc.name,
 				designation: doc.designation,
 				workingStatus: doc.workingStatus,
 				qualification: doc.qualification,
-				departments: mappedDepartments,
+				departments: timingData.map((d: any) => ({
+					departmentId: d.departmentId,
+					timing: d.timing || {},
+				})),
 			});
-
 			setOpenModal(true);
 		} catch (err) {
 			console.error(err);
@@ -180,38 +198,40 @@ export default function DoctorPage() {
 			} else {
 				await createDoctorApi(form);
 			}
-
 			setOpenModal(false);
 			fetchAll();
-		} catch (err) {
+		} catch (error) {
-			console.error(err);
+			console.error(error);
 		}
 	}
 
 	async function handleDelete(id: string) {
-		if (!confirm("Delete doctor?")) return;
+		if (!confirm("Delete this doctor?")) return;
-		await deleteDoctorApi(id);
+		try {
-		fetchAll();
+			await deleteDoctorApi(id);
+			fetchAll();
+		} catch (error) {
+			console.error(error);
+		}
 	}
 
 	return (
 		<div className="p-6 space-y-6">
-			{/* HEADER */}
+			<div className="flex flex-col md:flex-row md:justify-between md:items-center gap-4">
-			<div className="flex flex-col md:flex-row md:justify-between md:items-center gap-3">
+				<h1 className="text-3xl font-bold">Doctors</h1>
-				<h1 className="text-2xl font-bold">Doctors</h1>
 
-				<div className="flex flex-wrap gap-2">
+				<div className="flex flex-wrap gap-3">
 					<Input
 						placeholder="Search doctor..."
 						value={searchText}
 						onChange={(e) => setSearchText(e.target.value)}
-						className="w-[200px]"
+						className="w-[250px] text-base"
 					/>
 
 					<select
 						value={filterDepartment}
 						onChange={(e) => setFilterDepartment(e.target.value)}
-						className="border rounded px-2 py-1"
+						className="flex h-10 w-[220px] rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
 					>
 						<option value="">All Departments</option>
 						{departments.map((dep) => (
@@ -221,93 +241,149 @@ export default function DoctorPage() {
 						))}
 					</select>
 
-					<Button variant="outline" onClick={fetchAll} disabled={loading}>
+					<Button
-						<RefreshCw className="mr-2 h-4 w-4" />
+						variant="outline"
+						onClick={fetchAll}
+						disabled={loading}
+						className="text-base"
+					>
+						<RefreshCw className="mr-2 h-5 w-5" />
 						Refresh
 					</Button>
 
-					<Button onClick={openAdd}>
+					<Button onClick={openAdd} className="text-base">
-						<Plus className="mr-2 h-4 w-4" />
+						<Plus className="mr-2 h-5 w-5" />
 						Add Doctor
 					</Button>
 				</div>
 			</div>
 
-			{/* TABLE */}
+			{error && (
+				<div className="p-4 text-red-600 bg-red-50 border rounded-md text-base">
+					{error}
+				</div>
+			)}
+
 			<Card>
 				<CardHeader>
-					<CardTitle>Doctor List</CardTitle>
+					<CardTitle className="text-xl">Doctor List</CardTitle>
 				</CardHeader>
 
-				<CardContent>
+				<CardContent className="p-0 sm:p-6 space-y-4">
-					<div className="overflow-x-auto">
+					<div className="rounded-md border overflow-x-auto overflow-y-auto max-h-[650px] relative">
-						<Table className="min-w-[1000px]">
+						<Table className="w-full min-w-[900px] table-fixed border-separate border-spacing-0">
-							<TableHeader>
+							<TableHeader className="sticky top-0 z-20 bg-background shadow-sm">
 								<TableRow>
-									<TableHead>ID</TableHead>
+									<TableHead className="w-[100px] bg-background text-sm font-bold">
-									<TableHead>Name</TableHead>
+										ID
-									<TableHead>Designation</TableHead>
+									</TableHead>
-									<TableHead>Status</TableHead>
+									<TableHead className="w-[200px] bg-background text-sm font-bold">
-									<TableHead>Qualification</TableHead>
+										Name
-									<TableHead>Departments</TableHead>
+									</TableHead>
-									<TableHead>Timing</TableHead>
+									<TableHead className="w-[180px] bg-background text-sm font-bold">
-									<TableHead>Actions</TableHead>
+										Designation
+									</TableHead>
+									<TableHead className="w-[180px] bg-background text-sm font-bold">
+										Qualification
+									</TableHead>
+									<TableHead className="w-[220px] bg-background text-sm font-bold">
+										Departments
+									</TableHead>
+									<TableHead className="w-[120px] bg-background text-right text-sm font-bold">
+										Actions
+									</TableHead>
 								</TableRow>
 							</TableHeader>
 
 							<TableBody>
 								{loading ? (
 									<TableRow>
-										<TableCell colSpan={8} className="text-center">
+										<TableCell colSpan={6} className="text-center py-10">
-											<Loader2 className="h-6 w-6 animate-spin mx-auto" />
+											<Loader2 className="h-8 w-8 animate-spin mx-auto" />
 										</TableCell>
 									</TableRow>
-								) : filteredDoctors.length === 0 ? (
+								) : currentItems.length === 0 ? (
 									<TableRow>
-										<TableCell colSpan={8} className="text-center">
+										<TableCell
+											colSpan={6}
+											className="text-center text-muted-foreground py-10 text-base"
+										>
 											No doctors found
 										</TableCell>
 									</TableRow>
 								) : (
-									filteredDoctors.map((doc) => (
+									currentItems.map((doc) => (
-										<TableRow key={doc.doctorId}>
+										<TableRow key={doc.doctorId} className="hover:bg-muted/50">
-											<TableCell>{doc.doctorId}</TableCell>
+											<TableCell className="truncate font-mono text-xs">
-											<TableCell>{doc.name}</TableCell>
+												{doc.doctorId}
-											<TableCell>{doc.designation}</TableCell>
+											</TableCell>
-											<TableCell>{doc.workingStatus}</TableCell>
-											<TableCell>{doc.qualification}</TableCell>
 
 											<TableCell>
-												{doc.departments
+												<div
-													?.map((d: any) => d.departmentName)
+													className="font-semibold text-base truncate"
-													.join(", ")}
+													title={doc.name}
+												>
+													{doc.name}
+												</div>
+												<div className="text-xs text-muted-foreground truncate italic">
+													{doc.workingStatus}
+												</div>
 											</TableCell>
 
-											<TableCell className="max-w-[250px] whitespace-normal">
+											<TableCell>
-												{doc.departments?.map((d: any) => (
+												<div
-													<div key={d.departmentId}>
+													className="truncate text-sm"
-														<b>{d.departmentName}:</b>{" "}
+													title={doc.designation}
-														{JSON.stringify(d.timing)}
+												>
-													</div>
+													{doc.designation || "-"}
-												))}
+												</div>
 											</TableCell>
 
-											<TableCell className="flex gap-2">
+											<TableCell>
-												<Button
+												<div
-													size="sm"
+													className="truncate text-sm"
-													variant="outline"
+													title={doc.qualification}
-													onClick={() => openEdit(doc)}
 												>
-													<Pencil className="h-4 w-4" />
+													{doc.qualification || "-"}
-												</Button>
+												</div>
+											</TableCell>
 
-												<Button
+											<TableCell>
-													size="sm"
+												<div className="flex flex-wrap gap-1">
-													variant="destructive"
+													{doc.departments?.map((d: any) => (
-													onClick={() => handleDelete(doc.doctorId)}
+														<Badge
-												>
+															key={d.departmentId}
-													<Trash className="h-4 w-4" />
+															variant="secondary"
-												</Button>
+															className="text-xs px-2 h-5 leading-none"
+														>
+															{d.departmentName}
+														</Badge>
+													))}
+													{doc.departments?.length === 0 && (
+														<span className="text-muted-foreground">-</span>
+													)}
+												</div>
+											</TableCell>
+
+											<TableCell className="text-right">
+												<div className="flex justify-end gap-2">
+													<Button
+														size="icon"
+														variant="ghost"
+														className="h-9 w-9"
+														onClick={() => openEdit(doc)}
+													>
+														<Pencil className="h-4 w-4" />
+													</Button>
+													<Button
+														size="icon"
+														variant="ghost"
+														className="h-9 w-9 text-destructive hover:text-destructive hover:bg-destructive/10"
+														onClick={() => handleDelete(doc.doctorId)}
+													>
+														<Trash className="h-4 w-4" />
+													</Button>
+												</div>
 											</TableCell>
 										</TableRow>
 									))
@@ -315,153 +391,212 @@ export default function DoctorPage() {
 							</TableBody>
 						</Table>
 					</div>
+
+					{!loading && filteredDoctors.length > 0 && (
+						<div className="flex items-center justify-between px-2 py-6 border-t">
+							<div className="text-base text-muted-foreground">
+								Showing{" "}
+								<span className="font-semibold">{indexOfFirstItem + 1}</span> to{" "}
+								<span className="font-semibold">
+									{Math.min(indexOfLastItem, filteredDoctors.length)}
+								</span>{" "}
+								of{" "}
+								<span className="font-semibold">{filteredDoctors.length}</span>{" "}
+								doctors
+							</div>
+							<div className="flex items-center gap-6">
+								<div className="text-base font-semibold">
+									Page {currentPage} of {totalPages}
+								</div>
+								<div className="flex gap-2">
+									<Button
+										variant="outline"
+										size="icon"
+										className="h-10 w-10"
+										onClick={() =>
+											setCurrentPage((prev) => Math.max(prev - 1, 1))
+										}
+										disabled={currentPage === 1}
+									>
+										<ChevronLeft className="h-5 w-5" />
+									</Button>
+									<Button
+										variant="outline"
+										size="icon"
+										className="h-10 w-10"
+										onClick={() =>
+											setCurrentPage((prev) => Math.min(prev + 1, totalPages))
+										}
+										disabled={currentPage === totalPages || totalPages === 0}
+									>
+										<ChevronRight className="h-5 w-5" />
+									</Button>
+								</div>
+							</div>
+						</div>
+					)}
 				</CardContent>
 			</Card>
 
-			{/* MODAL */}
-			{/* MODAL */}
 			<Dialog open={openModal} onOpenChange={setOpenModal}>
-				<DialogContent className="overflow-y-auto max-h-[80vh] ">
+				<DialogContent className="w-full !max-w-5xl max-h-[90vh] overflow-y-auto">
 					<DialogHeader>
-						<DialogTitle>{editing ? "Edit Doctor" : "Add Doctor"}</DialogTitle>
+						<DialogTitle className="text-2xl">
+							{editing ? "Edit Doctor" : "Add Doctor"}
+						</DialogTitle>
 					</DialogHeader>
 
-					<div className="space-y-4">
+					<div className="grid grid-cols-1 md:grid-cols-2 gap-8 mt-6">
-						<Input
+						<div className="space-y-6">
-							name="doctorId"
+							<h3 className="font-bold text-base border-b pb-2">
-							placeholder="Doctor ID"
+								Basic Information
-							value={form.doctorId}
+							</h3>
-							onChange={handleChange}
+							<div className="space-y-4">
-							disabled={!!editing}
+								<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>
 
-						<Input
+							<div className="p-5 border rounded-md bg-muted/20">
-							name="name"
+								<p className="text-base font-bold mb-4">Assign Departments</p>
-							placeholder="Name"
+								<div className="grid grid-cols-2 gap-3">
-							value={form.name}
+									{departments.map((dep) => {
-							onChange={handleChange}
+										const isSelected = form.departments.some(
-						/>
+											(d: any) => d.departmentId === dep.departmentId,
-						<Input
+										);
-							name="designation"
+										return (
-							placeholder="Designation"
+											<Button
-							value={form.designation}
+												key={dep.departmentId}
-							onChange={handleChange}
+												type="button"
-						/>
+												variant={isSelected ? "default" : "outline"}
-						<Input
+												size="sm"
-							name="workingStatus"
+												className="justify-start text-sm h-9"
-							placeholder="Working Status"
+												onClick={() => handleDepartmentToggle(dep.departmentId)}
-							value={form.workingStatus}
+											>
-							onChange={handleChange}
+												{dep.name}
-						/>
+											</Button>
-						<Input
+										);
-							name="qualification"
+									})}
-							placeholder="Qualification"
+								</div>
-							value={form.qualification}
+							</div>
-							onChange={handleChange}
-						/>
-
-						{/* Departments */}
-						<div>
-							<p className="font-medium mb-2">Departments</p>
-
-							<Popover>
-								<PopoverTrigger asChild>
-									<Button className="w-full justify-between h-auto min-h-[40px]">
-										{form.departments.length > 0 ? (
-											<div className="flex flex-col items-start gap-1 text-left">
-												{form.departments.map((d: any) => {
-													const name = departments.find(
-														(dep) => dep.departmentId === d.departmentId,
-													)?.name;
-
-													return (
-														<span key={d.departmentId} className="text-sm">
-															{name}
-														</span>
-													);
-												})}
-											</div>
-										) : (
-											<span>Select Departments</span>
-										)}
-									</Button>
-								</PopoverTrigger>
-
-								<PopoverContent className="w-[300px] p-0">
-									<Command>
-										<CommandInput placeholder="Search department..." />
-
-										<CommandGroup className="max-h-[250px] overflow-y-auto">
-											{departments.map((dep) => {
-												const selected = form.departments.some(
-													(d: any) => d.departmentId === dep.departmentId,
-												);
-
-												return (
-													<CommandItem
-														key={dep.departmentId}
-														className="flex justify-between"
-														onSelect={() =>
-															handleDepartmentChange(dep.departmentId)
-														}
-													>
-														<span>{dep.name}</span>
-														{selected && <span>✔</span>}
-													</CommandItem>
-												);
-											})}
-										</CommandGroup>
-									</Command>
-								</PopoverContent>
-							</Popover>
 						</div>
 
-						{form.departments.map((dep: any) => {
+						<div className="space-y-6">
-							const depName = departments.find(
+							<h3 className="font-bold text-base border-b pb-2">
-								(d) => d.departmentId === dep.departmentId,
+								Working Hours / Timing
-							)?.name;
+							</h3>
-
+							{form.departments.length === 0 ? (
-							return (
+								<div className="text-base text-muted-foreground italic py-24 text-center border-2 border-dashed rounded-lg">
-								<div
+									Select a department to configure timing slots
-									key={dep.departmentId}
-									className="tw-border tw-p-3 tw-rounded"
-								>
-									<p className="tw-font-semibold">{depName}</p>
-
-									{[
-										"monday",
-										"tuesday",
-										"wednesday",
-										"thursday",
-										"friday",
-										"saturday",
-										"sunday",
-										"additional",
-									].map((day) => (
-										<Input
-											key={day}
-											placeholder={day}
-											value={dep.timing?.[day] || ""}
-											onChange={(e) =>
-												handleTimingChange(
-													dep.departmentId,
-													day,
-													e.target.value,
-												)
-											}
-										/>
-									))}
 								</div>
-							);
+							) : (
-						})}
+								<div className="space-y-8">
+									{form.departments.map((dep: any) => {
+										const depName = departments.find(
+											(d) => d.departmentId === dep.departmentId,
+										)?.name;
+										return (
+											<div
+												key={dep.departmentId}
+												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">
+														{depName}
+													</p>
+													<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 key={day} className="space-y-1">
+															<label className="text-xs uppercase font-bold text-muted-foreground">
+																{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>
+					<DialogFooter className="mt-10 pt-6 border-t">
-						<Button variant="outline" onClick={() => setOpenModal(false)}>
+						<Button
+							variant="ghost"
+							onClick={() => setOpenModal(false)}
+							className="text-base"
+						>
 							Cancel
 						</Button>
-						<Button onClick={handleSubmit}>
+						<Button onClick={handleSubmit} className="px-10 text-base">
-							{editing ? "Update" : "Create"}
+							{editing ? "Save Changes" : "Create Doctor Profile"}
 						</Button>
 					</DialogFooter>
 				</DialogContent>

frontend/src/pages/candidates.tsx

@@ -13,11 +13,26 @@ import {
 } from "@/components/ui/table";
 
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
+import {
+	Dialog,
+	DialogContent,
+	DialogHeader,
+	DialogTitle,
+	DialogFooter,
+} from "@/components/ui/dialog";
 
-import { Loader2, Trash, RefreshCw, Download } from "lucide-react";
+import {
+	Loader2,
+	Trash,
+	RefreshCw,
+	Download,
+	ChevronLeft,
+	ChevronRight,
+	Eye,
+	User,
+} from "lucide-react";
 
 export default function CandidatePage() {
 	const [candidates, setCandidates] = useState<any[]>([]);
@@ -26,6 +41,12 @@ export default function CandidatePage() {
 	const [searchText, setSearchText] = useState("");
 	const [filterCareer, setFilterCareer] = useState("");
 
+	const [viewOpen, setViewOpen] = useState(false);
+	const [viewData, setViewData] = useState<any>(null);
+
+	const [currentPage, setCurrentPage] = useState(1);
+	const itemsPerPage = 10;
+
 	const fetchAll = useCallback(async () => {
 		setLoading(true);
 		try {
@@ -55,6 +76,23 @@ export default function CandidatePage() {
 		return matchesSearch && matchesCareer;
 	});
 
+	useEffect(() => {
+		setCurrentPage(1);
+	}, [searchText, filterCareer]);
+
+	const totalPages = Math.ceil(filteredCandidates.length / itemsPerPage);
+	const indexOfLastItem = currentPage * itemsPerPage;
+	const indexOfFirstItem = indexOfLastItem - itemsPerPage;
+	const currentItems = filteredCandidates.slice(
+		indexOfFirstItem,
+		indexOfLastItem,
+	);
+
+	function openView(item: any) {
+		setViewData(item);
+		setViewOpen(true);
+	}
+
 	async function handleDelete(id: number) {
 		if (!confirm("Delete candidate?")) return;
 		await deleteCandidateApi(id);
@@ -71,7 +109,7 @@ export default function CandidatePage() {
 			Designation: item.career?.designation,
 			Subject: item.subject,
 			CoverLetter: item.coverLetter,
-			Date: new Date(item.createdAt).toLocaleDateString(),
+			AppliedDate: new Date(item.createdAt).toLocaleDateString(),
 		}));
 
 		exportToExcel(exportData, "candidates");
@@ -79,31 +117,36 @@ export default function CandidatePage() {
 
 	return (
 		<div className="p-6 space-y-6">
-			<div className="flex justify-between items-center gap-3 flex-wrap">
+			<div className="flex flex-col md:flex-row md:justify-between md:items-center gap-4">
-				<h1 className="text-2xl font-bold">Candidates</h1>
+				<h1 className="text-3xl font-bold">Candidates</h1>
 
-				<div className="flex flex-wrap gap-2">
+				<div className="flex flex-wrap gap-3">
 					<Input
-						placeholder="Search name / phone / email..."
+						placeholder="Search candidate..."
 						value={searchText}
 						onChange={(e) => setSearchText(e.target.value)}
-						className="w-[220px]"
+						className="w-[250px] text-base"
 					/>
 
 					<Input
-						placeholder="Filter Career"
+						placeholder="Filter by Career"
 						value={filterCareer}
 						onChange={(e) => setFilterCareer(e.target.value)}
-						className="w-[200px]"
+						className="w-[200px] text-base"
 					/>
 
-					<Button variant="outline" onClick={fetchAll} disabled={loading}>
+					<Button
-						<RefreshCw className="mr-2 h-4 w-4" />
+						variant="outline"
+						onClick={fetchAll}
+						disabled={loading}
+						className="text-base"
+					>
+						<RefreshCw className="mr-2 h-5 w-5" />
 						Refresh
 					</Button>
 
-					<Button variant="outline" onClick={handleExport}>
+					<Button onClick={handleExport} className="text-base">
-						<Download className="mr-2 h-4 w-4" />
+						<Download className="mr-2 h-5 w-5" />
 						Export
 					</Button>
 				</div>
@@ -111,68 +154,104 @@ export default function CandidatePage() {
 
 			<Card>
 				<CardHeader>
-					<CardTitle>Candidate List</CardTitle>
+					<CardTitle className="text-xl">Application List</CardTitle>
 				</CardHeader>
 
-				<CardContent>
+				<CardContent className="p-0 sm:p-6 space-y-4">
-					<div className="overflow-x-auto">
+					<div className="rounded-md border overflow-x-auto overflow-y-auto max-h-[650px] relative">
-						<Table className="min-w-[900px]">
+						<Table className="w-full min-w-[1100px] table-fixed border-separate border-spacing-0">
-							<TableHeader>
+							<TableHeader className="sticky top-0 z-20 bg-background shadow-sm">
 								<TableRow>
-									<TableHead>ID</TableHead>
+									<TableHead className="w-[60px] bg-background font-bold text-sm">
-									<TableHead>Name</TableHead>
+										ID
-									<TableHead>Phone</TableHead>
+									</TableHead>
-									<TableHead>Email</TableHead>
+									<TableHead className="w-[220px] bg-background font-bold text-sm">
-									<TableHead>Career</TableHead>
+										Full Name
-									<TableHead>Designation</TableHead>
+									</TableHead>
-									<TableHead>Subject</TableHead>
+									<TableHead className="w-[180px] bg-background font-bold text-sm">
-									<TableHead>Cover Letter</TableHead>
+										Career & Post
-									<TableHead>Applied On</TableHead>
+									</TableHead>
-									<TableHead>Actions</TableHead>
+									<TableHead className="w-[150px] bg-background font-bold text-sm">
+										Contact
+									</TableHead>
+									<TableHead className="w-[140px] bg-background font-bold text-sm">
+										Applied On
+									</TableHead>
+									<TableHead className="w-[250px] bg-background font-bold text-sm">
+										Cover Letter
+									</TableHead>
+									<TableHead className="w-[120px] bg-background font-bold text-right text-sm">
+										Actions
+									</TableHead>
 								</TableRow>
 							</TableHeader>
 
 							<TableBody>
 								{loading ? (
 									<TableRow>
-										<TableCell colSpan={10} className="text-center">
+										<TableCell colSpan={7} className="text-center py-10">
-											<Loader2 className="h-6 w-6 animate-spin mx-auto" />
+											<Loader2 className="h-8 w-8 animate-spin mx-auto" />
 										</TableCell>
 									</TableRow>
-								) : filteredCandidates.length === 0 ? (
+								) : currentItems.length === 0 ? (
 									<TableRow>
-										<TableCell colSpan={10} className="text-center">
+										<TableCell
+											colSpan={7}
+											className="text-center text-muted-foreground py-10 text-base"
+										>
 											No candidates found
 										</TableCell>
 									</TableRow>
 								) : (
-									filteredCandidates.map((item) => (
+									currentItems.map((item) => (
-										<TableRow key={item.id}>
+										<TableRow key={item.id} className="hover:bg-muted/50">
-											<TableCell>{item.id}</TableCell>
+											<TableCell className="font-mono text-xs">
-											<TableCell>{item.fullName}</TableCell>
+												{item.id}
-											<TableCell>{item.mobile}</TableCell>
-											<TableCell>{item.email}</TableCell>
-
-											<TableCell>{item.career?.post}</TableCell>
-											<TableCell>{item.career?.designation}</TableCell>
-
-											<TableCell>{item.subject}</TableCell>
-
-											<TableCell className="max-w-[250px] whitespace-normal">
-												{item.coverLetter}
 											</TableCell>
-
 											<TableCell>
+												<div className="font-semibold text-base truncate">
+													{item.fullName}
+												</div>
+												<div className="text-xs text-muted-foreground truncate">
+													{item.email}
+												</div>
+											</TableCell>
+											<TableCell>
+												<div className="text-sm font-medium">
+													{item.career?.post || "-"}
+												</div>
+												<div className="text-[10px] text-muted-foreground truncate">
+													{item.career?.designation}
+												</div>
+											</TableCell>
+											<TableCell className="text-sm">{item.mobile}</TableCell>
+											<TableCell className="text-sm">
 												{new Date(item.createdAt).toLocaleDateString()}
 											</TableCell>
-
 											<TableCell>
-												<Button
+												<div className="text-sm line-clamp-2 text-muted-foreground italic">
-													size="sm"
+													{item.coverLetter || "No cover letter provided."}
-													variant="destructive"
+												</div>
-													onClick={() => handleDelete(item.id)}>
+											</TableCell>
-													<Trash className="h-4 w-4" />
+											<TableCell className="text-right">
-												</Button>
+												<div className="flex justify-end gap-2">
+													<Button
+														size="icon"
+														variant="ghost"
+														className="h-9 w-9"
+														onClick={() => openView(item)}
+													>
+														<Eye className="h-4 w-4" />
+													</Button>
+													<Button
+														size="icon"
+														variant="ghost"
+														className="h-9 w-9 text-destructive hover:text-destructive hover:bg-destructive/10"
+														onClick={() => handleDelete(item.id)}
+													>
+														<Trash className="h-4 w-4" />
+													</Button>
+												</div>
 											</TableCell>
 										</TableRow>
 									))
@@ -180,8 +259,126 @@ export default function CandidatePage() {
 							</TableBody>
 						</Table>
 					</div>
+
+					{!loading && filteredCandidates.length > 0 && (
+						<div className="flex items-center justify-between px-2 py-6 border-t">
+							<div className="text-base text-muted-foreground">
+								Showing{" "}
+								<span className="font-semibold">{indexOfFirstItem + 1}</span> to{" "}
+								<span className="font-semibold">
+									{Math.min(indexOfLastItem, filteredCandidates.length)}
+								</span>{" "}
+								of{" "}
+								<span className="font-semibold">
+									{filteredCandidates.length}
+								</span>
+							</div>
+							<div className="flex items-center gap-6">
+								<div className="text-base font-semibold">
+									Page {currentPage} of {totalPages}
+								</div>
+								<div className="flex gap-2">
+									<Button
+										variant="outline"
+										size="icon"
+										className="h-10 w-10"
+										onClick={() =>
+											setCurrentPage((prev) => Math.max(prev - 1, 1))
+										}
+										disabled={currentPage === 1}
+									>
+										<ChevronLeft className="h-5 w-5" />
+									</Button>
+									<Button
+										variant="outline"
+										size="icon"
+										className="h-10 w-10"
+										onClick={() =>
+											setCurrentPage((prev) => Math.min(prev + 1, totalPages))
+										}
+										disabled={currentPage === totalPages || totalPages === 0}
+									>
+										<ChevronRight className="h-5 w-5" />
+									</Button>
+								</div>
+							</div>
+						</div>
+					)}
 				</CardContent>
 			</Card>
+
+			<Dialog open={viewOpen} onOpenChange={setViewOpen}>
+				<DialogContent className="w-full !max-w-3xl max-h-[85vh] overflow-y-auto">
+					<DialogHeader>
+						<DialogTitle className="text-2xl border-b pb-2 flex items-center gap-2">
+							<User className="h-6 w-6" /> Candidate Details
+						</DialogTitle>
+					</DialogHeader>
+					{viewData && (
+						<div className="space-y-6 py-4">
+							<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+								<div className="space-y-4">
+									<div>
+										<p className="text-xs uppercase font-bold text-muted-foreground">
+											Personal Information
+										</p>
+										<p className="text-lg font-bold text-primary">
+											{viewData.fullName}
+										</p>
+										<p className="text-sm font-medium">{viewData.email}</p>
+										<p className="text-sm">{viewData.mobile}</p>
+									</div>
+									<div>
+										<p className="text-xs uppercase font-bold text-muted-foreground">
+											Applied For
+										</p>
+										<p className="text-base font-semibold">
+											{viewData.career?.post || "General Application"}
+										</p>
+										<p className="text-sm text-muted-foreground">
+											{viewData.career?.designation}
+										</p>
+									</div>
+									<div>
+										<p className="text-xs uppercase font-bold text-muted-foreground">
+											Application Date
+										</p>
+										<p className="text-sm">
+											{new Date(viewData.createdAt).toLocaleString()}
+										</p>
+									</div>
+								</div>
+								<div className="space-y-4">
+									<div>
+										<p className="text-xs uppercase font-bold text-muted-foreground">
+											Subject
+										</p>
+										<p className="text-sm font-semibold">
+											{viewData.subject || "N/A"}
+										</p>
+									</div>
+									<div className="p-4 bg-muted/30 rounded-lg">
+										<p className="text-xs uppercase font-bold text-muted-foreground mb-2">
+											Cover Letter / Message
+										</p>
+										<p className="text-sm leading-relaxed whitespace-pre-wrap italic">
+											{viewData.coverLetter || "No cover letter provided."}
+										</p>
+									</div>
+								</div>
+							</div>
+						</div>
+					)}
+					<DialogFooter>
+						<Button
+							onClick={() => setViewOpen(false)}
+							className="w-full md:w-auto"
+						>
+							Close
+						</Button>
+					</DialogFooter>
+				</DialogContent>
+			</Dialog>
 		</div>
 	);
 }

frontend/src/pages/inquiry.tsx

@@ -13,11 +13,26 @@ import {
 } from "@/components/ui/table";
 
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
+import {
+	Dialog,
+	DialogContent,
+	DialogHeader,
+	DialogTitle,
+	DialogFooter,
+} from "@/components/ui/dialog";
 
-import { Loader2, Trash, RefreshCw, Download } from "lucide-react";
+import {
+	Loader2,
+	Trash,
+	RefreshCw,
+	Download,
+	ChevronLeft,
+	ChevronRight,
+	Eye,
+	Mail,
+} from "lucide-react";
 
 export default function InquiryPage() {
 	const [inquiries, setInquiries] = useState<any[]>([]);
@@ -25,6 +40,12 @@ export default function InquiryPage() {
 
 	const [searchText, setSearchText] = useState("");
 
+	const [viewOpen, setViewOpen] = useState(false);
+	const [viewData, setViewData] = useState<any>(null);
+
+	const [currentPage, setCurrentPage] = useState(1);
+	const itemsPerPage = 10;
+
 	const fetchAll = useCallback(async () => {
 		setLoading(true);
 		try {
@@ -50,6 +71,23 @@ export default function InquiryPage() {
 		);
 	});
 
+	useEffect(() => {
+		setCurrentPage(1);
+	}, [searchText]);
+
+	const totalPages = Math.ceil(filteredInquiries.length / itemsPerPage);
+	const indexOfLastItem = currentPage * itemsPerPage;
+	const indexOfFirstItem = indexOfLastItem - itemsPerPage;
+	const currentItems = filteredInquiries.slice(
+		indexOfFirstItem,
+		indexOfLastItem,
+	);
+
+	function openView(item: any) {
+		setViewData(item);
+		setViewOpen(true);
+	}
+
 	async function handleDelete(id: number) {
 		if (!confirm("Delete inquiry?")) return;
 		await deleteInquiryApi(id);
@@ -72,24 +110,29 @@ export default function InquiryPage() {
 
 	return (
 		<div className="p-6 space-y-6">
-			<div className="flex justify-between items-center gap-3 flex-wrap">
+			<div className="flex flex-col md:flex-row md:justify-between md:items-center gap-4">
-				<h1 className="text-2xl font-bold">Inquiries</h1>
+				<h1 className="text-3xl font-bold">Inquiries</h1>
 
-				<div className="flex flex-wrap gap-2">
+				<div className="flex flex-wrap gap-3">
 					<Input
-						placeholder="Search name / phone / email / subject..."
+						placeholder="Search name / phone / subject..."
 						value={searchText}
 						onChange={(e) => setSearchText(e.target.value)}
-						className="w-[260px]"
+						className="w-[280px] text-base"
 					/>
 
-					<Button variant="outline" onClick={fetchAll} disabled={loading}>
+					<Button
-						<RefreshCw className="mr-2 h-4 w-4" />
+						variant="outline"
+						onClick={fetchAll}
+						disabled={loading}
+						className="text-base"
+					>
+						<RefreshCw className="mr-2 h-5 w-5" />
 						Refresh
 					</Button>
 
-					<Button variant="outline" onClick={handleExport}>
+					<Button onClick={handleExport} className="text-base">
-						<Download className="mr-2 h-4 w-4" />
+						<Download className="mr-2 h-5 w-5" />
 						Export
 					</Button>
 				</div>
@@ -97,62 +140,100 @@ export default function InquiryPage() {
 
 			<Card>
 				<CardHeader>
-					<CardTitle>Inquiry List</CardTitle>
+					<CardTitle className="text-xl">Customer Inquiries</CardTitle>
 				</CardHeader>
 
-				<CardContent>
+				<CardContent className="p-0 sm:p-6 space-y-4">
-					<div className="overflow-x-auto">
+					<div className="rounded-md border overflow-x-auto overflow-y-auto max-h-[650px] relative">
-						<Table className="min-w-[900px]">
+						<Table className="w-full min-w-[1000px] table-fixed border-separate border-spacing-0">
-							<TableHeader>
+							<TableHeader className="sticky top-0 z-20 bg-background shadow-sm">
 								<TableRow>
-									<TableHead>ID</TableHead>
+									<TableHead className="w-[60px] bg-background font-bold text-sm">
-									<TableHead>Name</TableHead>
+										ID
-									<TableHead>Phone</TableHead>
+									</TableHead>
-									<TableHead>Email</TableHead>
+									<TableHead className="w-[220px] bg-background font-bold text-sm">
-									<TableHead>Subject</TableHead>
+										Customer Details
-									<TableHead>Message</TableHead>
+									</TableHead>
-									<TableHead>Date</TableHead>
+									<TableHead className="w-[200px] bg-background font-bold text-sm">
-									<TableHead>Actions</TableHead>
+										Subject
+									</TableHead>
+									<TableHead className="w-[150px] bg-background font-bold text-sm">
+										Date
+									</TableHead>
+									<TableHead className="w-[280px] bg-background font-bold text-sm">
+										Message Snippet
+									</TableHead>
+									<TableHead className="w-[120px] bg-background font-bold text-right text-sm">
+										Actions
+									</TableHead>
 								</TableRow>
 							</TableHeader>
 
 							<TableBody>
 								{loading ? (
 									<TableRow>
-										<TableCell colSpan={8} className="text-center">
+										<TableCell colSpan={6} className="text-center py-10">
-											<Loader2 className="h-6 w-6 animate-spin mx-auto" />
+											<Loader2 className="h-8 w-8 animate-spin mx-auto" />
 										</TableCell>
 									</TableRow>
-								) : filteredInquiries.length === 0 ? (
+								) : currentItems.length === 0 ? (
 									<TableRow>
-										<TableCell colSpan={8} className="text-center">
+										<TableCell
+											colSpan={6}
+											className="text-center text-muted-foreground py-10 text-base"
+										>
 											No inquiries found
 										</TableCell>
 									</TableRow>
 								) : (
-									filteredInquiries.map((item) => (
+									currentItems.map((item) => (
-										<TableRow key={item.id}>
+										<TableRow key={item.id} className="hover:bg-muted/50">
-											<TableCell>{item.id}</TableCell>
+											<TableCell className="font-mono text-xs">
-											<TableCell>{item.fullName}</TableCell>
+												{item.id}
-											<TableCell>{item.number}</TableCell>
-											<TableCell>{item.emailId}</TableCell>
-											<TableCell>{item.subject}</TableCell>
-
-											<TableCell className="max-w-[250px] whitespace-normal">
-												{item.message}
 											</TableCell>
-
 											<TableCell>
+												<div className="font-semibold text-base truncate">
+													{item.fullName}
+												</div>
+												<div className="text-xs text-muted-foreground truncate">
+													{item.emailId}
+												</div>
+												<div className="text-[11px] font-medium">
+													{item.number}
+												</div>
+											</TableCell>
+											<TableCell>
+												<div className="text-sm font-medium line-clamp-2">
+													{item.subject || "-"}
+												</div>
+											</TableCell>
+											<TableCell className="text-sm">
 												{new Date(item.createdAt).toLocaleDateString()}
 											</TableCell>
-
 											<TableCell>
-												<Button
+												<div className="text-sm line-clamp-2 text-muted-foreground italic">
-													size="sm"
+													{item.message || "-"}
-													variant="destructive"
+												</div>
-													onClick={() => handleDelete(item.id)}>
+											</TableCell>
-													<Trash className="h-4 w-4" />
+											<TableCell className="text-right">
-												</Button>
+												<div className="flex justify-end gap-2">
+													<Button
+														size="icon"
+														variant="ghost"
+														className="h-9 w-9"
+														onClick={() => openView(item)}
+													>
+														<Eye className="h-4 w-4" />
+													</Button>
+													<Button
+														size="icon"
+														variant="ghost"
+														className="h-9 w-9 text-destructive hover:text-destructive hover:bg-destructive/10"
+														onClick={() => handleDelete(item.id)}
+													>
+														<Trash className="h-4 w-4" />
+													</Button>
+												</div>
 											</TableCell>
 										</TableRow>
 									))
@@ -160,8 +241,115 @@ export default function InquiryPage() {
 							</TableBody>
 						</Table>
 					</div>
+
+					{!loading && filteredInquiries.length > 0 && (
+						<div className="flex items-center justify-between px-2 py-6 border-t">
+							<div className="text-base text-muted-foreground">
+								Showing{" "}
+								<span className="font-semibold">{indexOfFirstItem + 1}</span> to{" "}
+								<span className="font-semibold">
+									{Math.min(indexOfLastItem, filteredInquiries.length)}
+								</span>{" "}
+								of{" "}
+								<span className="font-semibold">
+									{filteredInquiries.length}
+								</span>
+							</div>
+							<div className="flex items-center gap-6">
+								<div className="text-base font-semibold">
+									Page {currentPage} of {totalPages}
+								</div>
+								<div className="flex gap-2">
+									<Button
+										variant="outline"
+										size="icon"
+										className="h-10 w-10"
+										onClick={() =>
+											setCurrentPage((prev) => Math.max(prev - 1, 1))
+										}
+										disabled={currentPage === 1}
+									>
+										<ChevronLeft className="h-5 w-5" />
+									</Button>
+									<Button
+										variant="outline"
+										size="icon"
+										className="h-10 w-10"
+										onClick={() =>
+											setCurrentPage((prev) => Math.min(prev + 1, totalPages))
+										}
+										disabled={currentPage === totalPages || totalPages === 0}
+									>
+										<ChevronRight className="h-5 w-5" />
+									</Button>
+								</div>
+							</div>
+						</div>
+					)}
 				</CardContent>
 			</Card>
+
+			<Dialog open={viewOpen} onOpenChange={setViewOpen}>
+				<DialogContent className="w-full !max-w-3xl max-h-[85vh] overflow-y-auto">
+					<DialogHeader>
+						<DialogTitle className="text-2xl border-b pb-2 flex items-center gap-2">
+							<Mail className="h-6 w-6" /> Inquiry Details
+						</DialogTitle>
+					</DialogHeader>
+					{viewData && (
+						<div className="space-y-6 py-4">
+							<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+								<div className="space-y-4">
+									<div>
+										<p className="text-xs uppercase font-bold text-muted-foreground">
+											Customer Information
+										</p>
+										<p className="text-lg font-bold text-primary">
+											{viewData.fullName}
+										</p>
+										<p className="text-sm font-medium">{viewData.emailId}</p>
+										<p className="text-sm">{viewData.number}</p>
+									</div>
+									<div>
+										<p className="text-xs uppercase font-bold text-muted-foreground">
+											Received Date
+										</p>
+										<p className="text-sm">
+											{new Date(viewData.createdAt).toLocaleString()}
+										</p>
+									</div>
+								</div>
+								<div className="space-y-4">
+									<div>
+										<p className="text-xs uppercase font-bold text-muted-foreground">
+											Subject
+										</p>
+										<p className="text-base font-semibold">
+											{viewData.subject || "No Subject"}
+										</p>
+									</div>
+									<div className="p-4 bg-muted/30 rounded-lg border">
+										<p className="text-xs uppercase font-bold text-muted-foreground mb-2">
+											Message
+										</p>
+										<p className="text-sm leading-relaxed whitespace-pre-wrap">
+											{viewData.message || "No message content."}
+										</p>
+									</div>
+								</div>
+							</div>
+						</div>
+					)}
+					<DialogFooter>
+						<Button
+							onClick={() => setViewOpen(false)}
+							className="w-full md:w-auto"
+						>
+							Close
+						</Button>
+					</DialogFooter>
+				</DialogContent>
+			</Dialog>
 		</div>
 	);
 }

frontend/src/pages/newsMedia.tsx

@@ -19,6 +19,7 @@ import {
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
 
 import {
 	Dialog,
@@ -37,11 +38,13 @@ import {
 	Eye,
 	ChevronLeft,
 	ChevronRight,
+	Newspaper,
 } from "lucide-react";
 
 export default function NewsPage() {
 	const [news, setNews] = useState<any[]>([]);
 	const [loading, setLoading] = useState(true);
+	const [totalItems, setTotalItems] = useState(0);
 
 	const [searchText, setSearchText] = useState("");
 
@@ -66,29 +69,28 @@ export default function NewsPage() {
 	const fetchAll = useCallback(async () => {
 		setLoading(true);
 		try {
-			const res = await getNewsApi();
+			const res = await getNewsApi(currentPage, itemsPerPage);
+
 			setNews(res?.data || []);
+			setTotalItems(res?.meta?.total || 0);
 		} catch (err) {
 			console.error(err);
 		} finally {
 			setLoading(false);
 		}
-	}, []);
+	}, [currentPage, itemsPerPage]);
 
 	useEffect(() => {
 		fetchAll();
 	}, [fetchAll]);
 
-	const filteredNews = news.filter((item) =>
+	const filteredNews = news.filter(
-		item.Headline?.toLowerCase().includes(searchText.toLowerCase()),
+		(item) =>
+			item.Headline?.toLowerCase().includes(searchText.toLowerCase()) ||
+			item.Author?.toLowerCase().includes(searchText.toLowerCase()),
 	);
 
-	const totalPages = Math.ceil(filteredNews.length / itemsPerPage);
+	const totalPages = Math.ceil(totalItems / itemsPerPage);
-	const startIndex = (currentPage - 1) * itemsPerPage;
-	const paginatedData = filteredNews.slice(
-		startIndex,
-		startIndex + itemsPerPage,
-	);
 
 	function handleChange(e: any) {
 		setForm({ ...form, [e.target.name]: e.target.value });
@@ -109,7 +111,6 @@ export default function NewsPage() {
 
 	function openEdit(item: any) {
 		setEditing(item);
-
 		setForm({
 			headline: item.Headline || "",
 			content: item.Content || "",
@@ -118,7 +119,6 @@ export default function NewsPage() {
 			date: item.Date ? item.Date.split("T")[0] : "",
 			author: item.Author || "",
 		});
-
 		setOpenModal(true);
 	}
 
@@ -149,18 +149,17 @@ export default function NewsPage() {
 
 	return (
 		<div className="p-6 space-y-6">
-			<div className="flex justify-between items-center flex-wrap gap-3">
+			<div className="flex flex-col md:flex-row md:justify-between md:items-center gap-4">
-				<h1 className="text-2xl font-bold">News Media</h1>
+				<h1 className="text-3xl font-bold font-sans tracking-tight">
+					News Media
+				</h1>
 
-				<div className="flex gap-2 flex-wrap items-center">
+				<div className="flex flex-wrap gap-3 items-center">
 					<Input
-						placeholder="Search headline..."
+						placeholder="Filter headline..."
 						value={searchText}
-						onChange={(e) => {
+						onChange={(e) => setSearchText(e.target.value)}
-							setSearchText(e.target.value);
+						className="w-[250px] text-base"
-							setCurrentPage(1);
-						}}
-						className="w-[250px]"
 					/>
 
 					<select
@@ -169,98 +168,131 @@ export default function NewsPage() {
 							setItemsPerPage(Number(e.target.value));
 							setCurrentPage(1);
 						}}
-						className="border px-2 py-1 rounded">
+						className="flex h-10 rounded-md border border-input bg-background px-3 py-2 text-sm focus:ring-2 focus:ring-primary"
+					>
 						<option value={5}>5 / page</option>
 						<option value={10}>10 / page</option>
 						<option value={20}>20 / page</option>
 					</select>
 
-					<Button variant="outline" onClick={fetchAll} disabled={loading}>
+					<Button
-						<RefreshCw className="mr-2 h-4 w-4" />
+						variant="outline"
+						onClick={fetchAll}
+						disabled={loading}
+						className="text-base"
+					>
+						<RefreshCw className="mr-2 h-5 w-5" />
 						Refresh
 					</Button>
 
-					<Button onClick={openAdd}>
+					<Button onClick={openAdd} className="text-base">
-						<Plus className="mr-2 h-4 w-4" />
+						<Plus className="mr-2 h-5 w-5" />
 						Add News
 					</Button>
 				</div>
 			</div>
 
-			<Card>
+			<Card className="shadow-sm">
 				<CardHeader>
-					<CardTitle>News List</CardTitle>
+					<CardTitle className="text-xl">News Archives</CardTitle>
 				</CardHeader>
 
-				<CardContent>
+				<CardContent className="p-0 sm:p-6 space-y-4">
-					<div className="overflow-x-auto">
+					<div className="rounded-md border overflow-x-auto overflow-y-auto max-h-[650px] relative">
-						<Table className="min-w-[900px] table-fixed">
+						<Table className="w-full min-w-[1000px] table-fixed border-separate border-spacing-0">
-							<TableHeader>
+							<TableHeader className="sticky top-0 z-20 bg-background shadow-sm">
 								<TableRow>
-									<TableHead className="w-[60px]">ID</TableHead>
+									<TableHead className="w-[80px] bg-background font-bold">
-									<TableHead className="w-[220px]">Headline</TableHead>
+										ID
-									<TableHead className="w-[120px]">Author</TableHead>
+									</TableHead>
-									<TableHead className="w-[120px]">Date</TableHead>
+									<TableHead className="w-[280px] bg-background font-bold">
-									<TableHead className="w-[260px]">Content</TableHead>
+										Headline
-									<TableHead className="w-[150px]">Actions</TableHead>
+									</TableHead>
+									<TableHead className="w-[150px] bg-background font-bold">
+										Author
+									</TableHead>
+									<TableHead className="w-[140px] bg-background font-bold">
+										Date
+									</TableHead>
+									<TableHead className="w-[250px] bg-background font-bold">
+										Content Preview
+									</TableHead>
+									<TableHead className="w-[150px] bg-background font-bold text-right">
+										Actions
+									</TableHead>
 								</TableRow>
 							</TableHeader>
 
 							<TableBody>
 								{loading ? (
 									<TableRow>
-										<TableCell colSpan={6} className="text-center">
+										<TableCell colSpan={6} className="text-center py-10">
-											<Loader2 className="animate-spin mx-auto" />
+											<Loader2 className="h-8 w-8 animate-spin mx-auto text-primary" />
 										</TableCell>
 									</TableRow>
-								) : paginatedData.length === 0 ? (
+								) : filteredNews.length === 0 ? (
 									<TableRow>
-										<TableCell colSpan={6} className="text-center">
+										<TableCell
-											No news found
+											colSpan={6}
+											className="text-center text-muted-foreground py-10 text-base"
+										>
+											No news articles found
 										</TableCell>
 									</TableRow>
 								) : (
-									paginatedData.map((item) => (
+									filteredNews.map((item) => (
-										<TableRow key={item.Id}>
+										<TableRow key={item.Id} className="hover:bg-muted/50">
-											<TableCell>{item.Id}</TableCell>
+											<TableCell className="font-mono text-xs">
-
+												{item.Id}
-											<TableCell className="break-words whitespace-normal">
-												{item.Headline}
 											</TableCell>
-
-											<TableCell>{item.Author}</TableCell>
-
 											<TableCell>
+												<div
+													className="font-semibold text-base line-clamp-2"
+													title={item.Headline}
+												>
+													{item.Headline}
+												</div>
+											</TableCell>
+											<TableCell className="text-sm font-medium">
+												{item.Author || "-"}
+											</TableCell>
+											<TableCell className="text-sm">
 												{item.Date
 													? new Date(item.Date).toLocaleDateString()
 													: "-"}
 											</TableCell>
-
+											<TableCell>
-											<TableCell className="break-words whitespace-normal">
+												<div className="text-sm line-clamp-2 text-muted-foreground">
-												{item.Content}
+													{item.Content}
+												</div>
 											</TableCell>
-
+											<TableCell className="text-right">
-											<TableCell className="flex gap-2">
+												<div className="flex justify-end gap-2">
-												<Button
+													<Button
-													size="sm"
+														size="icon"
-													variant="outline"
+														variant="ghost"
-													onClick={() => openView(item)}>
+														className="h-9 w-9"
-													<Eye className="h-4 w-4" />
+														onClick={() => openView(item)}
-												</Button>
+													>
-
+														<Eye className="h-4 w-4" />
-												<Button
+													</Button>
-													size="sm"
+													<Button
-													variant="outline"
+														size="icon"
-													onClick={() => openEdit(item)}>
+														variant="ghost"
-													<Pencil className="h-4 w-4" />
+														className="h-9 w-9"
-												</Button>
+														onClick={() => openEdit(item)}
-
+													>
-												<Button
+														<Pencil className="h-4 w-4" />
-													size="sm"
+													</Button>
-													variant="destructive"
+													<Button
-													onClick={() => handleDelete(Number(item.Id))}>
+														size="icon"
-													<Trash className="h-4 w-4" />
+														variant="ghost"
-												</Button>
+														className="h-9 w-9 text-destructive hover:bg-destructive/10"
+														onClick={() => handleDelete(Number(item.Id))}
+													>
+														<Trash className="h-4 w-4" />
+													</Button>
+												</div>
 											</TableCell>
 										</TableRow>
 									))
@@ -269,129 +301,197 @@ export default function NewsPage() {
 						</Table>
 					</div>
 
-					{/* PAGINATION */}
+					{!loading && totalItems > 0 && (
-					<div className="flex justify-between items-center mt-4">
+						<div className="flex items-center justify-between px-2 py-4 border-t">
-						<p className="text-sm">
+							<div className="text-sm text-muted-foreground">
-							Page {currentPage} of {totalPages}
+								Total <span className="font-bold">{totalItems}</span> articles
-						</p>
+								(Page <span className="font-bold">{currentPage}</span> of{" "}
-
+								{totalPages})
-						<div className="flex gap-2">
+							</div>
-							<Button
+							<div className="flex items-center gap-6">
-								variant="outline"
+								<div className="text-base font-semibold">
-								size="sm"
+									Page {currentPage} of {totalPages}
-								disabled={currentPage === 1}
+								</div>
-								onClick={() => setCurrentPage((p) => p - 1)}>
+								<div className="flex gap-2">
-								<ChevronLeft className="h-4 w-4" />
+									<Button
-							</Button>
+										variant="outline"
-
+										size="icon"
-							<Button
+										className="h-10 w-10"
-								variant="outline"
+										onClick={() =>
-								size="sm"
+											setCurrentPage((prev) => Math.max(prev - 1, 1))
-								disabled={currentPage === totalPages}
+										}
-								onClick={() => setCurrentPage((p) => p + 1)}>
+										disabled={currentPage === 1}
-								<ChevronRight className="h-4 w-4" />
+									>
-							</Button>
+										<ChevronLeft className="h-5 w-5" />
+									</Button>
+									<Button
+										variant="outline"
+										size="icon"
+										className="h-10 w-10"
+										onClick={() =>
+											setCurrentPage((prev) => Math.min(prev + 1, totalPages))
+										}
+										disabled={currentPage === totalPages || totalPages === 0}
+									>
+										<ChevronRight className="h-5 w-5" />
+									</Button>
+								</div>
+							</div>
 						</div>
-					</div>
+					)}
 				</CardContent>
 			</Card>
 
-			{/* CREATE / EDIT MODAL */}
 			<Dialog open={openModal} onOpenChange={setOpenModal}>
-				<DialogContent className="w-[95vw] max-w-none max-h-[90vh] overflow-y-auto">
+				<DialogContent className="w-full !max-w-5xl max-h-[90vh] overflow-y-auto">
 					<DialogHeader>
-						<DialogTitle>{editing ? "Edit News" : "Add News"}</DialogTitle>
+						<DialogTitle className="text-2xl font-bold">
+							{editing ? "Edit News Article" : "Add New News Article"}
+						</DialogTitle>
 					</DialogHeader>
 
-					<div className="space-y-3">
+					<div className="grid grid-cols-1 md:grid-cols-2 gap-8 mt-6">
-						<Input
+						<div className="space-y-6">
-							name="headline"
+							<h3 className="font-bold text-base border-b pb-2 text-primary">
-							placeholder="Headline"
+								Article Information
-							value={form.headline}
+							</h3>
-							onChange={handleChange}
+							<div className="space-y-4">
-						/>
+								<div className="space-y-1">
-						<Input
+									<label className="text-sm font-semibold">Headline</label>
-							name="author"
+									<Input
-							placeholder="Author"
+										name="headline"
-							value={form.author}
+										value={form.headline}
-							onChange={handleChange}
+										onChange={handleChange}
-						/>
+										className="text-base"
-						<Input
+									/>
-							type="date"
+								</div>
-							name="date"
+								<div className="space-y-1">
-							value={form.date}
+									<label className="text-sm font-semibold">Author</label>
-							onChange={handleChange}
+									<Input
-						/>
+										name="author"
+										value={form.author}
+										onChange={handleChange}
+										className="text-base"
+									/>
+								</div>
+								<div className="space-y-1">
+									<label className="text-sm font-semibold">Publish Date</label>
+									<Input
+										type="date"
+										name="date"
+										value={form.date}
+										onChange={handleChange}
+										className="text-base"
+									/>
+								</div>
+							</div>
+							<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-[140px] text-base"
+								/>
+							</div>
+						</div>
 
-						<textarea
+						<div className="space-y-6">
-							name="firstPara"
+							<h3 className="font-bold text-base border-b pb-2 text-primary">
-							placeholder="First Paragraph"
+								Story Details
-							value={form.firstPara}
+							</h3>
-							onChange={handleChange}
+							<div className="space-y-4">
-							className="border rounded p-2 w-full min-h-[100px]"
+								<div className="space-y-1">
-						/>
+									<label className="text-sm font-semibold">
-						<textarea
+										Second Paragraph
-							name="secondPara"
+									</label>
-							placeholder="Second Paragraph"
+									<Textarea
-							value={form.secondPara}
+										name="secondPara"
-							onChange={handleChange}
+										value={form.secondPara}
-							className="border rounded p-2 w-full min-h-[100px]"
+										onChange={handleChange}
-						/>
+										className="min-h-[140px] text-base"
-						<textarea
+									/>
-							name="content"
+								</div>
-							placeholder="Content"
+								<div className="space-y-1">
-							value={form.content}
+									<label className="text-sm font-semibold">Content</label>
-							onChange={handleChange}
+									<Textarea
-							className="border rounded p-2 w-full min-h-[150px]"
+										name="content"
-						/>
+										value={form.content}
+										onChange={handleChange}
+										className="min-h-[200px] text-base"
+									/>
+								</div>
+							</div>
+						</div>
 					</div>
 
-					<DialogFooter>
+					<DialogFooter className="mt-10 pt-6 border-t">
-						<Button variant="outline" onClick={() => setOpenModal(false)}>
+						<Button
+							variant="ghost"
+							onClick={() => setOpenModal(false)}
+							className="text-base"
+						>
 							Cancel
 						</Button>
-						<Button onClick={handleSubmit}>
+						<Button
-							{editing ? "Update" : "Create"}
+							onClick={handleSubmit}
+							className="px-10 text-base bg-primary text-white"
+						>
+							{editing ? "Save Changes" : "Publish Now"}
 						</Button>
 					</DialogFooter>
 				</DialogContent>
 			</Dialog>
 
-			{/* VIEW MODAL */}
 			<Dialog open={viewOpen} onOpenChange={setViewOpen}>
-				<DialogContent className="w-[95vw] max-w-none max-h-[90vh] overflow-y-auto p-6">
+				<DialogContent className="w-full !max-w-4xl max-h-[85vh] overflow-y-auto p-6">
 					<DialogHeader>
-						<DialogTitle>News Details</DialogTitle>
+						<DialogTitle className="text-2xl border-b pb-2 flex items-center gap-2">
+							<Newspaper className="h-6 w-6 text-primary" /> News Preview
+						</DialogTitle>
 					</DialogHeader>
 
 					{viewData && (
-						<div className="space-y-4 text-sm">
+						<div className="space-y-6 py-4">
-							<b>Headline:</b>
+							<div className="space-y-2">
-							<p>{viewData.Headline}</p>
+								<h2 className="text-2xl font-bold leading-tight">
+									{viewData.Headline}
+								</h2>
+								<div className="flex gap-4 text-sm text-muted-foreground font-medium italic">
+									<span>By: {viewData.Author || "Anonymous"}</span>
+									<span>•</span>
+									<span>
+										{viewData.Date
+											? new Date(viewData.Date).toLocaleDateString("en-IN", {
+													dateStyle: "long",
+												})
+											: "No Date"}
+									</span>
+								</div>
+							</div>
 
-							<b>Author:</b>
+							<div className="space-y-5 leading-relaxed text-base">
-							<p>{viewData.Author}</p>
+								<div className="bg-muted/30 p-4 rounded-lg border-l-4 border-primary">
-
+									<p className="whitespace-pre-line">{viewData.FirstPara}</p>
-							<b>Date:</b>
+								</div>
-							<p>
+								<div className="space-y-4 px-1">
-								{viewData.Date
+									<p className="whitespace-pre-line">{viewData.SecondPara}</p>
-									? new Date(viewData.Date).toLocaleDateString()
+									<hr />
-									: "-"}
+									<p className="whitespace-pre-line text-muted-foreground">
-							</p>
+										{viewData.Content}
-
+									</p>
-							<b>First Para:</b>
+								</div>
-							<p className="whitespace-pre-line">{viewData.FirstPara}</p>
+							</div>
-
-							<b>Second Para:</b>
-							<p className="whitespace-pre-line">{viewData.SecondPara}</p>
-
-							<b>Content:</b>
-							<p className="whitespace-pre-line">{viewData.Content}</p>
 						</div>
 					)}
 
 					<DialogFooter>
-						<Button onClick={() => setViewOpen(false)}>Close</Button>
+						<Button
+							onClick={() => setViewOpen(false)}
+							className="w-full md:w-auto"
+						>
+							Close Preview
+						</Button>
 					</DialogFooter>
 				</DialogContent>
 			</Dialog>