feat: add pagination in appointment

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

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

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

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

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

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

backend/prisma/schema.prisma

@@ -21,7 +21,6 @@ model Doctor {
   id            Int     @id @default(autoincrement())
   doctorId      String  @unique
   name          String
-  image         String?
   designation   String?
   workingStatus String?
   qualification String?
@@ -37,8 +36,6 @@ model Department {
   id           Int    @id @default(autoincrement())
   departmentId String @unique
   name         String
-  image        String?
-
 
   para1      String?
   para2      String?
@@ -192,24 +189,16 @@ model EmailConfig {
 
 model NewsMedia {
   id         Int      @id @default(autoincrement())
+
   headline   String
   content    String?
   firstPara  String?
   secondPara String?
   author     String?
   date       DateTime?
-  images     NewsImage[] 
 
   isActive   Boolean  @default(true)
+
   createdAt  DateTime @default(now())
   updatedAt  DateTime @updatedAt
 }
-
-model NewsImage {
-  id          Int       @id @default(autoincrement())
-  url         String    
-  newsMediaId Int
-  newsMedia   NewsMedia @relation(fields: [newsMediaId], references: [id], onDelete: Cascade)
-
-  createdAt   DateTime  @default(now())
-}

backend/src/controllers/appointment.controller.js

@@ -1,10 +1,10 @@
 import prisma from "../prisma/client.js";
-import {sendEmail} from "../utils/sendEmail.js";
-import {getEmailsByType} from "../utils/getEmailByTypes.js";
+import { sendEmail } from "../utils/sendEmail.js";
+import { getEmailsByType } from "../utils/getEmailByTypes.js";
 
 export const createAppointment = async (req, res) => {
 	try {
-		const {name, mobileNumber, email, message, date, doctorId, departmentId} =
+		const { name, mobileNumber, email, message, date, doctorId, departmentId } =
 			req.body;
 
 		if (!name || !mobileNumber || !doctorId || !departmentId || !date) {
@@ -71,19 +71,98 @@ export const createAppointment = async (req, res) => {
 
 export const getAppointments = async (req, res) => {
 	try {
+		const page = parseInt(req.query.page);
+		const limit = parseInt(req.query.limit);
+
+		const search = req.query.search || "";
+		const doctor = req.query.doctor || "";
+		const department = req.query.department || "";
+		const date = req.query.date || "";
+
+		if (!page && !limit) {
 			const appointments = await prisma.appointment.findMany({
 				include: {
 					doctor: true,
 					department: true,
 				},
-			orderBy: {
-				createdAt: "desc",
-			},
+				orderBy: { createdAt: "desc" },
 			});
 
-		res.status(200).json({
+			return res.status(200).json({
 				success: true,
 				data: appointments,
+				meta: null,
+			});
+		}
+
+		const currentPage = page || 1;
+		const currentLimit = limit || 10;
+		const skip = (currentPage - 1) * currentLimit;
+
+		const where = {
+			AND: [
+				search
+					? {
+							OR: [
+								{ name: { contains: search, mode: "insensitive" } },
+								{ mobileNumber: { contains: search } },
+								{ email: { contains: search, mode: "insensitive" } },
+							],
+						}
+					: {},
+
+				doctor
+					? {
+							doctor: {
+								name: { contains: doctor, mode: "insensitive" },
+							},
+						}
+					: {},
+
+				department
+					? {
+							department: {
+								name: { contains: department, mode: "insensitive" },
+							},
+						}
+					: {},
+
+				date
+					? {
+							date: {
+								gte: new Date(date),
+								lt: new Date(
+									new Date(date).setDate(new Date(date).getDate() + 1),
+								),
+							},
+						}
+					: {},
+			],
+		};
+
+		const [appointments, total] = await Promise.all([
+			prisma.appointment.findMany({
+				where,
+				include: {
+					doctor: true,
+					department: true,
+				},
+				orderBy: { createdAt: "desc" },
+				skip,
+				take: currentLimit,
+			}),
+			prisma.appointment.count({ where }),
+		]);
+
+		return res.status(200).json({
+			success: true,
+			data: appointments,
+			meta: {
+				total,
+				page: currentPage,
+				limit: currentLimit,
+				totalPages: Math.ceil(total / currentLimit),
+			},
 		});
 	} catch (error) {
 		console.error(error);
@@ -98,7 +177,7 @@ export const getAppointments = async (req, res) => {
 
 export const getAppointment = async (req, res) => {
 	try {
-		const {id} = req.params;
+		const { id } = req.params;
 
 		const appointment = await prisma.appointment.findUnique({
 			where: {
@@ -134,7 +213,7 @@ export const getAppointment = async (req, res) => {
 
 export const getAppointmentsByDoctor = async (req, res) => {
 	try {
-		const {doctorId} = req.params;
+		const { doctorId } = req.params;
 
 		const appointments = await prisma.appointment.findMany({
 			where: {
@@ -166,7 +245,7 @@ export const getAppointmentsByDoctor = async (req, res) => {
 
 export const getAppointmentsByDepartment = async (req, res) => {
 	try {
-		const {departmentId} = req.params;
+		const { departmentId } = req.params;
 
 		const appointments = await prisma.appointment.findMany({
 			where: {
@@ -195,7 +274,7 @@ export const getAppointmentsByDepartment = async (req, res) => {
 
 export const updateAppointment = async (req, res) => {
 	try {
-		const {id} = req.params;
+		const { id } = req.params;
 
 		const appointment = await prisma.appointment.update({
 			where: {
@@ -226,7 +305,7 @@ export const updateAppointment = async (req, res) => {
 
 export const deleteAppointment = async (req, res) => {
 	try {
-		const {id} = req.params;
+		const { id } = req.params;
 
 		await prisma.appointment.delete({
 			where: {

backend/src/controllers/department.controller.js

@@ -9,7 +9,6 @@ export const getAllDepartments = async (req, res) => {
 		const response = departments.map((dep) => ({
 			departmentId: dep.departmentId,
 			name: dep.name,
-			image: dep.image ?? "",
 			para1: dep.para1 ?? "",
 			para2: dep.para2 ?? "",
 			para3: dep.para3 ?? "",
@@ -30,66 +29,10 @@ 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,
-			image: department.image ?? "",
-			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,
-			image,
-			para1,
-			para2,
-			para3,
-			facilities,
-			services,
-		} = req.body;
+		const {departmentId, name, para1, para2, para3, facilities, services} =
+			req.body;
 
 		if (!departmentId || !name) {
 			return res
@@ -101,7 +44,6 @@ export async function createDepartment(req, res) {
 			data: {
 				departmentId,
 				name,
-				image,
 				para1,
 				para2,
 				para3,
@@ -127,13 +69,12 @@ export const updateDepartment = async (req, res) => {
 	try {
 		const {departmentId} = req.params;
 
-		const {name, image, para1, para2, para3, facilities, services} = req.body;
+		const {name, para1, para2, para3, facilities, services} = req.body;
 
 		const department = await prisma.department.update({
 			where: {departmentId},
 			data: {
 				name,
-				image,
 				para1,
 				para2,
 				para3,

backend/src/controllers/doctor.controller.js

@@ -16,11 +16,11 @@ 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),
 				doctorId: doc.doctorId,
 				name: doc.name,
-			image: doc.image ?? "",
 				designation: doc.designation,
 				workingStatus: doc.workingStatus,
 				qualification: doc.qualification,
@@ -42,10 +42,12 @@ export const getAllDoctors = async (req, res) => {
 					return {
 						departmentId: d.department.departmentId,
 						departmentName: d.department.name,
+
 						timing: timingArray.join(" & "),
 					};
 				}),
-		}));
+			};
+		});
 
 		res.status(200).json({
 			success: true,
@@ -88,7 +90,6 @@ export const getDoctorByDoctorId = async (req, res) => {
 		const response = {
 			doctorId: doctor.doctorId,
 			name: doctor.name,
-			image: doctor.image ?? "",
 			designation: doctor.designation,
 			workingStatus: doctor.workingStatus,
 			qualification: doctor.qualification,
@@ -112,62 +113,12 @@ 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,
-			image: d.doctor.image ?? "",
-		}));
-
-		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 {
 		const {
 			doctorId,
 			name,
-			image,
 			designation,
 			workingStatus,
 			qualification,
@@ -178,7 +129,6 @@ export const createDoctor = async (req, res) => {
 			data: {
 				doctorId,
 				name,
-				image,
 				designation,
 				workingStatus,
 				qualification,
@@ -226,28 +176,28 @@ export const createDoctor = async (req, res) => {
 export const updateDoctor = async (req, res) => {
 	try {
 		const {doctorId} = req.params;
-		const {
-			name,
-			designation,
-			image,
-			workingStatus,
-			qualification,
-			departments,
-		} = req.body;
+		const {name, designation, workingStatus, qualification, departments} =
+			req.body;
 
 		const doctor = await prisma.doctor.findUnique({
 			where: {doctorId},
 		});
 
 		if (!doctor) {
-			return res
-				.status(404)
-				.json({success: false, message: "Doctor not found"});
+			return res.status(404).json({
+				success: false,
+				message: "Doctor not found",
+			});
 		}
 
 		await prisma.doctor.update({
 			where: {id: doctor.id},
-			data: {name, designation, image, workingStatus, qualification},
+			data: {
+				name,
+				designation,
+				workingStatus,
+				qualification,
+			},
 		});
 
 		const oldRelations = await prisma.doctorDepartment.findMany({
@@ -279,24 +229,25 @@ 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,
-						...cleanTiming,
+						...dep.timing,
 					},
 				});
 			}
 		}
 
-		res
-			.status(200)
-			.json({success: true, message: "Doctor updated successfully"});
+		res.status(200).json({
+			success: true,
+			message: "Doctor updated successfully",
+		});
 	} catch (error) {
-		console.error("Update Error:", error);
-		res.status(500).json({success: false, message: "Failed to update doctor"});
+		console.error(error);
+		res.status(500).json({
+			success: false,
+			message: "Failed to update doctor",
+		});
 	}
 };
 //delete doctor
@@ -305,6 +256,13 @@ 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},
 		});
@@ -312,7 +270,7 @@ export const deleteDoctor = async (req, res) => {
 		if (!doctor) {
 			return res.status(404).json({
 				success: false,
-				message: "Doctor not found",
+				message: `Doctor with ID ${doctorId} not found`,
 			});
 		}
 
@@ -336,7 +294,7 @@ export const deleteDoctor = async (req, res) => {
 
 		res.status(200).json({
 			success: true,
-			message: "Doctor deleted successfully",
+			message: `Doctor ${doctorId} deleted successfully`,
 		});
 	} catch (error) {
 		console.error(error);
@@ -362,19 +320,23 @@ export const getDoctorTimings = async (req, res) => {
 		});
 
 		const result = doctors.map((doc) => {
-			const timing = doc.departments[0]?.timing || {};
+			let timing = {};
+
+			if (doc.departments.length > 0) {
+				timing = doc.departments[0].timing ?? {};
+			}
 
 			return {
 				Doctor_ID: doc.doctorId,
 				Doctor: doc.name,
-				Monday: timing.monday || "",
-				Tuesday: timing.tuesday || "",
-				Wednesday: timing.wednesday || "",
-				Thursday: timing.thursday || "",
-				Friday: timing.friday || "",
-				Saturday: timing.saturday || "",
-				Sunday: timing.sunday || "",
-				Additional: timing.additional || "",
+				Monday: timing?.monday ?? "",
+				Tuesday: timing?.tuesday ?? "",
+				Wednesday: timing?.wednesday ?? "",
+				Thursday: timing?.thursday ?? "",
+				Friday: timing?.friday ?? "",
+				Saturday: timing?.saturday ?? "",
+				Sunday: timing?.sunday ?? "",
+				Additional: timing?.additional ?? "",
 			};
 		});
 
@@ -418,11 +380,26 @@ export const getDoctorTimingById = async (req, res) => {
 		const result = {
 			doctorId: doctor.doctorId,
 			doctorName: doctor.name,
-			departments: doctor.departments.map((d) => ({
+
+			departments: doctor.departments.map((d) => {
+				const t = d.timing || {};
+
+				return {
 					departmentId: d.department.departmentId,
 					departmentName: d.department.name,
-				timing: d.timing || {},
-			})),
+
+					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/controllers/inquiry.controller.js

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

backend/src/controllers/newsMedia.controller.js

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

backend/src/routes/academicsResearch.routes.js

@@ -11,8 +11,8 @@ import jwtAuthMiddleware from "../middleware/auth.js";
 const router = express.Router();
 
 router.post("/", createAcademicsResearch);
-router.get("/getAll", jwtAuthMiddleware, getAcademicsResearch);
-router.get("/:id", jwtAuthMiddleware, getSingleAcademicsResearch);
+router.get("/getAll", getAcademicsResearch);
+router.get("/:id", 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", jwtAuthMiddleware, getAppointments);
+router.get("/getall", getAppointments);
 router.post("/", createAppointment);
 
-router.get("/:id", jwtAuthMiddleware, getAppointment);
-router.patch("/:id", jwtAuthMiddleware, updateAppointment);
+router.get("/:id", getAppointment);
+router.patch("/:id", updateAppointment);
 router.delete("/:id", jwtAuthMiddleware, deleteAppointment);
 
 export default router;

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.get("/getAll", jwtAuthMiddleware, getCandidates);
-router.get("/:id", jwtAuthMiddleware, getCandidate);
-router.get("/career/:careerId", jwtAuthMiddleware, getCandidatesByCareer);
-
-router.patch("/:id", jwtAuthMiddleware, updateCandidate);
+router.patch("/:id", updateCandidate);
 router.delete("/:id", jwtAuthMiddleware, deleteCandidate);
 
 export default router;

backend/src/routes/career.routes.js

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

backend/src/routes/department.routes.js

@@ -1,7 +1,6 @@
 import express from "express";
 import {
 	getAllDepartments,
-	getDepartmentByName,
 	createDepartment,
 	updateDepartment,
 	deleteDepartment,
@@ -12,7 +11,6 @@ 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,7 +7,6 @@ import {
 	getDoctorTimings,
 	getDoctorTimingById,
 	getDoctorByDoctorId,
-	getDoctorsByDepartmentId,
 } from "../controllers/doctor.controller.js";
 
 import jwtAuthMiddleware from "../middleware/auth.js";
@@ -15,10 +14,9 @@ import jwtAuthMiddleware from "../middleware/auth.js";
 const router = express.Router();
 
 router.get("/getAll", getAllDoctors);
-router.get("/search", getDoctorsByDepartmentId);
+router.get("/:doctorId", getDoctorByDoctorId);
 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", jwtAuthMiddleware, getInquiries);
-router.get("/:id", jwtAuthMiddleware, getInquiry);
+router.get("/getAll", getInquiries);
+router.get("/:id", getInquiry);
 router.delete("/:id", jwtAuthMiddleware, deleteInquiry);
 
 export default router;

frontend/package-lock.json

@@ -8,7 +8,6 @@
       "name": "frontend",
       "version": "0.0.0",
       "dependencies": {
-        "@bytescale/sdk": "^3.53.0",
         "@editorjs/code": "^2.9.4",
         "@editorjs/delimiter": "^1.4.2",
         "@editorjs/editorjs": "^2.31.5",
@@ -116,6 +115,7 @@
       "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",
@@ -525,12 +525,6 @@
         "node": ">=6.9.0"
       }
     },
-    "node_modules/@bytescale/sdk": {
-      "version": "3.53.0",
-      "resolved": "https://registry.npmjs.org/@bytescale/sdk/-/sdk-3.53.0.tgz",
-      "integrity": "sha512-qCeNup3pSjaklXuBrO9JeKbozZEs/PjQEvuqCiOAWLBRl6lDjd0V9gRVYqyttPimXYFoV+J/7dmPWtK6RfOABQ==",
-      "license": "MIT"
-    },
     "node_modules/@codexteam/icons": {
       "version": "0.3.3",
       "resolved": "https://registry.npmjs.org/@codexteam/icons/-/icons-0.3.3.tgz",
@@ -1766,6 +1760,7 @@
       "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"
       },
@@ -4098,6 +4093,7 @@
       "integrity": "sha512-GYDxsZi3ChgmckRT9HPU0WEhKLP08ev/Yfcq2AstjrDASOYCSXeyjDsHg4v5t4jOj7cyDX3vmprafKlWIG9MXQ==",
       "devOptional": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "undici-types": "~7.16.0"
       }
@@ -4108,6 +4104,7 @@
       "integrity": "sha512-ilcTH/UniCkMdtexkoCN0bI7pMcJDvmQFPvuPvmEaYA/NSfFTAgdUSLAoVjaRJm7+6PvcM+q1zYOwS4wTYMF9w==",
       "devOptional": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "csstype": "^3.2.2"
       }
@@ -4118,6 +4115,7 @@
       "integrity": "sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ==",
       "devOptional": true,
       "license": "MIT",
+      "peer": true,
       "peerDependencies": {
         "@types/react": "^19.2.0"
       }
@@ -4179,6 +4177,7 @@
       "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",
@@ -4469,6 +4468,7 @@
       "integrity": "sha512-UVJyE9MttOsBQIDKw1skb9nAwQuR5wuGD3+82K6JgJlm/Y+KI92oNsMNGZCYdDsVtRHSak0pcV5Dno5+4jh9sw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -4728,6 +4728,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.9.0",
         "caniuse-lite": "^1.0.30001759",
@@ -5557,6 +5558,7 @@
       "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",
@@ -5809,6 +5811,7 @@
       "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",
@@ -6463,6 +6466,7 @@
       "resolved": "https://registry.npmjs.org/hono/-/hono-4.12.7.tgz",
       "integrity": "sha512-jq9l1DM0zVIvsm3lv9Nw9nlJnMNPOcAtsbsgiUhWcFzPE99Gvo6yRTlszSLLYacMeQ6quHD6hMfId8crVHvexw==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=16.9.0"
       }
@@ -8127,6 +8131,7 @@
       "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"
       }
@@ -8136,6 +8141,7 @@
       "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"
       },
@@ -8899,7 +8905,8 @@
       "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",
@@ -9106,6 +9113,7 @@
       "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
       "devOptional": true,
       "license": "Apache-2.0",
+      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -9306,6 +9314,7 @@
       "integrity": "sha512-w+N7Hifpc3gRjZ63vYBXA56dvvRlNWRczTdmCBBa+CotUzAPf5b7YMdMR/8CQoeYE5LX3W4wj6RYTgonm1b9DA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "esbuild": "^0.27.0",
         "fdir": "^6.5.0",
@@ -9650,6 +9659,7 @@
       "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/package.json

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

frontend/src/api/appointment.ts

@@ -1,7 +1,22 @@
 import apiClient from "@/api/client";
 
-export const getAppointmentsApi = async () => {
-	const res = await apiClient.get("/appointments/getall");
+export const getAppointmentsApi = async (
+	page?: number,
+	limit?: number,
+	search?: string,
+	doctor?: string,
+	department?: string,
+	date?: string,
+) => {
+	let url = "/appointments/getAll";
+
+	if (page && limit) {
+		url += `?page=${page}&limit=${limit}&search=${search || ""}&doctor=${
+			doctor || ""
+		}&department=${department || ""}&date=${date || ""}`;
+	}
+
+	const res = await apiClient.get(url);
 	return res.data;
 };
 

frontend/src/api/department.ts

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

frontend/src/api/doctor.ts

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

frontend/src/components/BytescaleUploader/BytescaleUploader.tsx

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

frontend/src/components/ui/badge.tsx

@@ -1,49 +0,0 @@
-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,26 +13,11 @@ 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,
-	ChevronLeft,
-	ChevronRight,
-	Eye,
-	BookOpen,
-} from "lucide-react";
+import { Loader2, Trash, RefreshCw, Download } from "lucide-react";
 
 export default function AcademicsPage() {
 	const [records, setRecords] = useState<any[]>([]);
@@ -40,12 +25,6 @@ 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 {
@@ -72,20 +51,6 @@ 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);
@@ -109,29 +74,24 @@ export default function AcademicsPage() {
 
 	return (
 		<div className="p-6 space-y-6">
-			<div className="flex flex-col md:flex-row md:justify-between md:items-center gap-4">
-				<h1 className="text-3xl font-bold">Academics & Research</h1>
+			<div className="flex justify-between items-center gap-3 flex-wrap">
+				<h1 className="text-2xl font-bold">Academics & Research</h1>
 
-				<div className="flex flex-wrap gap-3">
+				<div className="flex flex-wrap gap-2">
 					<Input
-						placeholder="Search name / course / email..."
+						placeholder="Search name / phone / email / subject..."
 						value={searchText}
 						onChange={(e) => setSearchText(e.target.value)}
-						className="w-[280px] text-base"
+						className="w-[260px]"
 					/>
 
-					<Button
-						variant="outline"
-						onClick={fetchAll}
-						disabled={loading}
-						className="text-base"
-					>
-						<RefreshCw className="mr-2 h-5 w-5" />
+					<Button variant="outline" onClick={fetchAll} disabled={loading}>
+						<RefreshCw className="mr-2 h-4 w-4" />
 						Refresh
 					</Button>
 
-					<Button onClick={handleExport} className="text-base">
-						<Download className="mr-2 h-5 w-5" />
+					<Button variant="outline" onClick={handleExport}>
+						<Download className="mr-2 h-4 w-4" />
 						Export
 					</Button>
 				</div>
@@ -139,108 +99,65 @@ export default function AcademicsPage() {
 
 			<Card>
 				<CardHeader>
-					<CardTitle className="text-xl">Academic Records</CardTitle>
+					<CardTitle>Academics Records</CardTitle>
 				</CardHeader>
 
-				<CardContent className="p-0 sm:p-6 space-y-4">
-					<div className="rounded-md border overflow-x-auto overflow-y-auto max-h-[650px] relative">
-						<Table className="w-full min-w-[1100px] table-fixed border-separate border-spacing-0">
-							<TableHeader className="sticky top-0 z-20 bg-background shadow-sm">
+				<CardContent>
+					<div className="overflow-x-auto">
+						<Table className="min-w-[1000px]">
+							<TableHeader>
 								<TableRow>
-									<TableHead className="w-[60px] bg-background font-bold text-sm">
-										ID
-									</TableHead>
-									<TableHead className="w-[220px] bg-background font-bold text-sm">
-										Full Name
-									</TableHead>
-									<TableHead className="w-[180px] bg-background font-bold text-sm">
-										Course
-									</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>
+									<TableHead>ID</TableHead>
+									<TableHead>Name</TableHead>
+									<TableHead>Phone</TableHead>
+									<TableHead>Email</TableHead>
+									<TableHead>Course</TableHead>
+									<TableHead>Subject</TableHead>
+									<TableHead>Message</TableHead>
+									<TableHead>Date</TableHead>
+									<TableHead>Actions</TableHead>
 								</TableRow>
 							</TableHeader>
 
 							<TableBody>
 								{loading ? (
 									<TableRow>
-										<TableCell colSpan={7} className="text-center py-10">
-											<Loader2 className="h-8 w-8 animate-spin mx-auto" />
+										<TableCell colSpan={9} className="text-center">
+											<Loader2 className="h-6 w-6 animate-spin mx-auto" />
 										</TableCell>
 									</TableRow>
-								) : currentItems.length === 0 ? (
+								) : filteredRecords.length === 0 ? (
 									<TableRow>
-										<TableCell
-											colSpan={7}
-											className="text-center text-muted-foreground py-10 text-base"
-										>
+										<TableCell colSpan={9} className="text-center">
 											No records found
 										</TableCell>
 									</TableRow>
 								) : (
-									currentItems.map((item) => (
-										<TableRow key={item.id} className="hover:bg-muted/50">
-											<TableCell className="font-mono text-xs">
-												{item.id}
+									filteredRecords.map((item) => (
+										<TableRow key={item.id}>
+											<TableCell>{item.id}</TableCell>
+											<TableCell>{item.fullName}</TableCell>
+											<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>
-												<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)}
-													>
+													size="sm"
+													variant="destructive"
+													onClick={() => handleDelete(item.id)}>
 													<Trash className="h-4 w-4" />
 												</Button>
-												</div>
 											</TableCell>
 										</TableRow>
 									))
@@ -248,117 +165,8 @@ 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

@@ -15,13 +15,6 @@ import {
 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,
@@ -30,7 +23,6 @@ import {
 	Download,
 	ChevronLeft,
 	ChevronRight,
-	Eye,
 } from "lucide-react";
 
 export default function AppointmentPage() {
@@ -39,72 +31,86 @@ 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 [itemsPerPage, setItemsPerPage] = useState(10);
+
+	const [meta, setMeta] = useState<any>({});
 
 	const fetchAll = useCallback(async () => {
 		setLoading(true);
 		try {
-			const res = await getAppointmentsApi();
+			const res = await getAppointmentsApi(
+				currentPage,
+				itemsPerPage,
+				searchText,
+				filterDoctor,
+				filterDepartment,
+				filterDate,
+			);
+
 			setAppointments(res?.data || []);
+			setMeta(res?.meta || {});
 		} catch (err) {
 			console.error(err);
 		} finally {
 			setLoading(false);
 		}
-	}, []);
+	}, [
+		currentPage,
+		itemsPerPage,
+		searchText,
+		filterDoctor,
+		filterDepartment,
+		filterDate,
+	]);
 
 	useEffect(() => {
 		fetchAll();
 	}, [fetchAll]);
 
-	const filteredAppointments = appointments.filter((item) => {
-		const matchesSearch =
-			item.name?.toLowerCase().includes(searchText.toLowerCase()) ||
-			item.mobileNumber?.includes(searchText) ||
-			item.email?.toLowerCase().includes(searchText.toLowerCase());
-
-		const matchesDoctor = filterDoctor
-			? item.doctor?.name?.toLowerCase().includes(filterDoctor.toLowerCase())
-			: true;
-
-		const matchesDate = filterDate
-			? new Date(item.date).toISOString().split("T")[0] === filterDate
-			: true;
-
-		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);
 		fetchAll();
 	}
 
-	const handleExport = () => {
-		const exportData = filteredAppointments.map((item) => ({
+	const handleExport = async () => {
+		try {
+			const res = await getAppointmentsApi();
+
+			let data = res?.data || [];
+
+			data = data.filter((item: any) => {
+				const matchesSearch =
+					item.name?.toLowerCase().includes(searchText.toLowerCase()) ||
+					item.mobileNumber?.includes(searchText) ||
+					item.email?.toLowerCase().includes(searchText.toLowerCase());
+
+				const matchesDoctor = filterDoctor
+					? 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
+				);
+			});
+
+			const exportData = data.map((item: any) => ({
 				ID: item.id,
 				Name: item.name,
 				Phone: item.mobileNumber,
@@ -114,41 +120,68 @@ export default function AppointmentPage() {
 				Date: new Date(item.date).toLocaleDateString(),
 				Message: item.message,
 			}));
+
 			exportToExcel(exportData, "appointments");
+		} catch (err) {
+			console.error(err);
+		}
 	};
 
 	return (
 		<div className="p-6 space-y-6">
-			<div className="flex flex-col md:flex-row md:justify-between md:items-center gap-4">
-				<h1 className="text-3xl font-bold">Appointments</h1>
+			<div className="flex justify-between items-center flex-wrap gap-3">
+				<h1 className="text-2xl font-bold">Appointments</h1>
 
-				<div className="flex flex-wrap gap-3">
+				<div className="flex flex-wrap gap-2 items-center">
 					<Input
-						placeholder="Search name / phone..."
+						placeholder="Search..."
 						value={searchText}
-						onChange={(e) => setSearchText(e.target.value)}
-						className="w-[220px] text-base"
+						onChange={(e) => {
+							setSearchText(e.target.value);
+							setCurrentPage(1);
+						}}
+						className="w-[200px]"
+					/>
+
+					<Input
+						placeholder="Doctor"
+						value={filterDoctor}
+						onChange={(e) => setFilterDoctor(e.target.value)}
+						className="w-[160px]"
+					/>
+
+					<Input
+						placeholder="Department"
+						value={filterDepartment}
+						onChange={(e) => setFilterDepartment(e.target.value)}
+						className="w-[160px]"
 					/>
 
 					<Input
 						type="date"
 						value={filterDate}
 						onChange={(e) => setFilterDate(e.target.value)}
-						className="w-[160px] text-base"
+						className="w-[160px]"
 					/>
 
-					<Button
-						variant="outline"
-						onClick={fetchAll}
-						disabled={loading}
-						className="text-base"
-					>
-						<RefreshCw className="mr-2 h-5 w-5" />
-						Refresh
+					<select
+						value={itemsPerPage}
+						onChange={(e) => {
+							setItemsPerPage(Number(e.target.value));
+							setCurrentPage(1);
+						}}
+						className="border px-2 py-1 rounded">
+						<option value={5}>5</option>
+						<option value={10}>10</option>
+						<option value={20}>20</option>
+					</select>
+
+					<Button onClick={fetchAll}>
+						<RefreshCw className="mr-2 h-4 w-4" />
 					</Button>
 
-					<Button onClick={handleExport} className="text-base">
-						<Download className="mr-2 h-5 w-5" />
+					<Button onClick={handleExport}>
+						<Download className="mr-2 h-4 w-4" />
 						Export
 					</Button>
 				</div>
@@ -156,226 +189,84 @@ export default function AppointmentPage() {
 
 			<Card>
 				<CardHeader>
-					<CardTitle className="text-xl">Appointment List</CardTitle>
+					<CardTitle>Appointment List</CardTitle>
 				</CardHeader>
 
-				<CardContent className="p-0 sm:p-6 space-y-4">
-					<div className="rounded-md border overflow-x-auto overflow-y-auto max-h-[650px] relative">
-						<Table className="w-full min-w-[1000px] table-fixed border-separate border-spacing-0">
-							<TableHeader className="sticky top-0 z-20 bg-background shadow-sm">
+				<CardContent>
+					<Table>
+						<TableHeader>
 							<TableRow>
-									<TableHead className="w-[60px] bg-background font-bold text-sm">
-										ID
-									</TableHead>
-									<TableHead className="w-[200px] bg-background font-bold text-sm">
-										Patient
-									</TableHead>
-									<TableHead className="w-[180px] bg-background font-bold text-sm">
-										Doctor
-									</TableHead>
-									<TableHead className="w-[150px] bg-background font-bold text-sm">
-										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>
+								<TableHead>ID</TableHead>
+								<TableHead>Name</TableHead>
+								<TableHead>Phone</TableHead>
+								<TableHead>Doctor</TableHead>
+								<TableHead>Department</TableHead>
+								<TableHead>Date</TableHead>
+								<TableHead>Actions</TableHead>
 							</TableRow>
 						</TableHeader>
 
 						<TableBody>
 							{loading ? (
 								<TableRow>
-										<TableCell colSpan={6} className="text-center py-10">
-											<Loader2 className="h-8 w-8 animate-spin mx-auto" />
+									<TableCell colSpan={7} className="text-center">
+										<Loader2 className="animate-spin mx-auto" />
 									</TableCell>
 								</TableRow>
-								) : currentItems.length === 0 ? (
+							) : appointments.length === 0 ? (
 								<TableRow>
 									<TableCell
-											colSpan={6}
-											className="text-center text-muted-foreground py-10 text-base"
-										>
+										colSpan={7}
+										className="text-center py-6 text-gray-500">
 										No appointments found
 									</TableCell>
 								</TableRow>
 							) : (
-									currentItems.map((item) => (
-										<TableRow key={item.id} className="hover:bg-muted/50">
-											<TableCell className="font-mono text-xs">
-												{item.id}
-											</TableCell>
+								appointments.map((item) => (
+									<TableRow key={item.id}>
+										<TableCell>{item.id}</TableCell>
+										<TableCell>{item.name}</TableCell>
+										<TableCell>{item.mobileNumber}</TableCell>
+										<TableCell>{item.doctor?.name}</TableCell>
+										<TableCell>{item.department?.name}</TableCell>
 										<TableCell>
-												<div className="font-semibold text-base truncate">
-													{item.name}
-												</div>
-												<div className="text-xs text-muted-foreground">
-													{item.mobileNumber}
-												</div>
-											</TableCell>
-											<TableCell>
-												<div className="text-sm font-medium">
-													{item.doctor?.name || "-"}
-												</div>
-												<div className="text-[10px] text-muted-foreground truncate">
-													{item.department?.name}
-												</div>
-											</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)}
-													>
+												size="sm"
+												variant="destructive"
+												onClick={() => handleDelete(item.id)}>
 												<Trash className="h-4 w-4" />
 											</Button>
-												</div>
 										</TableCell>
 									</TableRow>
 								))
 							)}
 						</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 justify-between mt-4">
+						<p>
+							Page {meta.page || 1} of {meta.totalPages || 1}
+						</p>
+
 						<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" />
+								onClick={() => setCurrentPage((p) => p - 1)}>
+								<ChevronLeft />
 							</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" />
+								disabled={currentPage === meta.totalPages}
+								onClick={() => setCurrentPage((p) => p + 1)}>
+								<ChevronRight />
 							</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/Career.tsx

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

frontend/src/pages/Department.tsx

@@ -1,6 +1,5 @@
 import { useState, useEffect, useCallback } from "react";
 import { AxiosError } from "axios";
-import { BytescaleUploader } from "@/components/BytescaleUploader/BytescaleUploader";
 
 import {
 	getDepartmentsApi,
@@ -32,21 +31,11 @@ import {
 import { Input } from "@/components/ui/input";
 import { Textarea } from "@/components/ui/textarea";
 
-import {
-	Loader2,
-	RefreshCw,
-	Plus,
-	Pencil,
-	Trash,
-	Eye,
-	ChevronLeft,
-	ChevronRight,
-} from "lucide-react";
+import { Loader2, RefreshCw, Plus, Pencil, Trash, Eye } from "lucide-react";
 
 interface Department {
 	departmentId: string;
 	name: string;
-	image?: string;
 	para1: string;
 	para2: string;
 	para3: string;
@@ -67,13 +56,9 @@ export default function DepartmentPage() {
 
 	const [searchText, setSearchText] = useState("");
 
-	const [currentPage, setCurrentPage] = useState(1);
-	const itemsPerPage = 10;
-
 	const [form, setForm] = useState<Department>({
 		departmentId: "",
 		name: "",
-		image: "",
 		para1: "",
 		para2: "",
 		para3: "",
@@ -103,22 +88,8 @@ export default function DepartmentPage() {
 		fetchDepartments();
 	}, [fetchDepartments]);
 
-	const filteredDepartments = departments.filter(
-		(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,
+	const filteredDepartments = departments.filter((dep) =>
+		dep.name.toLowerCase().includes(searchText.toLowerCase()),
 	);
 
 	function handleChange(e: any) {
@@ -135,7 +106,6 @@ export default function DepartmentPage() {
 		setForm({
 			departmentId: "",
 			name: "",
-			image: "",
 			para1: "",
 			para2: "",
 			para3: "",
@@ -185,153 +155,118 @@ 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-4">
-				<h1 className="text-3xl font-bold">Departments</h1>
+			<div className="flex flex-col md:flex-row md:justify-between md:items-center gap-3">
+				<h1 className="text-2xl 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-[250px] text-base"
+						className="w-[220px]"
 					/>
 
 					<Button
 						variant="outline"
 						onClick={fetchDepartments}
-						disabled={loading}
-						className="text-base"
-					>
-						<RefreshCw className="mr-2 h-5 w-5" />
+						disabled={loading}>
+						<RefreshCw className="mr-2 h-4 w-4" />
 						Refresh
 					</Button>
 
-					<Button onClick={openAdd} className="text-base">
-						<Plus className="mr-2 h-5 w-5" />
+					<Button onClick={openAdd}>
+						<Plus className="mr-2 h-4 w-4" />
 						Add Department
 					</Button>
 				</div>
 			</div>
 
 			{error && (
-				<div className="p-4 text-red-600 bg-red-50 border rounded-md text-base">
+				<div className="p-4 text-red-600 bg-red-50 border rounded-md">
 					{error}
 				</div>
 			)}
 
 			<Card>
 				<CardHeader>
-					<CardTitle className="text-xl">Department List</CardTitle>
+					<CardTitle>Department List</CardTitle>
 				</CardHeader>
 
-				<CardContent className="p-0 sm:p-6 space-y-4">
-					<div className="rounded-md border overflow-x-auto overflow-y-auto max-h-[650px] relative">
-						<Table className="w-full min-w-[900px] table-fixed border-separate border-spacing-0">
-							<TableHeader className="sticky top-0 z-20 bg-background shadow-sm">
+				<CardContent>
+					<div className="border rounded-md max-h-[500px] overflow-y-auto">
+						<Table className="w-full table-fixed">
+							<TableHeader>
 								<TableRow>
-									<TableHead className="w-[100px] bg-background text-sm font-bold">
-										ID
-									</TableHead>
-									<TableHead className="w-[200px] bg-background text-sm font-bold">
-										Name
-									</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>
+									<TableHead className="w-[80px]">ID</TableHead>
+									<TableHead className="w-[180px]">Name</TableHead>
+									<TableHead className="w-[250px]">Para1</TableHead>
+									<TableHead className="w-[220px]">Facilities</TableHead>
+									<TableHead className="w-[220px]">Services</TableHead>
+									<TableHead className="w-[120px]">Actions</TableHead>
 								</TableRow>
 							</TableHeader>
 
 							<TableBody>
 								{loading ? (
 									<TableRow>
-										<TableCell colSpan={6} className="text-center py-10">
-											<Loader2 className="h-8 w-8 animate-spin mx-auto" />
+										<TableCell colSpan={6} className="text-center">
+											<Loader2 className="h-6 w-6 animate-spin mx-auto" />
 										</TableCell>
 									</TableRow>
-								) : currentItems.length === 0 ? (
+								) : filteredDepartments.length === 0 ? (
 									<TableRow>
-										<TableCell
-											colSpan={6}
-											className="text-center text-muted-foreground py-10 text-base"
-										>
+										<TableCell colSpan={6} className="text-center">
 											No departments found
 										</TableCell>
 									</TableRow>
 								) : (
-									currentItems.map((dep) => (
-										<TableRow
-											key={dep.departmentId}
-											className="hover:bg-muted/50"
-										>
-											<TableCell className="font-mono text-xs">
-												{dep.departmentId}
+									filteredDepartments.map((dep) => (
+										<TableRow key={dep.departmentId}>
+											<TableCell>{dep.departmentId}</TableCell>
+
+											<TableCell>
+												<div className="break-words">{dep.name}</div>
 											</TableCell>
 
 											<TableCell>
-												<div
-													className="font-semibold text-base truncate"
-													title={dep.name}
-												>
-													{dep.name}
-												</div>
-											</TableCell>
-
-											<TableCell>
-												<div className="text-sm break-words whitespace-normal">
+												<div className="break-words whitespace-normal">
 													{truncate(dep.para1)}
 												</div>
 											</TableCell>
 
 											<TableCell>
-												<div className="text-sm break-words whitespace-normal">
+												<div className="break-words whitespace-normal">
 													{truncate(dep.facilities)}
 												</div>
 											</TableCell>
 
 											<TableCell>
-												<div className="text-sm break-words whitespace-normal">
+												<div className="break-words whitespace-normal">
 													{truncate(dep.services)}
 												</div>
 											</TableCell>
 
-											<TableCell className="text-right">
-												<div className="flex justify-end gap-2">
+											<TableCell className="flex gap-2 whitespace-nowrap">
 												<Button
-														size="icon"
-														variant="ghost"
-														className="h-9 w-9"
-														onClick={() => openView(dep)}
-													>
+													size="sm"
+													variant="outline"
+													onClick={() => openView(dep)}>
 													<Eye className="h-4 w-4" />
 												</Button>
 
 												<Button
-														size="icon"
-														variant="ghost"
-														className="h-9 w-9"
-														onClick={() => openEdit(dep)}
-													>
+													size="sm"
+													variant="outline"
+													onClick={() => openEdit(dep)}>
 													<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(dep.departmentId)}
-													>
+													size="sm"
+													variant="destructive"
+													onClick={() => handleDelete(dep.departmentId)}>
 													<Trash className="h-4 w-4" />
 												</Button>
-												</div>
 											</TableCell>
 										</TableRow>
 									))
@@ -339,52 +274,6 @@ 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>
 
@@ -397,14 +286,6 @@ export default function DepartmentPage() {
 					</DialogHeader>
 
 					<div className="space-y-4">
-						<div className="space-y-2">
-							<label className="text-sm font-semibold">Department Image</label>
-							<BytescaleUploader
-								value={form.image}
-								folderPath="/departments"
-								onChange={(url) => setForm({ ...form, image: url })}
-							/>
-						</div>
 						<Input
 							name="departmentId"
 							value={form.departmentId}
@@ -465,6 +346,7 @@ 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>
@@ -473,29 +355,35 @@ 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,8 +1,4 @@
-import { useState, useEffect, useCallback } from "react";
-import { AxiosError } from "axios";
-
-import { BytescaleUploader } from "@/components/BytescaleUploader/BytescaleUploader";
-
+import {useState, useEffect, useCallback} from "react";
 import {
 	getDoctorsApi,
 	createDoctorApi,
@@ -10,7 +6,8 @@ import {
 	deleteDoctorApi,
 	getDoctorTimingApi,
 } from "@/api/doctor";
-import { getDepartmentsApi } from "@/api/department";
+
+import {getDepartmentsApi} from "@/api/department";
 
 import {
 	Table,
@@ -20,8 +17,10 @@ import {
 	TableHeader,
 	TableRow,
 } from "@/components/ui/table";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { Button } from "@/components/ui/button";
+
+import {Card, CardContent, CardHeader, CardTitle} from "@/components/ui/card";
+import {Button} from "@/components/ui/button";
+
 import {
 	Dialog,
 	DialogContent,
@@ -29,54 +28,36 @@ import {
 	DialogTitle,
 	DialogFooter,
 } from "@/components/ui/dialog";
-import { Input } from "@/components/ui/input";
-import { Badge } from "@/components/ui/badge";
+
+import {Popover, PopoverContent, PopoverTrigger} from "@/components/ui/popover";
 import {
-	Loader2,
-	RefreshCw,
-	Plus,
-	Pencil,
-	Trash,
-	ChevronLeft,
-	ChevronRight,
-	User,
-} from "lucide-react";
+	Command,
+	CommandGroup,
+	CommandItem,
+	CommandInput,
+} from "@/components/ui/command";
+
+import {Input} from "@/components/ui/input";
+import {Loader2, Plus, Pencil, Trash, RefreshCw} 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: "",
-		image: "",
 		designation: "",
 		workingStatus: "",
 		qualification: "",
@@ -85,20 +66,16 @@ 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) {
-			if (err instanceof AxiosError) {
-				setError(err.response?.data?.message || "Failed to load data");
-			} else {
-				setError("Something went wrong");
-			}
+			console.error(err);
 		} finally {
 			setLoading(false);
 		}
@@ -120,21 +97,13 @@ 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 handleDepartmentToggle(depId: string) {
+	function handleDepartmentChange(depId: string) {
 		const exists = form.departments.find((d: any) => d.departmentId === depId);
+
 		if (exists) {
 			setForm({
 				...form,
@@ -145,7 +114,7 @@ export default function DoctorPage() {
 		} else {
 			setForm({
 				...form,
-				departments: [...form.departments, { departmentId: depId, timing: {} }],
+				departments: [...form.departments, {departmentId: depId, timing: {}}],
 			});
 		}
 	}
@@ -155,7 +124,10 @@ 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,
 			),
 		});
@@ -166,7 +138,6 @@ export default function DoctorPage() {
 		setForm({
 			doctorId: "",
 			name: "",
-			image: "",
 			designation: "",
 			workingStatus: "",
 			qualification: "",
@@ -177,21 +148,25 @@ 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,
-				image: doc.image || "",
 				designation: doc.designation,
 				workingStatus: doc.workingStatus,
 				qualification: doc.qualification,
-				departments: timingData.map((d: any) => ({
-					departmentId: d.departmentId,
-					timing: d.timing || {},
-				})),
+				departments: mappedDepartments,
 			});
+
 			setOpenModal(true);
 		} catch (err) {
 			console.error(err);
@@ -205,40 +180,38 @@ export default function DoctorPage() {
 			} else {
 				await createDoctorApi(form);
 			}
+
 			setOpenModal(false);
 			fetchAll();
-		} catch (error) {
-			console.error(error);
+		} catch (err) {
+			console.error(err);
 		}
 	}
 
 	async function handleDelete(id: string) {
-		if (!confirm("Delete this doctor?")) return;
-		try {
+		if (!confirm("Delete doctor?")) return;
 		await deleteDoctorApi(id);
 		fetchAll();
-		} catch (error) {
-			console.error(error);
-		}
 	}
 
 	return (
 		<div className="p-6 space-y-6">
-			<div className="flex flex-col md:flex-row md:justify-between md:items-center gap-4">
-				<h1 className="text-3xl font-bold">Doctors</h1>
+			{/* HEADER */}
+			<div className="flex flex-col md:flex-row md:justify-between md:items-center gap-3">
+				<h1 className="text-2xl font-bold">Doctors</h1>
 
-				<div className="flex flex-wrap gap-3">
+				<div className="flex flex-wrap gap-2">
 					<Input
 						placeholder="Search doctor..."
 						value={searchText}
 						onChange={(e) => setSearchText(e.target.value)}
-						className="w-[250px] text-base"
+						className="w-[200px]"
 					/>
 
 					<select
 						value={filterDepartment}
 						onChange={(e) => setFilterDepartment(e.target.value)}
-						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"
+						className="border rounded px-2 py-1"
 					>
 						<option value="">All Departments</option>
 						{departments.map((dep) => (
@@ -248,149 +221,93 @@ export default function DoctorPage() {
 						))}
 					</select>
 
-					<Button
-						variant="outline"
-						onClick={fetchAll}
-						disabled={loading}
-						className="text-base"
-					>
-						<RefreshCw className="mr-2 h-5 w-5" />
+					<Button variant="outline" onClick={fetchAll} disabled={loading}>
+						<RefreshCw className="mr-2 h-4 w-4" />
 						Refresh
 					</Button>
 
-					<Button onClick={openAdd} className="text-base">
-						<Plus className="mr-2 h-5 w-5" />
+					<Button onClick={openAdd}>
+						<Plus className="mr-2 h-4 w-4" />
 						Add Doctor
 					</Button>
 				</div>
 			</div>
 
-			{error && (
-				<div className="p-4 text-red-600 bg-red-50 border rounded-md text-base">
-					{error}
-				</div>
-			)}
-
+			{/* TABLE */}
 			<Card>
 				<CardHeader>
-					<CardTitle className="text-xl">Doctor List</CardTitle>
+					<CardTitle>Doctor List</CardTitle>
 				</CardHeader>
 
-				<CardContent className="p-0 sm:p-6 space-y-4">
-					<div className="rounded-md border overflow-x-auto overflow-y-auto max-h-[650px] relative">
-						<Table className="w-full min-w-[900px] table-fixed border-separate border-spacing-0">
-							<TableHeader className="sticky top-0 z-20 bg-background shadow-sm">
+				<CardContent>
+					<div className="overflow-x-auto">
+						<Table className="min-w-[1000px]">
+							<TableHeader>
 								<TableRow>
-									<TableHead className="w-[100px] bg-background text-sm font-bold">
-										ID
-									</TableHead>
-									<TableHead className="w-[200px] bg-background text-sm font-bold">
-										Name
-									</TableHead>
-									<TableHead className="w-[180px] bg-background text-sm font-bold">
-										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>
+									<TableHead>ID</TableHead>
+									<TableHead>Name</TableHead>
+									<TableHead>Designation</TableHead>
+									<TableHead>Status</TableHead>
+									<TableHead>Qualification</TableHead>
+									<TableHead>Departments</TableHead>
+									<TableHead>Timing</TableHead>
+									<TableHead>Actions</TableHead>
 								</TableRow>
 							</TableHeader>
 
 							<TableBody>
 								{loading ? (
 									<TableRow>
-										<TableCell colSpan={6} className="text-center py-10">
-											<Loader2 className="h-8 w-8 animate-spin mx-auto" />
+										<TableCell colSpan={8} className="text-center">
+											<Loader2 className="h-6 w-6 animate-spin mx-auto" />
 										</TableCell>
 									</TableRow>
-								) : currentItems.length === 0 ? (
+								) : filteredDoctors.length === 0 ? (
 									<TableRow>
-										<TableCell
-											colSpan={6}
-											className="text-center text-muted-foreground py-10 text-base"
-										>
+										<TableCell colSpan={8} className="text-center">
 											No doctors found
 										</TableCell>
 									</TableRow>
 								) : (
-									currentItems.map((doc) => (
-										<TableRow key={doc.doctorId} className="hover:bg-muted/50">
-											<TableCell className="truncate font-mono text-xs">
-												{doc.doctorId}
-											</TableCell>
+									filteredDoctors.map((doc) => (
+										<TableRow key={doc.doctorId}>
+											<TableCell>{doc.doctorId}</TableCell>
+											<TableCell>{doc.name}</TableCell>
+											<TableCell>{doc.designation}</TableCell>
+											<TableCell>{doc.workingStatus}</TableCell>
+											<TableCell>{doc.qualification}</TableCell>
 
 											<TableCell>
-												<div
-													className="font-semibold text-base truncate"
-													title={doc.name}
-												>
-													{doc.name}
-												</div>
-												<div className="text-xs text-muted-foreground truncate italic">
-													{doc.workingStatus}
-												</div>
+												{doc.departments
+													?.map((d: any) => d.departmentName)
+													.join(", ")}
 											</TableCell>
 
-											<TableCell>
-												<div
-													className="truncate text-sm"
-													title={doc.designation}
-												>
-													{doc.designation || "-"}
-												</div>
-											</TableCell>
-
-											<TableCell>
-												<div
-													className="truncate text-sm"
-													title={doc.qualification}
-												>
-													{doc.qualification || "-"}
-												</div>
-											</TableCell>
-
-											<TableCell>
-												<div className="flex flex-wrap gap-1">
+											<TableCell className="max-w-[250px] whitespace-normal">
 												{doc.departments?.map((d: any) => (
-														<Badge
-															key={d.departmentId}
-															variant="secondary"
-															className="text-xs px-2 h-5 leading-none"
-														>
-															{d.departmentName}
-														</Badge>
-													))}
-													{doc.departments?.length === 0 && (
-														<span className="text-muted-foreground">-</span>
-													)}
+													<div key={d.departmentId}>
+														<b>{d.departmentName}:</b>{" "}
+														{JSON.stringify(d.timing)}
 													</div>
+												))}
 											</TableCell>
 
-											<TableCell className="text-right">
-												<div className="flex justify-end gap-2">
+											<TableCell className="flex gap-2">
 												<Button
-														size="icon"
-														variant="ghost"
-														className="h-9 w-9"
+													size="sm"
+													variant="outline"
 													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"
+													size="sm"
+													variant="destructive"
 													onClick={() => handleDelete(doc.doctorId)}
 												>
 													<Trash className="h-4 w-4" />
 												</Button>
-												</div>
 											</TableCell>
 										</TableRow>
 									))
@@ -398,198 +315,132 @@ 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="w-full !max-w-5xl h-[90vh] flex flex-col p-0 overflow-hidden">
-					<DialogHeader className="p-6 border-b bg-background z-10">
-						<DialogTitle className="text-2xl">
-							{editing ? "Edit Doctor" : "Add Doctor"}
-						</DialogTitle>
+				<DialogContent className="overflow-y-auto max-h-[80vh] ">
+					<DialogHeader>
+						<DialogTitle>{editing ? "Edit Doctor" : "Add Doctor"}</DialogTitle>
 					</DialogHeader>
 
-					<div className="flex-1 overflow-y-auto p-6">
-						<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
-							<div className="space-y-6">
-								<h3 className="font-bold text-base border-b pb-2">
-									Basic Information
-								</h3>
 					<div className="space-y-4">
-									<div className="space-y-2">
-										<label className="text-sm font-semibold">
-											Doctor Photo
-										</label>
-										<BytescaleUploader
-											value={form.image}
-											folderPath="/doctors"
-											onChange={(url) => setForm({ ...form, image: url })}
-										/>
-									</div>
-
-									<div className="space-y-1">
-										<label className="text-sm font-semibold">Doctor ID</label>
 						<Input
 							name="doctorId"
-											placeholder="GG-DOC-001"
+							placeholder="Doctor ID"
 							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"
+							placeholder="Name"
 							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"
+							placeholder="Designation"
 							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"
+							placeholder="Working Status"
 							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"
+							placeholder="Qualification"
 							value={form.qualification}
 							onChange={handleChange}
-											className="text-base"
 						/>
-									</div>
-								</div>
 
-								<div className="p-5 border rounded-md bg-muted/20">
-									<p className="text-base font-bold mb-4">Assign Departments</p>
-									<div className="grid grid-cols-2 gap-3">
-										{departments.map((dep) => {
-											const isSelected = form.departments.some(
-												(d: any) => d.departmentId === dep.departmentId,
-											);
+						{/* 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 (
-												<Button
-													key={dep.departmentId}
-													type="button"
-													variant={isSelected ? "default" : "outline"}
-													size="sm"
-													className="justify-start text-sm min-h-11 whitespace-normal break-words text-left py-2"
-													onClick={() =>
-														handleDepartmentToggle(dep.departmentId)
-													}
-												>
-													{dep.name}
-												</Button>
+														<span key={d.departmentId} className="text-sm">
+															{name}
+														</span>
 													);
 												})}
 											</div>
-								</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>
 
-							<div className="space-y-6">
-								<h3 className="font-bold text-base border-b pb-2">
-									Working Hours / Timing
-								</h3>
-								{form.departments.length === 0 ? (
-									<div className="text-base text-muted-foreground italic py-24 text-center border-2 border-dashed rounded-lg">
-										Select a department to configure timing slots
-									</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"
+									className="tw-border tw-p-3 tw-rounded"
 								>
-													<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>
+									<p className="tw-font-semibold">{depName}</p>
+
+									{[
+										"monday",
+										"tuesday",
+										"wednesday",
+										"thursday",
+										"friday",
+										"saturday",
+										"sunday",
+										"additional",
+									].map((day) => (
 										<Input
-																	className="h-9 text-sm"
-																	placeholder="e.g. 09:00 AM - 01:00 PM"
+											key={day}
+											placeholder={day}
 											value={dep.timing?.[day] || ""}
 											onChange={(e) =>
 												handleTimingChange(
@@ -599,28 +450,18 @@ export default function DoctorPage() {
 												)
 											}
 										/>
-															</div>
 									))}
 								</div>
-												</div>
 							);
 						})}
 					</div>
-								)}
-							</div>
-						</div>
-					</div>
 
-					<DialogFooter className="p-6 border-t bg-background z-10 mt-0">
-						<Button
-							variant="ghost"
-							onClick={() => setOpenModal(false)}
-							className="text-base"
-						>
+					<DialogFooter>
+						<Button variant="outline" onClick={() => setOpenModal(false)}>
 							Cancel
 						</Button>
-						<Button onClick={handleSubmit} className="px-10 text-base">
-							{editing ? "Save Changes" : "Create Doctor Profile"}
+						<Button onClick={handleSubmit}>
+							{editing ? "Update" : "Create"}
 						</Button>
 					</DialogFooter>
 				</DialogContent>

frontend/src/pages/candidates.tsx

@@ -13,26 +13,11 @@ 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,
-	ChevronLeft,
-	ChevronRight,
-	Eye,
-	User,
-} from "lucide-react";
+import { Loader2, Trash, RefreshCw, Download } from "lucide-react";
 
 export default function CandidatePage() {
 	const [candidates, setCandidates] = useState<any[]>([]);
@@ -41,12 +26,6 @@ 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 {
@@ -76,23 +55,6 @@ 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);
@@ -109,7 +71,7 @@ export default function CandidatePage() {
 			Designation: item.career?.designation,
 			Subject: item.subject,
 			CoverLetter: item.coverLetter,
-			AppliedDate: new Date(item.createdAt).toLocaleDateString(),
+			Date: new Date(item.createdAt).toLocaleDateString(),
 		}));
 
 		exportToExcel(exportData, "candidates");
@@ -117,36 +79,31 @@ export default function CandidatePage() {
 
 	return (
 		<div className="p-6 space-y-6">
-			<div className="flex flex-col md:flex-row md:justify-between md:items-center gap-4">
-				<h1 className="text-3xl font-bold">Candidates</h1>
+			<div className="flex justify-between items-center gap-3 flex-wrap">
+				<h1 className="text-2xl font-bold">Candidates</h1>
 
-				<div className="flex flex-wrap gap-3">
+				<div className="flex flex-wrap gap-2">
 					<Input
-						placeholder="Search candidate..."
+						placeholder="Search name / phone / email..."
 						value={searchText}
 						onChange={(e) => setSearchText(e.target.value)}
-						className="w-[250px] text-base"
+						className="w-[220px]"
 					/>
 
 					<Input
-						placeholder="Filter by Career"
+						placeholder="Filter Career"
 						value={filterCareer}
 						onChange={(e) => setFilterCareer(e.target.value)}
-						className="w-[200px] text-base"
+						className="w-[200px]"
 					/>
 
-					<Button
-						variant="outline"
-						onClick={fetchAll}
-						disabled={loading}
-						className="text-base"
-					>
-						<RefreshCw className="mr-2 h-5 w-5" />
+					<Button variant="outline" onClick={fetchAll} disabled={loading}>
+						<RefreshCw className="mr-2 h-4 w-4" />
 						Refresh
 					</Button>
 
-					<Button onClick={handleExport} className="text-base">
-						<Download className="mr-2 h-5 w-5" />
+					<Button variant="outline" onClick={handleExport}>
+						<Download className="mr-2 h-4 w-4" />
 						Export
 					</Button>
 				</div>
@@ -154,104 +111,68 @@ export default function CandidatePage() {
 
 			<Card>
 				<CardHeader>
-					<CardTitle className="text-xl">Application List</CardTitle>
+					<CardTitle>Candidate List</CardTitle>
 				</CardHeader>
 
-				<CardContent className="p-0 sm:p-6 space-y-4">
-					<div className="rounded-md border overflow-x-auto overflow-y-auto max-h-[650px] relative">
-						<Table className="w-full min-w-[1100px] table-fixed border-separate border-spacing-0">
-							<TableHeader className="sticky top-0 z-20 bg-background shadow-sm">
+				<CardContent>
+					<div className="overflow-x-auto">
+						<Table className="min-w-[900px]">
+							<TableHeader>
 								<TableRow>
-									<TableHead className="w-[60px] bg-background font-bold text-sm">
-										ID
-									</TableHead>
-									<TableHead className="w-[220px] bg-background font-bold text-sm">
-										Full Name
-									</TableHead>
-									<TableHead className="w-[180px] bg-background font-bold text-sm">
-										Career & Post
-									</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>
+									<TableHead>ID</TableHead>
+									<TableHead>Name</TableHead>
+									<TableHead>Phone</TableHead>
+									<TableHead>Email</TableHead>
+									<TableHead>Career</TableHead>
+									<TableHead>Designation</TableHead>
+									<TableHead>Subject</TableHead>
+									<TableHead>Cover Letter</TableHead>
+									<TableHead>Applied On</TableHead>
+									<TableHead>Actions</TableHead>
 								</TableRow>
 							</TableHeader>
 
 							<TableBody>
 								{loading ? (
 									<TableRow>
-										<TableCell colSpan={7} className="text-center py-10">
-											<Loader2 className="h-8 w-8 animate-spin mx-auto" />
+										<TableCell colSpan={10} className="text-center">
+											<Loader2 className="h-6 w-6 animate-spin mx-auto" />
 										</TableCell>
 									</TableRow>
-								) : currentItems.length === 0 ? (
+								) : filteredCandidates.length === 0 ? (
 									<TableRow>
-										<TableCell
-											colSpan={7}
-											className="text-center text-muted-foreground py-10 text-base"
-										>
+										<TableCell colSpan={10} className="text-center">
 											No candidates found
 										</TableCell>
 									</TableRow>
 								) : (
-									currentItems.map((item) => (
-										<TableRow key={item.id} className="hover:bg-muted/50">
-											<TableCell className="font-mono text-xs">
-												{item.id}
+									filteredCandidates.map((item) => (
+										<TableRow key={item.id}>
+											<TableCell>{item.id}</TableCell>
+											<TableCell>{item.fullName}</TableCell>
+											<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>
-												<div className="text-sm line-clamp-2 text-muted-foreground italic">
-													{item.coverLetter || "No cover letter provided."}
-												</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)}
-													>
+													size="sm"
+													variant="destructive"
+													onClick={() => handleDelete(item.id)}>
 													<Trash className="h-4 w-4" />
 												</Button>
-												</div>
 											</TableCell>
 										</TableRow>
 									))
@@ -259,126 +180,8 @@ 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/email.tsx

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

frontend/src/pages/inquiry.tsx

@@ -13,26 +13,11 @@ 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,
-	ChevronLeft,
-	ChevronRight,
-	Eye,
-	Mail,
-} from "lucide-react";
+import { Loader2, Trash, RefreshCw, Download } from "lucide-react";
 
 export default function InquiryPage() {
 	const [inquiries, setInquiries] = useState<any[]>([]);
@@ -40,12 +25,6 @@ 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 {
@@ -71,23 +50,6 @@ 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);
@@ -110,29 +72,24 @@ export default function InquiryPage() {
 
 	return (
 		<div className="p-6 space-y-6">
-			<div className="flex flex-col md:flex-row md:justify-between md:items-center gap-4">
-				<h1 className="text-3xl font-bold">Inquiries</h1>
+			<div className="flex justify-between items-center gap-3 flex-wrap">
+				<h1 className="text-2xl font-bold">Inquiries</h1>
 
-				<div className="flex flex-wrap gap-3">
+				<div className="flex flex-wrap gap-2">
 					<Input
-						placeholder="Search name / phone / subject..."
+						placeholder="Search name / phone / email / subject..."
 						value={searchText}
 						onChange={(e) => setSearchText(e.target.value)}
-						className="w-[280px] text-base"
+						className="w-[260px]"
 					/>
 
-					<Button
-						variant="outline"
-						onClick={fetchAll}
-						disabled={loading}
-						className="text-base"
-					>
-						<RefreshCw className="mr-2 h-5 w-5" />
+					<Button variant="outline" onClick={fetchAll} disabled={loading}>
+						<RefreshCw className="mr-2 h-4 w-4" />
 						Refresh
 					</Button>
 
-					<Button onClick={handleExport} className="text-base">
-						<Download className="mr-2 h-5 w-5" />
+					<Button variant="outline" onClick={handleExport}>
+						<Download className="mr-2 h-4 w-4" />
 						Export
 					</Button>
 				</div>
@@ -140,100 +97,62 @@ export default function InquiryPage() {
 
 			<Card>
 				<CardHeader>
-					<CardTitle className="text-xl">Customer Inquiries</CardTitle>
+					<CardTitle>Inquiry List</CardTitle>
 				</CardHeader>
 
-				<CardContent className="p-0 sm:p-6 space-y-4">
-					<div className="rounded-md border overflow-x-auto overflow-y-auto max-h-[650px] relative">
-						<Table className="w-full min-w-[1000px] table-fixed border-separate border-spacing-0">
-							<TableHeader className="sticky top-0 z-20 bg-background shadow-sm">
+				<CardContent>
+					<div className="overflow-x-auto">
+						<Table className="min-w-[900px]">
+							<TableHeader>
 								<TableRow>
-									<TableHead className="w-[60px] bg-background font-bold text-sm">
-										ID
-									</TableHead>
-									<TableHead className="w-[220px] bg-background font-bold text-sm">
-										Customer Details
-									</TableHead>
-									<TableHead className="w-[200px] bg-background font-bold text-sm">
-										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>
+									<TableHead>ID</TableHead>
+									<TableHead>Name</TableHead>
+									<TableHead>Phone</TableHead>
+									<TableHead>Email</TableHead>
+									<TableHead>Subject</TableHead>
+									<TableHead>Message</TableHead>
+									<TableHead>Date</TableHead>
+									<TableHead>Actions</TableHead>
 								</TableRow>
 							</TableHeader>
 
 							<TableBody>
 								{loading ? (
 									<TableRow>
-										<TableCell colSpan={6} className="text-center py-10">
-											<Loader2 className="h-8 w-8 animate-spin mx-auto" />
+										<TableCell colSpan={8} className="text-center">
+											<Loader2 className="h-6 w-6 animate-spin mx-auto" />
 										</TableCell>
 									</TableRow>
-								) : currentItems.length === 0 ? (
+								) : filteredInquiries.length === 0 ? (
 									<TableRow>
-										<TableCell
-											colSpan={6}
-											className="text-center text-muted-foreground py-10 text-base"
-										>
+										<TableCell colSpan={8} className="text-center">
 											No inquiries found
 										</TableCell>
 									</TableRow>
 								) : (
-									currentItems.map((item) => (
-										<TableRow key={item.id} className="hover:bg-muted/50">
-											<TableCell className="font-mono text-xs">
-												{item.id}
+									filteredInquiries.map((item) => (
+										<TableRow key={item.id}>
+											<TableCell>{item.id}</TableCell>
+											<TableCell>{item.fullName}</TableCell>
+											<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>
-												<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)}
-													>
+													size="sm"
+													variant="destructive"
+													onClick={() => handleDelete(item.id)}>
 													<Trash className="h-4 w-4" />
 												</Button>
-												</div>
 											</TableCell>
 										</TableRow>
 									))
@@ -241,115 +160,8 @@ 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

@@ -1,5 +1,4 @@
 import { useState, useEffect, useCallback } from "react";
-import { BytescaleUploader } from "@/components/BytescaleUploader/BytescaleUploader";
 
 import {
 	getNewsApi,
@@ -20,7 +19,6 @@ 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,
@@ -39,15 +37,11 @@ import {
 	Eye,
 	ChevronLeft,
 	ChevronRight,
-	Newspaper,
-	ImageIcon,
-	X,
 } 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("");
 
@@ -63,7 +57,6 @@ export default function NewsPage() {
 	const [form, setForm] = useState({
 		headline: "",
 		content: "",
-		imageUrls: [] as string[],
 		firstPara: "",
 		secondPara: "",
 		date: "",
@@ -73,46 +66,39 @@ export default function NewsPage() {
 	const fetchAll = useCallback(async () => {
 		setLoading(true);
 		try {
-			const res = await getNewsApi(currentPage, itemsPerPage);
-
+			const res = await getNewsApi();
 			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) =>
-			item.Headline?.toLowerCase().includes(searchText.toLowerCase()) ||
-			item.Author?.toLowerCase().includes(searchText.toLowerCase()),
+	const filteredNews = news.filter((item) =>
+		item.Headline?.toLowerCase().includes(searchText.toLowerCase()),
 	);
 
-	const totalPages = Math.ceil(totalItems / itemsPerPage);
+	const totalPages = Math.ceil(filteredNews.length / 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 });
 	}
 
-	function removeImageUrl(index: number) {
-		setForm((prev) => ({
-			...prev,
-			imageUrls: prev.imageUrls.filter((_, i) => i !== index),
-		}));
-	}
-
 	function openAdd() {
 		setEditing(null);
 		setForm({
 			headline: "",
 			content: "",
-			imageUrls: [],
 			firstPara: "",
 			secondPara: "",
 			date: "",
@@ -123,15 +109,16 @@ export default function NewsPage() {
 
 	function openEdit(item: any) {
 		setEditing(item);
+
 		setForm({
 			headline: item.Headline || "",
 			content: item.Content || "",
-			imageUrls: item.Images ? item.Images.map((img: any) => img.image) : [],
 			firstPara: item.FirstPara || "",
 			secondPara: item.SecondPara || "",
 			date: item.Date ? item.Date.split("T")[0] : "",
 			author: item.Author || "",
 		});
+
 		setOpenModal(true);
 	}
 
@@ -162,17 +149,18 @@ export default function NewsPage() {
 
 	return (
 		<div className="p-6 space-y-6">
-			<div className="flex flex-col md:flex-row md:justify-between md:items-center gap-4">
-				<h1 className="text-3xl font-bold font-sans tracking-tight">
-					News Media
-				</h1>
+			<div className="flex justify-between items-center flex-wrap gap-3">
+				<h1 className="text-2xl font-bold">News Media</h1>
 
-				<div className="flex flex-wrap gap-3 items-center">
+				<div className="flex gap-2 flex-wrap items-center">
 					<Input
-						placeholder="Filter headline..."
+						placeholder="Search headline..."
 						value={searchText}
-						onChange={(e) => setSearchText(e.target.value)}
-						className="w-[250px] text-base"
+						onChange={(e) => {
+							setSearchText(e.target.value);
+							setCurrentPage(1);
+						}}
+						className="w-[250px]"
 					/>
 
 					<select
@@ -181,147 +169,98 @@ export default function NewsPage() {
 							setItemsPerPage(Number(e.target.value));
 							setCurrentPage(1);
 						}}
-						className="flex h-10 rounded-md border border-input bg-background px-3 py-2 text-sm focus:ring-2 focus:ring-primary"
-					>
+						className="border px-2 py-1 rounded">
 						<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}
-						className="text-base"
-					>
-						<RefreshCw className="mr-2 h-5 w-5" />
+					<Button variant="outline" onClick={fetchAll} disabled={loading}>
+						<RefreshCw className="mr-2 h-4 w-4" />
 						Refresh
 					</Button>
 
-					<Button onClick={openAdd} className="text-base">
-						<Plus className="mr-2 h-5 w-5" />
+					<Button onClick={openAdd}>
+						<Plus className="mr-2 h-4 w-4" />
 						Add News
 					</Button>
 				</div>
 			</div>
 
-			<Card className="shadow-sm">
+			<Card>
 				<CardHeader>
-					<CardTitle className="text-xl">News Archives</CardTitle>
+					<CardTitle>News List</CardTitle>
 				</CardHeader>
 
-				<CardContent className="p-0 sm:p-6 space-y-4">
-					<div className="rounded-md border overflow-x-auto overflow-y-auto max-h-[650px] relative">
-						<Table className="w-full min-w-[1000px] table-fixed border-separate border-spacing-0">
-							<TableHeader className="sticky top-0 z-20 bg-background shadow-sm">
+				<CardContent>
+					<div className="overflow-x-auto">
+						<Table className="min-w-[900px] table-fixed">
+							<TableHeader>
 								<TableRow>
-									<TableHead className="w-[80px] bg-background font-bold">
-										ID
-									</TableHead>
-									<TableHead className="w-[100px] bg-background font-bold">
-										Cover
-									</TableHead>
-									<TableHead className="w-[280px] bg-background font-bold">
-										Headline
-									</TableHead>
-									<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>
+									<TableHead className="w-[60px]">ID</TableHead>
+									<TableHead className="w-[220px]">Headline</TableHead>
+									<TableHead className="w-[120px]">Author</TableHead>
+									<TableHead className="w-[120px]">Date</TableHead>
+									<TableHead className="w-[260px]">Content</TableHead>
+									<TableHead className="w-[150px]">Actions</TableHead>
 								</TableRow>
 							</TableHeader>
 
 							<TableBody>
 								{loading ? (
 									<TableRow>
-										<TableCell colSpan={7} className="text-center py-10">
-											<Loader2 className="h-8 w-8 animate-spin mx-auto text-primary" />
+										<TableCell colSpan={6} className="text-center">
+											<Loader2 className="animate-spin mx-auto" />
 										</TableCell>
 									</TableRow>
-								) : filteredNews.length === 0 ? (
+								) : paginatedData.length === 0 ? (
 									<TableRow>
-										<TableCell
-											colSpan={7}
-											className="text-center text-muted-foreground py-10 text-base"
-										>
-											No news articles found
+										<TableCell colSpan={6} className="text-center">
+											No news found
 										</TableCell>
 									</TableRow>
 								) : (
-									filteredNews.map((item) => (
-										<TableRow key={item.Id} className="hover:bg-muted/50">
-											<TableCell className="font-mono text-xs">
-												{item.Id}
-											</TableCell>
-											<TableCell>
-												{item.Images?.[0] ? (
-													<img
-														src={item.Images[0].image}
-														className="w-10 h-10 object-cover rounded border"
-														alt="cover"
-													/>
-												) : (
-													<div className="w-10 h-10 bg-muted flex items-center justify-center rounded">
-														<ImageIcon className="w-4 h-4 text-muted-foreground" />
-													</div>
-												)}
-											</TableCell>
-											<TableCell>
-												<div
-													className="font-semibold text-base line-clamp-2"
-													title={item.Headline}
-												>
+									paginatedData.map((item) => (
+										<TableRow key={item.Id}>
+											<TableCell>{item.Id}</TableCell>
+
+											<TableCell className="break-words whitespace-normal">
 												{item.Headline}
-												</div>
 											</TableCell>
-											<TableCell className="text-sm font-medium">
-												{item.Author || "-"}
-											</TableCell>
-											<TableCell className="text-sm">
+
+											<TableCell>{item.Author}</TableCell>
+
+											<TableCell>
 												{item.Date
 													? new Date(item.Date).toLocaleDateString()
 													: "-"}
 											</TableCell>
-											<TableCell>
-												<div className="text-sm line-clamp-2 text-muted-foreground">
+
+											<TableCell className="break-words whitespace-normal">
 												{item.Content}
-												</div>
 											</TableCell>
-											<TableCell className="text-right">
-												<div className="flex justify-end gap-2">
+
+											<TableCell className="flex gap-2">
 												<Button
-														size="icon"
-														variant="ghost"
-														className="h-9 w-9"
-														onClick={() => openView(item)}
-													>
+													size="sm"
+													variant="outline"
+													onClick={() => openView(item)}>
 													<Eye className="h-4 w-4" />
 												</Button>
+
 												<Button
-														size="icon"
-														variant="ghost"
-														className="h-9 w-9"
-														onClick={() => openEdit(item)}
-													>
+													size="sm"
+													variant="outline"
+													onClick={() => openEdit(item)}>
 													<Pencil className="h-4 w-4" />
 												</Button>
+
 												<Button
-														size="icon"
-														variant="ghost"
-														className="h-9 w-9 text-destructive hover:bg-destructive/10"
-														onClick={() => handleDelete(Number(item.Id))}
-													>
+													size="sm"
+													variant="destructive"
+													onClick={() => handleDelete(Number(item.Id))}>
 													<Trash className="h-4 w-4" />
 												</Button>
-												</div>
 											</TableCell>
 										</TableRow>
 									))
@@ -330,241 +269,129 @@ export default function NewsPage() {
 						</Table>
 					</div>
 
-					{!loading && totalItems > 0 && (
-						<div className="flex items-center justify-between px-2 py-4 border-t">
-							<div className="text-sm text-muted-foreground">
-								Total <span className="font-bold">{totalItems}</span> articles
-								(Page <span className="font-bold">{currentPage}</span> of{" "}
-								{totalPages})
-							</div>
-							<div className="flex items-center gap-6">
-								<div className="text-base font-semibold">
+					{/* PAGINATION */}
+					<div className="flex justify-between items-center mt-4">
+						<p className="text-sm">
 							Page {currentPage} of {totalPages}
-								</div>
+						</p>
+
 						<div className="flex gap-2">
 							<Button
 								variant="outline"
-										size="icon"
-										className="h-10 w-10"
-										onClick={() =>
-											setCurrentPage((prev) => Math.max(prev - 1, 1))
-										}
+								size="sm"
 								disabled={currentPage === 1}
-									>
-										<ChevronLeft className="h-5 w-5" />
+								onClick={() => setCurrentPage((p) => p - 1)}>
+								<ChevronLeft className="h-4 w-4" />
 							</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" />
+								size="sm"
+								disabled={currentPage === totalPages}
+								onClick={() => setCurrentPage((p) => p + 1)}>
+								<ChevronRight className="h-4 w-4" />
 							</Button>
 						</div>
 					</div>
-						</div>
-					)}
 				</CardContent>
 			</Card>
 
+			{/* CREATE / EDIT MODAL */}
 			<Dialog open={openModal} onOpenChange={setOpenModal}>
-				<DialogContent className="w-full !max-w-6xl max-h-[90vh] overflow-y-auto">
+				<DialogContent className="w-[95vw] max-w-none max-h-[90vh] overflow-y-auto">
 					<DialogHeader>
-						<DialogTitle className="text-2xl font-bold">
-							{editing ? "Edit News Article" : "Add New News Article"}
-						</DialogTitle>
+						<DialogTitle>{editing ? "Edit News" : "Add News"}</DialogTitle>
 					</DialogHeader>
 
-					<div className="grid grid-cols-1 lg:grid-cols-3 gap-8 mt-6">
-						<div className="lg:col-span-2 space-y-6">
-							<h3 className="font-bold text-base border-b pb-2 text-primary">
-								Article Information
-							</h3>
-							<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-								<div className="space-y-1 col-span-2">
-									<label className="text-sm font-semibold">Headline</label>
+					<div className="space-y-3">
 						<Input
 							name="headline"
+							placeholder="Headline"
 							value={form.headline}
 							onChange={handleChange}
-										className="text-base"
 						/>
-								</div>
-								<div className="space-y-1">
-									<label className="text-sm font-semibold">Author</label>
 						<Input
 							name="author"
+							placeholder="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">
-								<label className="text-sm font-semibold">Intro Paragraph</label>
-								<Textarea
+
+						<textarea
 							name="firstPara"
+							placeholder="First Paragraph"
 							value={form.firstPara}
 							onChange={handleChange}
-									className="min-h-[100px] text-base"
+							className="border rounded p-2 w-full min-h-[100px]"
 						/>
-							</div>
-							<div className="space-y-1">
-								<label className="text-sm font-semibold">
-									Full Story Content
-								</label>
-								<Textarea
+						<textarea
+							name="secondPara"
+							placeholder="Second Paragraph"
+							value={form.secondPara}
+							onChange={handleChange}
+							className="border rounded p-2 w-full min-h-[100px]"
+						/>
+						<textarea
 							name="content"
+							placeholder="Content"
 							value={form.content}
 							onChange={handleChange}
-									className="min-h-[200px] text-base"
+							className="border rounded p-2 w-full min-h-[150px]"
 						/>
 					</div>
-						</div>
 
-						{/* Image Management Sidebar */}
-						<div className="space-y-6 border-l pl-6">
-							<h3 className="font-bold text-base border-b pb-2 text-primary flex items-center gap-2">
-								<ImageIcon className="w-4 h-4" /> Gallery Management
-							</h3>
-
-							<div className="space-y-4">
-								<label className="text-sm font-semibold">Upload Images</label>
-								<BytescaleUploader
-									value=""
-									folderPath="/news"
-									onChange={(url) => {
-										if (url) {
-											setForm((prev) => ({
-												...prev,
-												imageUrls: [...prev.imageUrls, url],
-											}));
-										}
-									}}
-								/>
-
-								<div className="grid grid-cols-2 gap-2 max-h-[400px] overflow-y-auto pr-2 mt-4">
-									{form.imageUrls.map((url, index) => (
-										<div
-											key={index}
-											className="relative group border rounded-lg overflow-hidden h-24 bg-muted"
-										>
-											<img
-												src={url}
-												alt="upload"
-												className="w-full h-full object-cover"
-											/>
-											<button
-												type="button"
-												onClick={() => removeImageUrl(index)}
-												className="absolute top-1 right-1 bg-destructive text-white rounded-full p-1 opacity-0 group-hover:opacity-100 transition-opacity shadow-sm"
-											>
-												<X className="w-3 h-3" />
-											</button>
-										</div>
-									))}
-								</div>
-								{form.imageUrls.length === 0 && (
-									<p className="text-xs text-muted-foreground text-center py-10 border-2 border-dashed rounded-lg">
-										No images uploaded yet.
-									</p>
-								)}
-							</div>
-						</div>
-					</div>
-
-					<DialogFooter className="mt-10 pt-6 border-t">
-						<Button
-							variant="ghost"
-							onClick={() => setOpenModal(false)}
-							className="text-base"
-						>
+					<DialogFooter>
+						<Button variant="outline" onClick={() => setOpenModal(false)}>
 							Cancel
 						</Button>
-						<Button
-							onClick={handleSubmit}
-							className="px-10 text-base bg-primary text-white"
-						>
-							{editing ? "Save Changes" : "Publish Now"}
+						<Button onClick={handleSubmit}>
+							{editing ? "Update" : "Create"}
 						</Button>
 					</DialogFooter>
 				</DialogContent>
 			</Dialog>
 
+			{/* VIEW MODAL */}
 			<Dialog open={viewOpen} onOpenChange={setViewOpen}>
-				<DialogContent className="w-full !max-w-4xl max-h-[85vh] overflow-y-auto p-6">
+				<DialogContent className="w-[95vw] max-w-none max-h-[90vh] overflow-y-auto p-6">
 					<DialogHeader>
-						<DialogTitle className="text-2xl border-b pb-2 flex items-center gap-2">
-							<Newspaper className="h-6 w-6 text-primary" /> News Preview
-						</DialogTitle>
+						<DialogTitle>News Details</DialogTitle>
 					</DialogHeader>
 
 					{viewData && (
-						<div className="space-y-6 py-4">
-							<div className="space-y-2">
-								<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>
+						<div className="space-y-4 text-sm">
+							<b>Headline:</b>
+							<p>{viewData.Headline}</p>
+
+							<b>Author:</b>
+							<p>{viewData.Author}</p>
+
+							<b>Date:</b>
+							<p>
 								{viewData.Date
-											? new Date(viewData.Date).toLocaleDateString("en-IN", {
-													dateStyle: "long",
-												})
-											: "No Date"}
-									</span>
-								</div>
-							</div>
-
-							<div className="grid grid-cols-3 md:grid-cols-4 gap-2">
-								{viewData.Images?.map((img: any, i: number) => (
-									<img
-										key={i}
-										src={img.image}
-										className="w-full h-24 object-cover rounded-md border"
-										alt="gallery"
-									/>
-								))}
-							</div>
-
-							<div className="space-y-5 leading-relaxed text-base">
-								<div className="bg-muted/30 p-4 rounded-lg border-l-4 border-primary">
-									<p className="whitespace-pre-line">{viewData.FirstPara}</p>
-								</div>
-								<div className="space-y-4 px-1">
-									<p className="whitespace-pre-line">{viewData.SecondPara}</p>
-									<hr />
-									<p className="whitespace-pre-line text-muted-foreground">
-										{viewData.Content}
+									? new Date(viewData.Date).toLocaleDateString()
+									: "-"}
 							</p>
-								</div>
-							</div>
+
+							<b>First Para:</b>
+							<p className="whitespace-pre-line">{viewData.FirstPara}</p>
+
+							<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)}
-							className="w-full md:w-auto"
-						>
-							Close Preview
-						</Button>
+						<Button onClick={() => setViewOpen(false)}>Close</Button>
 					</DialogFooter>
 				</DialogContent>
 			</Dialog>