feat: add bulk excel data import functionality

Reviewed-on: #12

backend/README.md

@@ -0,0 +1,59 @@
+**GG-Node-Backend**
+
+## Tech Stack
+
+Runtime: Node.js (ES Modules)
+Framework: Express.js (v5.x)
+ORM: Prisma (PostgreSQL)
+Storage: Bytescale (Image uploads)
+Auth: JSON Web Tokens (JWT) & Bcrypt
+Email: Postmark
+
+## Project Structure
+
+backend/
+├── prisma/
+│ └── schema.prisma  
+├──── src/
+│ ├── app.js  
+│ ├── controllers/  
+│ ├── middlewares/  
+│ ├── routes/  
+│ ├── prisma/  
+│ └── utils/  
+├── .env  
+└── package.json
+
+## Installation & Setup
+
+**1. Prerequisites**
+Node.js (v18+)
+PostgreSQL Database
+
+**2. Environment Variables**
+DATABASE_URL=""
+PORT=3000
+JWT_SECRET=""
+CORS_ALLOWED_ORIGINS=http://localhost:3001 http://localhost:3003 http://localhost:5174 http://localhost:5173
+BYTESCALE_SECRET_API_KEY=""
+POSTMARK_API_KEY=""
+
+**3. Install Dependencies**
+npm install
+
+**4. Database Initialization**
+
+# Generate Prisma Client
+
+npm run generate
+
+# Run migrations to create database tables
+
+npm run migrate
+
+## Scripts
+
+1. npm start: Runs the server in production mode.
+2. npm run migrate: Syncs your local database with the current Prisma schema.
+3. npm run generate: Regenerates the Prisma Client (run this after schema changes).
+4. npx prisma studio: Opens a visual editor to view and manage your database data.

backend/package-lock.json

@@ -9,6 +9,7 @@
 			"version": "1.0.0",
 			"license": "ISC",
 			"dependencies": {
+				"@bytescale/sdk": "^3.53.0",
 				"@editorjs/editorjs": "^2.31.4",
 				"@editorjs/header": "^2.8.8",
 				"@editorjs/list": "^2.0.9",
@@ -21,6 +22,7 @@
 				"express-session": "^1.19.0",
 				"jsonwebtoken": "^9.0.3",
 				"multer": "^2.1.1",
+				"node-fetch": "^3.3.2",
 				"postmark": "^4.0.7",
 				"prisma": "^6.19.2",
 				"slugify": "^1.6.9"
@@ -29,6 +31,12 @@
 				"nodemon": "^3.1.11"
 			}
 		},
+		"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.0.5",
 			"resolved": "https://registry.npmjs.org/@codexteam/icons/-/icons-0.0.5.tgz",
@@ -600,6 +608,15 @@
 				"url": "https://opencollective.com/express"
 			}
 		},
+		"node_modules/data-uri-to-buffer": {
+			"version": "4.0.1",
+			"resolved": "https://registry.npmjs.org/data-uri-to-buffer/-/data-uri-to-buffer-4.0.1.tgz",
+			"integrity": "sha512-0R9ikRb668HB7QDxT1vkpuUBtqc53YyAwMwGeUFKRojY/NWKvdZ+9UYtRfGmhqNbRkTSVpMbmyhXipFFv2cb/A==",
+			"license": "MIT",
+			"engines": {
+				"node": ">= 12"
+			}
+		},
 		"node_modules/debug": {
 			"version": "4.4.3",
 			"resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
@@ -900,6 +917,29 @@
 				"node": ">=8.0.0"
 			}
 		},
+		"node_modules/fetch-blob": {
+			"version": "3.2.0",
+			"resolved": "https://registry.npmjs.org/fetch-blob/-/fetch-blob-3.2.0.tgz",
+			"integrity": "sha512-7yAQpD2UMJzLi1Dqv7qFYnPbaPx7ZfFK6PiIxQ4PfkGPyNyl2Ugx+a/umUonmKqjhM4DnfbMvdX6otXq83soQQ==",
+			"funding": [
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/jimmywarting"
+				},
+				{
+					"type": "paypal",
+					"url": "https://paypal.me/jimmywarting"
+				}
+			],
+			"license": "MIT",
+			"dependencies": {
+				"node-domexception": "^1.0.0",
+				"web-streams-polyfill": "^3.0.3"
+			},
+			"engines": {
+				"node": "^12.20 || >= 14.13"
+			}
+		},
 		"node_modules/fill-range": {
 			"version": "7.1.1",
 			"resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
@@ -991,6 +1031,18 @@
 				"node": ">= 0.6"
 			}
 		},
+		"node_modules/formdata-polyfill": {
+			"version": "4.0.10",
+			"resolved": "https://registry.npmjs.org/formdata-polyfill/-/formdata-polyfill-4.0.10.tgz",
+			"integrity": "sha512-buewHzMvYL29jdeQTVILecSaZKnt/RJWjoZCF5OW60Z67/GmSLBkOFM7qh1PI3zFNtJbaZL5eQu1vLfazOwj4g==",
+			"license": "MIT",
+			"dependencies": {
+				"fetch-blob": "^3.1.2"
+			},
+			"engines": {
+				"node": ">=12.20.0"
+			}
+		},
 		"node_modules/forwarded": {
 			"version": "0.2.0",
 			"resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
@@ -1522,6 +1574,44 @@
 				"node": "^18 || ^20 || >= 21"
 			}
 		},
+		"node_modules/node-domexception": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/node-domexception/-/node-domexception-1.0.0.tgz",
+			"integrity": "sha512-/jKZoMpw0F8GRwl4/eLROPA3cfcXtLApP0QzLmUT/HuPCZWyB7IY9ZrMeKw2O/nFIqPQB3PVM9aYm0F312AXDQ==",
+			"deprecated": "Use your platform's native DOMException instead",
+			"funding": [
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/jimmywarting"
+				},
+				{
+					"type": "github",
+					"url": "https://paypal.me/jimmywarting"
+				}
+			],
+			"license": "MIT",
+			"engines": {
+				"node": ">=10.5.0"
+			}
+		},
+		"node_modules/node-fetch": {
+			"version": "3.3.2",
+			"resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-3.3.2.tgz",
+			"integrity": "sha512-dRB78srN/l6gqWulah9SrxeYnxeddIG30+GOqK/9OlLVyLg3HPnr6SqOWTWOXKRwC2eGYCkZ59NNuSgvSrpgOA==",
+			"license": "MIT",
+			"dependencies": {
+				"data-uri-to-buffer": "^4.0.0",
+				"fetch-blob": "^3.1.4",
+				"formdata-polyfill": "^4.0.10"
+			},
+			"engines": {
+				"node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/node-fetch"
+			}
+		},
 		"node_modules/node-fetch-native": {
 			"version": "1.6.7",
 			"resolved": "https://registry.npmjs.org/node-fetch-native/-/node-fetch-native-1.6.7.tgz",
@@ -2216,6 +2306,15 @@
 				"node": ">= 0.8"
 			}
 		},
+		"node_modules/web-streams-polyfill": {
+			"version": "3.3.3",
+			"resolved": "https://registry.npmjs.org/web-streams-polyfill/-/web-streams-polyfill-3.3.3.tgz",
+			"integrity": "sha512-d2JWLCivmZYTSIoge9MsgFCZrt571BikcWGYkjC1khllbTeDlGqZ2D8vD8E/lJa8WGWbb7Plm8/XJYV7IJHZZw==",
+			"license": "MIT",
+			"engines": {
+				"node": ">= 8"
+			}
+		},
 		"node_modules/wrappy": {
 			"version": "1.0.2",
 			"resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",

backend/package.json

@@ -15,6 +15,7 @@
 	"license": "ISC",
 	"type": "module",
 	"dependencies": {
+		"@bytescale/sdk": "^3.53.0",
 		"@editorjs/editorjs": "^2.31.4",
 		"@editorjs/header": "^2.8.8",
 		"@editorjs/list": "^2.0.9",
@@ -27,6 +28,7 @@
 		"express-session": "^1.19.0",
 		"jsonwebtoken": "^9.0.3",
 		"multer": "^2.1.1",
+		"node-fetch": "^3.3.2",
 		"postmark": "^4.0.7",
 		"prisma": "^6.19.2",
 		"slugify": "^1.6.9"

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

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

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

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

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

@@ -0,0 +1,12 @@
+-- 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,6 +21,7 @@ model Doctor {
   id            Int     @id @default(autoincrement())
   doctorId      String  @unique
   name          String
+  image         String?
   designation   String?
   workingStatus String?
   qualification String?
@@ -36,6 +37,8 @@ model Department {
   id           Int    @id @default(autoincrement())
   departmentId String @unique
   name         String
+  image        String?
+
 
   para1      String?
   para2      String?
@@ -196,9 +199,18 @@ model NewsMedia {
   secondPara String?
   author     String?
   date       DateTime?
+  images     NewsImage[] 
 
-  isActive Boolean @default(true)
+  isActive   Boolean  @default(true)
-
+  createdAt  DateTime    @default(now())
-  createdAt DateTime @default(now())
+  updatedAt  DateTime    @updatedAt
-  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/app.js

@@ -14,11 +14,15 @@ import inquiryRoutes from "./routes/inquiry.routes.js";
 import academicsResearchRoutes from "./routes/academicsResearch.routes.js";
 import emailConfigRoutes from "./routes/emailConfig.routes.js";
 import newsMediaRoutes from "./routes/newsMedia.routes.js";
+import importRoutes from "./routes/importRoutes.js";
 
 dotenv.config();
 
 const app = express();
 
+app.use(express.json({ limit: "50mb" }));
+app.use(express.urlencoded({ limit: "50mb", extended: true }));
+
 const allowedOrigins = process.env.CORS_ALLOWED_ORIGINS
 	? process.env.CORS_ALLOWED_ORIGINS.split(" ")
 	: ["http://localhost:3001"];
@@ -35,7 +39,6 @@ const corsOptions = {
 	allowedHeaders: "*",
 };
 
-app.use(express.json());
 app.use(cors(corsOptions));
 
 app.use("/api/departments", departmentRoutes);
@@ -51,6 +54,7 @@ app.use("/api/inquiry", inquiryRoutes);
 app.use("/api/academics", academicsResearchRoutes);
 app.use("/api/email", emailConfigRoutes);
 app.use("/api/newsMedia", newsMediaRoutes);
+app.use("/api/import", importRoutes);
 
 const PORT = process.env.PORT || 3000;
 app.listen(PORT, () => {

backend/src/controllers/department.controller.js

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

backend/src/controllers/doctor.controller.js

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

backend/src/controllers/importController.js

@@ -0,0 +1,267 @@
+import { PrismaClient } from "@prisma/client";
+
+const prisma = new PrismaClient();
+
+export const bulkImportExcelData = async (req, res) => {
+	try {
+		const {
+			departments,
+			doctors,
+			timings,
+			careers,
+			inquiries,
+			academics,
+			appointments,
+			candidates,
+			news,
+		} = req.body;
+
+		console.log("🚀 Starting Robust Data Import...");
+
+		// 1. DEPARTMENTS
+		if (departments) {
+			for (const row of departments) {
+				if (!row.SL_NO) continue;
+				await prisma.department.upsert({
+					where: { departmentId: row.SL_NO.toString() },
+					update: {
+						name: row.Department?.toString(),
+						para1: row.para1?.toString() || null,
+						para2: row.para2?.toString() || null,
+						para3: row.para3?.toString() || null,
+						facilities: row.facilities?.toString() || null,
+						services: row.services?.toString() || null,
+					},
+					create: {
+						departmentId: row.SL_NO.toString(),
+						name: row.Department?.toString(),
+						para1: row.para1?.toString() || null,
+						para2: row.para2?.toString() || null,
+						para3: row.para3?.toString() || null,
+						facilities: row.facilities?.toString() || null,
+						services: row.services?.toString() || null,
+					},
+				});
+			}
+		}
+
+		// 2. DOCTORS
+		if (doctors) {
+			for (const row of doctors) {
+				if (!row.GG_ID) continue;
+				const doctor = await prisma.doctor.upsert({
+					where: { doctorId: row.GG_ID.toString() },
+					update: {
+						name: row.Name?.toString(),
+						designation: row.Designation?.toString() || null,
+						workingStatus: row["Working Status"]?.toString() || null,
+						qualification: row.Qualification?.toString() || null,
+					},
+					create: {
+						doctorId: row.GG_ID.toString(),
+						name: row.Name?.toString(),
+						designation: row.Designation?.toString() || null,
+						workingStatus: row["Working Status"]?.toString() || null,
+						qualification: row.Qualification?.toString() || null,
+					},
+				});
+
+				if (row.Department_ID) {
+					const dept = await prisma.department.findUnique({
+						where: { departmentId: row.Department_ID.toString() },
+					});
+					if (dept) {
+						await prisma.doctorDepartment.upsert({
+							where: {
+								doctorId_departmentId: {
+									doctorId: doctor.id,
+									departmentId: dept.id,
+								},
+							},
+							update: {},
+							create: {
+								doctorId: doctor.id,
+								departmentId: dept.id,
+							},
+						});
+					}
+				}
+			}
+		}
+
+		// 3. TIMINGS
+		if (timings) {
+			for (const row of timings) {
+				if (!row.GG_ID) continue;
+				const doctor = await prisma.doctor.findUnique({
+					where: { doctorId: row.GG_ID.toString() },
+					include: { departments: true },
+				});
+
+				if (doctor && doctor.departments.length > 0) {
+					const doctorDeptId = doctor.departments[0].id;
+					const rawAdd = row.Additional?.toString() || "";
+					const rawMon = row.Monday?.toString() || "";
+					const isAppt = (val) => /appointment|basis|on call/i.test(val);
+
+					let finalAdd = rawAdd;
+					if (!finalAdd && isAppt(rawMon)) finalAdd = rawMon;
+
+					await prisma.doctorTiming.upsert({
+						where: { doctorDepartmentId: doctorDeptId },
+						update: {
+							monday: isAppt(rawMon) ? null : row.Monday?.toString() || null,
+							tuesday: row.Tuesday?.toString() || null,
+							wednesday: row.Wednesday?.toString() || null,
+							thursday: row.Thursday?.toString() || null,
+							friday: row.Friday?.toString() || null,
+							saturday: row.Saturday?.toString() || null,
+							sunday: row.Sunday?.toString() || null,
+							additional: finalAdd || null,
+						},
+						create: {
+							doctorDepartmentId: doctorDeptId,
+							monday: isAppt(rawMon) ? null : row.Monday?.toString() || null,
+							tuesday: row.Tuesday?.toString() || null,
+							wednesday: row.Wednesday || null,
+							thursday: row.Thursday || null,
+							friday: row.Friday || null,
+							saturday: row.Saturday || null,
+							sunday: row.Sunday || null,
+							additional: finalAdd || null,
+						},
+					});
+				}
+			}
+		}
+
+		// 4. CAREERS
+		if (careers) {
+			for (const row of careers) {
+				if (!row.Post) continue;
+				const cId = row.Id ? parseInt(row.Id) : undefined;
+				const data = {
+					post: row.Post?.toString(),
+					designation: row.Designation?.toString() || null,
+					qualification: row.Qualification?.toString() || null,
+					experienceNeed: row.ExperienceNeed?.toString() || null,
+					email: row.HiringEmail?.toString() || null,
+					number: row.Number?.toString() || null,
+					status: row.Status?.toString() || "new",
+				};
+				if (cId) {
+					await prisma.career.upsert({
+						where: { id: cId },
+						update: data,
+						create: { ...data, id: cId },
+					});
+				} else {
+					await prisma.career.create({ data });
+				}
+			}
+		}
+
+		// 5. INQUIRIES
+		if (inquiries) {
+			for (const row of inquiries) {
+				if (!row.FullName) continue;
+				await prisma.inquiry.create({
+					data: {
+						fullName: row.FullName.toString(),
+						number: row.Number?.toString() || "",
+						emailId: row.EmailId?.toString() || null,
+						subject: row.Subject?.toString() || null,
+						message: row.Message?.toString() || null,
+						createdAt: row.Date ? new Date(row.Date) : new Date(),
+					},
+				});
+			}
+		}
+
+		// 6. ACADEMICS & RESEARCH (FIXED HERE)
+		if (academics) {
+			for (const row of academics) {
+				if (!row.FullName) continue;
+				await prisma.academicsResearch.create({
+					data: {
+						fullName: row.FullName.toString(),
+						number: row.Number?.toString() || "",
+						emailId: row.EmailId?.toString() || null,
+						subject: row.Subject?.toString() || null, // Force String
+						courseName: row["Course Name"]?.toString() || null,
+						message: row.Message?.toString() || null,
+						createdAt: row.Date ? new Date(row.Date) : new Date(),
+					},
+				});
+			}
+		}
+
+		// 7. APPOINTMENTS
+		if (appointments) {
+			for (const row of appointments) {
+				if (!row.FullName) continue;
+				const docId = row.Doctor?.toString();
+				const deptId = row["Department Id"]?.toString();
+				if (docId && deptId) {
+					await prisma.appointment
+						.create({
+							data: {
+								name: row.FullName.toString(),
+								mobileNumber: row.Number?.toString() || "",
+								email: row["Email Id"]?.toString() || null,
+								message: row.Message?.toString() || null,
+								date: row.Date ? new Date(row.Date) : new Date(),
+								doctorId: docId,
+								departmentId: deptId,
+							},
+						})
+						.catch(() => {});
+				}
+			}
+		}
+
+		// 8. CANDIDATES
+		if (candidates) {
+			for (const row of candidates) {
+				if (!row.FullName || !row.CareerId) continue;
+				await prisma.candidate
+					.create({
+						data: {
+							fullName: row.FullName.toString(),
+							mobile: row.Number?.toString() || "",
+							email: row.EmailId?.toString() || "",
+							subject: row.Subject?.toString() || "",
+							coverLetter: row["Cover Letter"]?.toString() || "",
+							careerId: parseInt(row.CareerId),
+							createdAt: row.Date ? new Date(row.Date) : new Date(),
+						},
+					})
+					.catch(() => {});
+			}
+		}
+
+		// 9. NEWS & MEDIA
+		if (news) {
+			for (const row of news) {
+				if (!row.Headline) continue;
+				await prisma.newsMedia.create({
+					data: {
+						headline: row.Headline.toString(),
+						content: row.Content?.toString() || null,
+						firstPara: row.FirstPara?.toString() || null,
+						secondPara: row.SecondPara?.toString() || null,
+						author: row.Author?.toString() || null,
+						date: row.Date ? new Date(row.Date) : null,
+					},
+				});
+			}
+		}
+
+		res
+			.status(200)
+			.json({ success: true, message: "✅ Import completed successfully!" });
+	} catch (error) {
+		console.error("❌ Bulk Import Error:", error);
+		res.status(500).json({ success: false, error: error.message });
+	}
+};

backend/src/controllers/inquiry.controller.js

@@ -1,5 +1,8 @@
 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 {
@@ -21,6 +24,28 @@ 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,8 +7,13 @@ 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" },
 			});
 
@@ -20,6 +25,10 @@ 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({
@@ -36,6 +45,7 @@ export const getAllNews = async (req, res) => {
 
 		const [news, total] = await Promise.all([
 			prisma.newsMedia.findMany({
+				include: includeImages,
 				orderBy: { createdAt: "desc" },
 				skip,
 				take: currentLimit,
@@ -51,6 +61,10 @@ 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({
@@ -80,6 +94,7 @@ export const getNewsById = async (req, res) => {
 
 		const n = await prisma.newsMedia.findUnique({
 			where: { id: Number(id) },
+			include: { images: true },
 		});
 
 		if (!n) {
@@ -97,6 +112,10 @@ 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({
@@ -116,7 +135,15 @@ export const getNewsById = async (req, res) => {
 
 export const createNews = async (req, res) => {
 	try {
-		const { headline, content, firstPara, secondPara, date, author } = req.body;
+		const {
+			headline,
+			content,
+			firstPara,
+			secondPara,
+			date,
+			author,
+			imageUrls,
+		} = req.body;
 
 		if (!headline) {
 			return res.status(400).json({
@@ -133,7 +160,13 @@ 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({
@@ -155,13 +188,21 @@ 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: {
-				...req.body,
+				...otherData,
 				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/importRoutes.js

@@ -0,0 +1,9 @@
+import express from "express";
+import { bulkImportExcelData } from "../controllers/importController.js";
+import jwtAuthMiddleware from "../middleware/auth.js";
+
+const router = express.Router();
+
+router.post("/bulk", jwtAuthMiddleware, bulkImportExcelData);
+
+export default router;

backend/src/routes/upload.routes.js

@@ -1,15 +1,35 @@
 import express from "express";
-import {upload} from "../controllers/upload.controller.js";
+import * as Bytescale from "@bytescale/sdk";
+import multer from "multer";
 
 const router = express.Router();
 
-router.post("/image", upload.single("image"), (req, res) => {
+const uploadManager = new Bytescale.UploadManager({
-	res.json({
+	apiKey: process.env.BYTESCALE_SECRET_API_KEY,
-		success: 1,
+});
-		file: {
+
-			url: `http://localhost:3000/uploads/blog/${req.file.filename}`,
+const storage = multer.memoryStorage();
-		},
+const upload = multer({storage});
-	});
+
+router.post("/", upload.single("file"), async (req, res) => {
+	try {
+		const file = req.file;
+		const {folderPath} = req.body;
+
+		const result = await uploadManager.upload({
+			data: file.buffer,
+			name: file.originalname,
+			mime: file.mimetype,
+			path: {
+				folderPath: folderPath || "/general",
+			},
+		});
+
+		res.json({fileUrl: result.fileUrl});
+	} catch (error) {
+		console.error(error);
+		res.status(500).json({error: "Upload failed"});
+	}
 });
 
 export default router;

frontend/.gitignore

@@ -22,3 +22,8 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+#env files
+.env
+.env.*.local
+

frontend/README.md

@@ -1,73 +1,47 @@
-# React + TypeScript + Vite
+**GG-Dashboard**
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+## Tech Stack
 
-Currently, two official plugins are available:
+Framework: React 19
+Build Tool: Vite + TypeScript
+Styling: Tailwind CSS 4 + shadcn/ui
+Rich Text: Editor.js
+State/Fetch: Axios + React Hooks
+Export: XLSX + File-saver
 
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh
+## Project Structure
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
 
-## React Compiler
+frontend/
+├── src/
+│ ├── api/  
+│ ├── assets/  
+│ ├── components/  
+│ ├── context/  
+│ ├── lib/  
+│ ├── layout/  
+│ ├── pages/  
+│ ├── services/  
+│ ├── utils/  
+│ └── App.tsx  
+├── .env  
+├── index.html
+└── package.json
 
-The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
+## Installation & Setup
 
-## Expanding the ESLint configuration
+**1. Prerequisites**
+Node.js (v20+)
 
-If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
+**2. Environment Variables**
+VITE_API_URL="http://localhost:3000/api"
 
-```js
+**3. Install Dependencies**
-export default defineConfig([
+npm install
-  globalIgnores(['dist']),
-  {
-    files: ['**/*.{ts,tsx}'],
-    extends: [
-      // Other configs...
 
-      // Remove tseslint.configs.recommended and replace with this
+**4. Development**
-      tseslint.configs.recommendedTypeChecked,
+npm run dev
-      // Alternatively, use this for stricter rules
-      tseslint.configs.strictTypeChecked,
-      // Optionally, add this for stylistic rules
-      tseslint.configs.stylisticTypeChecked,
 
-      // Other configs...
+## Scripts
-    ],
-    languageOptions: {
-      parserOptions: {
-        project: ['./tsconfig.node.json', './tsconfig.app.json'],
-        tsconfigRootDir: import.meta.dirname,
-      },
-      // other options...
-    },
-  },
-])
-```
 
-You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
+npm run dev: Starts the Vite development server with Hot Module Replacement.
-
+npm run build: Compiles TypeScript and builds the production-ready assets.
-```js
-// eslint.config.js
-import reactX from 'eslint-plugin-react-x'
-import reactDom from 'eslint-plugin-react-dom'
-
-export default defineConfig([
-  globalIgnores(['dist']),
-  {
-    files: ['**/*.{ts,tsx}'],
-    extends: [
-      // Other configs...
-      // Enable lint rules for React
-      reactX.configs['recommended-typescript'],
-      // Enable lint rules for React DOM
-      reactDom.configs.recommended,
-    ],
-    languageOptions: {
-      parserOptions: {
-        project: ['./tsconfig.node.json', './tsconfig.app.json'],
-        tsconfigRootDir: import.meta.dirname,
-      },
-      // other options...
-    },
-  },
-])
-```

frontend/package-lock.json

@@ -8,6 +8,7 @@
       "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",
@@ -524,6 +525,12 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@bytescale/sdk": {
+      "version": "3.53.0",
+      "resolved": "https://registry.npmjs.org/@bytescale/sdk/-/sdk-3.53.0.tgz",
+      "integrity": "sha512-qCeNup3pSjaklXuBrO9JeKbozZEs/PjQEvuqCiOAWLBRl6lDjd0V9gRVYqyttPimXYFoV+J/7dmPWtK6RfOABQ==",
+      "license": "MIT"
+    },
     "node_modules/@codexteam/icons": {
       "version": "0.3.3",
       "resolved": "https://registry.npmjs.org/@codexteam/icons/-/icons-0.3.3.tgz",

frontend/package.json

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

frontend/src/App.tsx

@@ -21,6 +21,7 @@ import InquiryPage from "./pages/inquiry";
 import AcademicsPage from "./pages/Academics";
 import NewsPage from "./pages/newsMedia";
 import BlogDetail from "./pages/BlogDetails";
+import ImportData from "./pages/ImportData";
 
 export default function App() {
 	return (
@@ -46,6 +47,7 @@ export default function App() {
 							<Route path="/inquiry" element={<InquiryPage />} />
 							<Route path="/academics" element={<AcademicsPage />} />
 							<Route path="/news" element={<NewsPage />} />
+							<Route path="/import" element={<ImportData />} />
 						</Route>
 					</Route>
 

frontend/src/api/client.ts

@@ -1,10 +1,10 @@
 import axios from "axios";
 import type {InternalAxiosRequestConfig} from "axios";
 
-const BASE_URL: string = "http://localhost:3000/api";
+const baseURL: string = import.meta.env.VITE_API_URL;
 
 const apiClient = axios.create({
-	baseURL: BASE_URL,
+	baseURL: baseURL,
 	headers: {
 		"Content-Type": "application/json",
 	},

frontend/src/api/department.ts

@@ -3,6 +3,7 @@ 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,6 +3,7 @@ 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

@@ -0,0 +1,122 @@
+import {useState, useRef} from "react";
+import {Button} from "@/components/ui/button";
+import {User, X, Loader2} from "lucide-react";
+import axios from "axios";
+
+interface BytescaleUploaderProps {
+	value: string;
+	onChange: (url: string) => void;
+	folderPath: "/doctors" | "/departments" | "/news" | "/blog";
+}
+
+export function BytescaleUploader({
+	value,
+	onChange,
+	folderPath,
+}: BytescaleUploaderProps) {
+	const baseURL = import.meta.env.VITE_API_URL;
+	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;
+
+		if (file.size > 5 * 1024 * 1024) {
+			alert("File is too large (Max 5MB)");
+			return;
+		}
+
+		setIsUploading(true);
+
+		const formData = new FormData();
+		formData.append("file", file);
+		formData.append("folderPath", folderPath);
+
+		try {
+			const response = await axios.post(`${baseURL}/upload`, formData, {
+				headers: {
+					"Content-Type": "multipart/form-data",
+				},
+			});
+
+			const {fileUrl} = response.data;
+			onChange(fileUrl);
+		} catch (e: any) {
+			console.error("Upload Error:", e);
+			const errorMessage =
+				e.response?.data?.error || e.message || "Upload failed";
+			alert(`Upload Error: ${errorMessage}`);
+		} 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="Preview"
+							/>
+							<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.
+				</p>
+			)}
+		</div>
+	);
+}

frontend/src/pages/BlogDetails.tsx

@@ -1,72 +1,202 @@
 import React, {useEffect, useState} from "react";
 import {useParams, useNavigate} from "react-router-dom";
-import axios from "axios";
 
 import {Button} from "@/components/ui/button";
-import {Card, CardContent} from "@/components/ui/card";
 import {getBlogByIdApi} from "@/api/blog";
 
+/* ---------------- LIST RENDERER ---------------- */
+const renderList = (items, style) => {
+	// ✅ Checklist
+	if (style === "checklist") {
+		return (
+			<div className="mb-4 space-y-2">
+				{items.map((item, i) => (
+					<div key={i} className="flex items-center gap-2">
+						<input
+							type="checkbox"
+							checked={item.meta?.checked || false}
+							readOnly
+						/>
+						<span
+							className={item.meta?.checked ? "line-through opacity-60" : ""}
+							dangerouslySetInnerHTML={{
+								__html: item.content || "",
+							}}
+						/>
+					</div>
+				))}
+			</div>
+		);
+	}
+
+	// ✅ Ordered / Unordered
+	const ListTag = style === "ordered" ? "ol" : "ul";
+
+	return (
+		<ListTag
+			className={`pl-6 mb-4 ${
+				style === "ordered" ? "list-decimal" : "list-disc"
+			}`}
+		>
+			{items
+				.filter((item) => item.content)
+				.map((item, i) => (
+					<li key={i}>
+						<span
+							dangerouslySetInnerHTML={{
+								__html: item.content,
+							}}
+						/>
+						{item.items?.length > 0 && renderList(item.items, style)}
+					</li>
+				))}
+		</ListTag>
+	);
+};
+
+/* ---------------- BLOCK RENDERER ---------------- */
+const renderBlock = (block, index) => {
+	switch (block.type) {
+		case "paragraph":
+			return (
+				<p
+					key={index}
+					className="mb-4 leading-7 text-gray-800"
+					dangerouslySetInnerHTML={{__html: block.data.text}}
+				/>
+			);
+
+		case "header":
+			return (
+				<h2
+					key={index}
+					className="text-2xl font-semibold mb-4"
+					dangerouslySetInnerHTML={{__html: block.data.text}}
+				/>
+			);
+
+		case "image":
+			return (
+				<img
+					key={index}
+					src={block.data.file?.url}
+					alt={block.data.caption || "blog-image"}
+					className="w-full rounded-lg mb-4"
+				/>
+			);
+
+		case "list":
+			return (
+				<div key={index}>{renderList(block.data.items, block.data.style)}</div>
+			);
+
+		case "quote":
+			return (
+				<blockquote
+					key={index}
+					className="border-l-4 border-gray-300 pl-4 italic my-4 text-gray-600"
+				>
+					{block.data.text}
+				</blockquote>
+			);
+
+		case "code":
+			return (
+				<pre
+					key={index}
+					className="bg-gray-100 p-4 rounded-md overflow-x-auto text-sm mb-4"
+				>
+					<code>{block.data.code}</code>
+				</pre>
+			);
+
+		case "table":
+			return (
+				<div key={index} className="overflow-x-auto mb-6">
+					<table className="w-full border border-gray-200">
+						<tbody>
+							{block.data.content.map((row, i) => (
+								<tr key={i}>
+									{row.map((cell, j) => (
+										<td
+											key={j}
+											className="border px-3 py-2"
+											dangerouslySetInnerHTML={{
+												__html: cell,
+											}}
+										/>
+									))}
+								</tr>
+							))}
+						</tbody>
+					</table>
+				</div>
+			);
+
+		case "delimiter":
+			return <hr key={index} className="my-6 border-gray-300" />;
+
+		default:
+			return null;
+	}
+};
+
+/* ---------------- MAIN COMPONENT ---------------- */
 const BlogDetail = () => {
 	const {id} = useParams();
 	const navigate = useNavigate();
-	const [blog, setBlog] = useState<any>(null);
+	const [blog, setBlog] = useState(null);
 
-	const fetchBlogById = async () => {
+	const fetchBlog = async () => {
 		try {
-			const response = await getBlogByIdApi(Number(id));
+			const res = await getBlogByIdApi(Number(id));
-
+			console.log({res});
-			setBlog(response);
+			setBlog(res);
-		} catch (error) {
+		} catch (err) {
-			console.error("Error fetching blog", error);
+			console.error("Error fetching blog", err);
 		}
 	};
 
 	useEffect(() => {
-		fetchBlogById();
+		fetchBlog();
-	}, [id]); // ✅ FIXED dependency
+	}, [id]);
 
 	if (!blog) {
-		return <div className="mt-40 text-center text-gray-500">Loading...</div>;
+		return <p className="mt-40 text-center">Loading...</p>;
 	}
 
 	return (
-		<div className=" mx-auto flex flex-col ">
+		<div className="mx-auto flex flex-col ">
-			<Card>
+			{/* Back Button */}
-				<CardContent className="p-6 space-y-4">
+			<Button
-					{/* Back */}
+				variant="ghost"
-					<Button
+				className="mb-4 w-fit text-black px-0"
-						variant="ghost"
+				onClick={() => navigate(-1)}
-						className="text-black-600 p-0"
+			>
-						onClick={() => navigate(-1)}
+				← Back
-					>
+			</Button>
-						← Back
-					</Button>
 
-					{/* Title */}
+			{/* Title */}
-					<h1 className="text-2xl md:text-4xl lg:text-5xl font-bold">
+			<h1 className="text-3xl md:text-5xl font-bold mb-2">{blog.title}</h1>
-						{blog.title}
-					</h1>
 
-					{/* Meta */}
+			{/* Meta */}
-					<p className="text-gray-500 text-sm">
+			<p className="text-gray-500 mb-4">
-						{blog.writer} • {new Date(blog.createdAt).toLocaleDateString()}
+				{blog.writer} • {new Date(blog.createdAt).toLocaleDateString()}
-					</p>
+			</p>
 
-					{/* Image */}
+			{/* Image (only if exists) */}
-					<img
+			{blog.image?.trim() && (
-						src={blog.image}
+				<img
-						alt={blog.title}
+					src={blog.image}
-						className="w-full h-[220px] md:h-[400px] object-cover rounded-md"
+					alt="blog"
-					/>
+					className="w-full h-[220px] md:h-[400px] object-cover rounded-lg mb-6"
+				/>
+			)}
 
-					{/* Content */}
+			{/* Content */}
-					<div className="space-y-3 text-gray-800 leading-relaxed">
+			<div>
-						{blog.content?.blocks?.map((block: any, index: number) => (
+				{blog.content?.blocks?.map((block, index) => renderBlock(block, index))}
-							<p key={index}>{block.data?.text}</p>
+			</div>
-						))}
-					</div>
-				</CardContent>
-			</Card>
 		</div>
 	);
 };

frontend/src/pages/BlogEditor.tsx

@@ -1,6 +1,6 @@
 import {useEffect, useRef, useState} from "react";
 import {useNavigate, useParams} from "react-router-dom";
-
+import {BytescaleUploader} from "@/components/BytescaleUploader/BytescaleUploader";
 import EditorJS, {OutputData} from "@editorjs/editorjs";
 import Header from "@editorjs/header";
 import List from "@editorjs/list";
@@ -117,18 +117,6 @@ export default function BlogEditorPage() {
 		initEditor();
 	}, [id, isEdit]);
 
-	const handleCoverUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
-		const file = e.target.files?.[0];
-		if (!file) return;
-
-		try {
-			const res = await uploadImageApi(file);
-			setCoverImage(res.file.url);
-		} catch (err) {
-			console.error(err);
-		}
-	};
-
 	const handleSave = async () => {
 		if (!editorRef.current) return;
 
@@ -182,7 +170,11 @@ export default function BlogEditorPage() {
 					<div className="space-y-2">
 						<label className="text-sm font-medium">Cover Image</label>
 
-						<Input type="file" onChange={handleCoverUpload} />
+						<BytescaleUploader
+							value={coverImage}
+							folderPath="/blog"
+							onChange={(url) => setCoverImage(url)}
+						/>
 
 						{coverImage && (
 							<img

frontend/src/pages/Department.tsx

@@ -1,5 +1,6 @@
-import { useState, useEffect, useCallback } from "react";
+import {useState, useEffect, useCallback} from "react";
-import { AxiosError } from "axios";
+import {AxiosError} from "axios";
+import {BytescaleUploader} from "@/components/BytescaleUploader/BytescaleUploader";
 
 import {
 	getDepartmentsApi,
@@ -17,8 +18,8 @@ import {
 	TableRow,
 } from "@/components/ui/table";
 
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import {Card, CardContent, CardHeader, CardTitle} from "@/components/ui/card";
-import { Button } from "@/components/ui/button";
+import {Button} from "@/components/ui/button";
 
 import {
 	Dialog,
@@ -28,8 +29,8 @@ import {
 	DialogFooter,
 } from "@/components/ui/dialog";
 
-import { Input } from "@/components/ui/input";
+import {Input} from "@/components/ui/input";
-import { Textarea } from "@/components/ui/textarea";
+import {Textarea} from "@/components/ui/textarea";
 
 import {
 	Loader2,
@@ -45,6 +46,7 @@ import {
 interface Department {
 	departmentId: string;
 	name: string;
+	image?: string;
 	para1: string;
 	para2: string;
 	para3: string;
@@ -71,6 +73,7 @@ export default function DepartmentPage() {
 	const [form, setForm] = useState<Department>({
 		departmentId: "",
 		name: "",
+		image: "",
 		para1: "",
 		para2: "",
 		para3: "",
@@ -119,7 +122,7 @@ export default function DepartmentPage() {
 	);
 
 	function handleChange(e: any) {
-		setForm({ ...form, [e.target.name]: e.target.value });
+		setForm({...form, [e.target.name]: e.target.value});
 	}
 
 	function truncate(text: string, limit = 60) {
@@ -132,6 +135,7 @@ export default function DepartmentPage() {
 		setForm({
 			departmentId: "",
 			name: "",
+			image: "",
 			para1: "",
 			para2: "",
 			para3: "",
@@ -155,7 +159,7 @@ export default function DepartmentPage() {
 	async function handleSubmit() {
 		try {
 			if (editing) {
-				const { departmentId, ...updateData } = form;
+				const {departmentId, ...updateData} = form;
 				await updateDepartmentApi(editing.departmentId, updateData);
 			} else {
 				await createDepartmentApi(form);
@@ -393,6 +397,14 @@ 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}
@@ -445,7 +457,7 @@ export default function DepartmentPage() {
 							Cancel
 						</Button>
 						<Button onClick={handleSubmit}>
-							{editing ? "Update" : "Create"}
+							{editing ? "Save Changes" : "Create"}
 						</Button>
 					</DialogFooter>
 				</DialogContent>

frontend/src/pages/Doctor.tsx

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

frontend/src/pages/ImportData.tsx

@@ -0,0 +1,158 @@
+import React, { useState, ChangeEvent } from "react";
+import * as XLSX from "xlsx";
+import apiClient from "@/api/client";
+
+interface ImportPayload {
+	departments: any[];
+	doctors: any[];
+	timings: any[];
+	careers: any[];
+	inquiries: any[];
+	academics: any[];
+	appointments: any[];
+	candidates: any[];
+	news: any[];
+}
+
+const ImportData: React.FC = () => {
+	const [loading, setLoading] = useState<boolean>(false);
+	const [status, setStatus] = useState<string>("");
+
+	const handleFileUpload = (e: ChangeEvent<HTMLInputElement>) => {
+		const file = e.target.files?.[0];
+		if (!file) return;
+
+		setLoading(true);
+		setStatus("Reading Excel file...");
+
+		const reader = new FileReader();
+		reader.onload = async (evt: ProgressEvent<FileReader>) => {
+			try {
+				const bstr = evt.target?.result;
+				if (!bstr) throw new Error("Failed to read file content.");
+
+				const wb = XLSX.read(bstr, { type: "binary" });
+
+				const payload: ImportPayload = {
+					departments: XLSX.utils.sheet_to_json(wb.Sheets["Departments"]) || [],
+					doctors: XLSX.utils.sheet_to_json(wb.Sheets["Doctors"]) || [],
+					timings: XLSX.utils.sheet_to_json(wb.Sheets["Doctor Timings"]) || [],
+					careers: XLSX.utils.sheet_to_json(wb.Sheets["Careers"]) || [],
+					inquiries: XLSX.utils.sheet_to_json(wb.Sheets["Inquiry"]) || [],
+					academics:
+						XLSX.utils.sheet_to_json(wb.Sheets["Academics & Research"]) || [],
+					appointments:
+						XLSX.utils.sheet_to_json(wb.Sheets["Appointment"]) || [],
+					candidates: XLSX.utils.sheet_to_json(wb.Sheets["Candidate"]) || [],
+					news: XLSX.utils.sheet_to_json(wb.Sheets["News & Media"]) || [],
+				};
+
+				setStatus("Uploading data to server (this may take a moment)...");
+
+				const response = await apiClient.post("/import/bulk", payload);
+
+				if (response.status === 200) {
+					setStatus("✅ ALL DATA IMPORT COMPLETED SUCCESSFULLY!");
+				} else {
+					setStatus("❌ Server responded with an error.");
+				}
+			} catch (err: any) {
+				console.error("Import Error:", err);
+				const errorMsg = err.response?.data?.error || "Error processing file.";
+				setStatus(`❌ ${errorMsg}`);
+			} finally {
+				setLoading(false);
+				if (e.target) e.target.value = "";
+			}
+		};
+
+		reader.onerror = () => {
+			setStatus("❌ Failed to read the file.");
+			setLoading(false);
+		};
+
+		reader.readAsBinaryString(file);
+	};
+
+	return (
+		<div style={containerStyle}>
+			<div style={cardStyle}>
+				<h2 style={{ color: "#333", marginBottom: "10px" }}>
+					Database Bulk Import
+				</h2>
+				<p style={{ color: "#666", marginBottom: "30px" }}>
+					Select the <b>gg_hospital.xlsx</b> file. This will update all tables.
+				</p>
+
+				<div style={{ marginBottom: "20px" }}>
+					<input
+						type="file"
+						accept=".xlsx, .xls"
+						onChange={handleFileUpload}
+						id="excel-upload"
+						style={{ display: "none" }}
+						disabled={loading}
+					/>
+					<label
+						htmlFor="excel-upload"
+						style={{
+							...buttonStyle,
+							backgroundColor: loading ? "#a0aec0" : "#3182ce",
+							cursor: loading ? "not-allowed" : "pointer",
+						}}
+					>
+						{loading ? "⌛ Processing..." : "📂 Choose Excel File"}
+					</label>
+				</div>
+
+				{status && (
+					<div
+						style={{
+							marginTop: "25px",
+							padding: "15px",
+							borderRadius: "8px",
+							backgroundColor: status.includes("✅") ? "#f0fff4" : "#fff5f5",
+							color: status.includes("✅") ? "#2f855a" : "#c53030",
+							border: `1px solid ${status.includes("✅") ? "#c6f6d5" : "#fed7d7"}`,
+							fontWeight: "500",
+							whiteSpace: "pre-wrap",
+						}}
+					>
+						{status}
+					</div>
+				)}
+			</div>
+		</div>
+	);
+};
+
+const containerStyle: React.CSSProperties = {
+	display: "flex",
+	justifyContent: "center",
+	alignItems: "center",
+	minHeight: "80vh",
+	backgroundColor: "#f7fafc",
+	fontFamily: "'Segoe UI', Tahoma, Geneva, Verdana, sans-serif",
+};
+
+const cardStyle: React.CSSProperties = {
+	backgroundColor: "white",
+	padding: "40px",
+	borderRadius: "12px",
+	boxShadow: "0 4px 6px rgba(0,0,0,0.1)",
+	maxWidth: "500px",
+	width: "100%",
+	textAlign: "center",
+};
+
+const buttonStyle: React.CSSProperties = {
+	padding: "12px 24px",
+	color: "white",
+	borderRadius: "6px",
+	fontSize: "16px",
+	fontWeight: "bold",
+	transition: "all 0.2s ease",
+	display: "inline-block",
+};
+
+export default ImportData;

frontend/src/pages/email.tsx

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

frontend/src/pages/newsMedia.tsx

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

frontend/src/services/api.ts

@@ -1,7 +1,7 @@
 import axios from "axios";
 
 const api = axios.create({
-	baseURL: "http://localhost:3000/api",
+	baseURL: import.meta.env.VITE_API_URL,
 });
 
 api.interceptors.request.use((config) => {

frontend/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />