feat: improve email template

Reviewed-on: #17

.dockerignore

@@ -0,0 +1,34 @@
+# Include any files or directories that you don't want to be copied to your
+# container here (e.g., local build artifacts, temporary files, etc.).
+#
+# For more help, visit the .dockerignore file reference guide at
+# https://docs.docker.com/go/build-context-dockerignore/
+
+**/.classpath
+**/.dockerignore
+# **/.env
+**/.git
+**/.gitignore
+**/.project
+**/.settings
+**/.toolstarget
+**/.vs
+**/.vscode
+**/.next
+**/.cache
+**/*.*proj.user
+**/*.dbmdl
+**/*.jfm
+**/charts
+**/docker-compose*
+**/compose.y*ml
+**/Dockerfile*
+**/node_modules
+**/npm-debug.log
+**/obj
+**/secrets.dev.yaml
+**/values.dev.yaml
+**/build
+**/dist
+LICENSE
+README.md

.gitignore

@@ -0,0 +1 @@
+.env

CLAUDE.md

@@ -0,0 +1,102 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Repository layout
+
+Monorepo with two independent npm packages plus a shared Docker dev stack:
+
+- `backend/` — Node.js + Express 5 (ESM) API, Prisma ORM over PostgreSQL.
+- `frontend/` — React 19 + Vite + TypeScript admin dashboard, styled with Tailwind 4 + shadcn/ui.
+- `docker/` — Dev Dockerfiles + `entrypoint.sh` (used by `docker-compose.dev.yml` at repo root).
+
+There is no root-level package script — run npm commands inside `backend/` or `frontend/`.
+
+## Common commands
+
+### Docker (full stack)
+
+```bash
+docker compose -f docker-compose.dev.yml up --build   # backend :5008, frontend :3008, postgres :5432 (internal)
+docker compose -f docker-compose.dev.yml down
+```
+
+The backend container's `entrypoint.sh` runs `prisma generate` then `prisma db push` (NOT `migrate deploy`) on every start — schema changes propagate without a migration step in the Docker dev flow.
+
+### Backend (`cd backend`)
+
+```bash
+npm run dev          # nodemon src/app.js
+npm start            # node src/app.js
+npm run migrate      # npx prisma migrate dev (use this locally; Docker uses db push)
+npm run generate     # npx prisma generate
+npx prisma studio    # GUI for the DB
+npm run create-user <username> <password> [role]   # role defaults to "admin"
+```
+
+In Docker, create an admin via:
+```bash
+docker exec -it gg-backend-api-backend-1 node src/utils/createUser.js <name> <password> <role>
+```
+
+### Frontend (`cd frontend`)
+
+```bash
+npm run dev      # Vite dev server
+npm run build    # tsc -b && vite build
+npm run lint     # eslint .
+npm run preview
+```
+
+There is no test runner configured in either package.
+
+## Architecture
+
+### Backend
+
+Single Express app assembled in `backend/src/app.js`. Each domain follows the same triplet:
+
+- `src/routes/<domain>.routes.js` — declares the Express router, applies `jwtAuthMiddleware` per-route (mixed public/protected within the same router; see `blog.routes.js` for the pattern: list/detail public, admin endpoints + writes protected).
+- `src/controllers/<domain>.controller.js` — handler logic; uses Prisma directly.
+- Mounted at `/api/<domain>` in `app.js`.
+
+Domains: `departments`, `auth`, `blogs`, `upload`, `doctors`, `careers`, `candidates`, `appointments`, `inquiry`, `academics`, `email`, `newsMedia`, `import`. Static `uploads/` is served at `/uploads`.
+
+Cross-cutting pieces:
+
+- **Prisma client** — `src/prisma/client.js` exports a singleton. Always import from there rather than instantiating `new PrismaClient()` (the import controller currently instantiates its own — match the singleton pattern when adding new code).
+- **Auth** — `src/middleware/auth.js` expects `Authorization: Bearer <jwt>`, attaches the decoded payload to `req.user`. Tokens are issued by `src/utils/jwt.js` using `JWT_SECRET`. Passwords hashed via `src/utils/password.js` (bcrypt).
+- **Email** — `src/utils/sendEmail.js` wraps Postmark with `EMAIL_FROM` as sender. Recipient lists are looked up by category via `getEmailsByType(type)` against the `EmailConfig` table — controllers call this to fan out notifications (e.g. on new appointments/inquiries).
+- **CORS** — `CORS_ALLOWED_ORIGINS` is a **space-separated** list (not comma-separated). Requests with no `Origin` header are allowed.
+- **Body limits** — JSON/urlencoded bodies are capped at 50mb to support image-laden Editor.js payloads and bulk Excel imports.
+
+### Data model (Prisma — `backend/prisma/schema.prisma`)
+
+Note the natural-key relations: `Appointment.doctorId` references `Doctor.doctorId` (the string business ID), not `Doctor.id`. Same for `Department`. The `SL_NO` / `GG_ID` columns from imports become these business IDs. `Doctor` ↔ `Department` is many-to-many through `DoctorDepartment`, which has a 1:1 `DoctorTiming` for weekday schedules. `NewsMedia` has cascading `NewsImage` children.
+
+### Frontend
+
+- Routing in `src/App.tsx`: `PublicRoute` wraps `/` (Login); everything else is wrapped by `ProtectedRoute` → `DashboardLayout`. Unknown paths redirect to `/department`.
+- `src/context/AuthContext.tsx` is the auth source of truth; `src/services/api.ts` is the shared Axios instance that auto-injects `Authorization: Bearer <token>` from `localStorage.getItem("token")`.
+- `src/api/<domain>.ts` files are thin wrappers around that axios client, one per backend domain — keep this pattern when adding endpoints.
+- Path alias `@/*` → `src/*` (configured in both `vite.config.ts` and `tsconfig`).
+- File uploads go through Bytescale (`src/components/BytescaleUploader`) — server only stores the resulting URL.
+- The `/import` page parses Excel via `xlsx` and POSTs structured payloads to `/api/import`, where `importController.js` upserts across multiple tables. When changing import behavior, the frontend's column names (`SL_NO`, `GG_ID`, `Department`, `Working Status`, etc.) and the controller's destructured keys (`departments`, `doctors`, `timings`, …) must stay in sync.
+
+## Environment variables
+
+`backend/.env`:
+```
+DATABASE_URL=postgresql://user:password@db:5432/mydb
+PORT=5008
+JWT_SECRET=...
+CORS_ALLOWED_ORIGINS=http://localhost:5173      # space-separated for multiple
+BYTESCALE_SECRET_API_KEY=...
+POSTMARK_API_KEY=...
+EMAIL_FROM=admin@example.com
+```
+
+`frontend/.env`:
+```
+VITE_API_URL=http://localhost:5008/api
+```

README.md

@@ -0,0 +1,94 @@
+# Docker Setup (Backend + Frontend + PostgreSQL)
+
+This project provides a complete development environment using **Docker Compose** for:
+
+- Backend (Node.js / Express / Prisma)
+- Frontend (Vite / React)
+- PostgreSQL Database
+
+---
+
+## Project Structure
+
+```
+.
+├── backend/
+├── frontend/
+├── docker/
+│   └── dev/
+│       ├── Dockerfile.main
+│       └── Dockerfile.frontend
+├── docker-compose.dev.yml
+```
+
+---
+
+## Prerequisites
+
+Make sure you have installed:
+
+- Docker
+- Docker Compose
+
+---
+
+## Environment Variables
+
+### Backend (`backend/.env`)
+
+```env
+DATABASE_URL=postgresql://user:password@db:5432/mydb
+PORT=5008
+JWT_SECRET=your_secret_here
+
+CORS_ALLOWED_ORIGINS=http://localhost:5173
+
+BYTESCALE_SECRET_API_KEY=your_key
+POSTMARK_API_KEY=your_key
+EMAIL_FROM=admin@example.com
+```
+
+### Frontend (`frontend/.env`)
+
+```env
+VITE_API_URL=http://localhost:5008/api
+```
+
+---
+
+## Running the Project
+
+### Start containers
+
+```bash
+docker compose -f docker-compose.dev.yml up --build
+```
+
+## Create User
+
+```bash
+docker exec -it gg-backend-api-backend-1 node src/utils/createUser.js <name> <password> <role>
+
+```
+
+---
+
+### Stop containers
+
+```bash
+docker compose -f docker-compose.dev.yml down
+```
+
+---
+
+## Database (PostgreSQL)
+
+- User: `user`
+- Password: `password`
+- DB: `mydb`
+
+Data is persisted using Docker volume:
+
+```
+postgres_data
+```

backend/.gitignore

@@ -1,5 +1,5 @@
 node_modules
 # Keep environment variables out of version control
-.env
+.env*
 
 /src/generated/prisma

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=5008
+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.json

@@ -8,7 +8,8 @@
 		"start": "node src/app.js",
 		"prisma": "prisma",
 		"migrate": "npx prisma migrate dev",
-		"generate": "npx prisma generate"
+		"generate": "npx prisma generate",
+		"create-user": "node src/utils/createUser.js"
 	},
 	"keywords": [],
 	"author": "",

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,8 +54,9 @@ 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;
+const PORT = process.env.PORT || 5008;
 app.listen(PORT, () => {
 	console.log(`Server running on port ${PORT}`);
 });

backend/src/controllers/academicsResearch.controller.js

@@ -35,18 +35,73 @@ export const createAcademicsResearch = async (req, res) => {
 					to: emailList,
 					subject: "New Academics & Research Inquiry",
 					html: `
-						<h2>New Academics & Research Inquiry</h2>
+		<div style="font-family: Arial, sans-serif; background-color: #f4f6f8; padding: 20px;">
+		  
+		  <div style="max-width: 600px; margin: auto; background: #ffffff; border-radius: 10px; overflow: hidden; box-shadow: 0 4px 10px rgba(0,0,0,0.05);">
+		    
+		    <!-- Header -->
+		    <div style="background-color: #0d6efd; color: #ffffff; padding: 20px;">
+		      <h2 style="margin: 0;">GG Hospital</h2>
+		      <p style="margin: 5px 0 0; font-size: 14px;">
+		        New Academics & Research Inquiry
+		      </p>
+		    </div>
 
-						<p><b>Name:</b> ${fullName}</p>
+		    <!-- Body -->
-						<p><b>Phone:</b> ${number}</p>
+		    <div style="padding: 20px; color: #333;">
-						<p><b>Email:</b> ${emailId || "-"}</p>
+		      
+		      <h3 style="margin-top: 0;">Contact Details</h3>
+		      
+		      <table style="width: 100%; border-collapse: collapse;">
+		        <tr>
+		          <td style="padding: 8px 0;"><b>Name:</b></td>
+		          <td style="padding: 8px 0;">${fullName}</td>
+		        </tr>
+		        <tr>
+		          <td style="padding: 8px 0;"><b>Phone:</b></td>
+		          <td style="padding: 8px 0;">${number}</td>
+		        </tr>
+		        <tr>
+		          <td style="padding: 8px 0;"><b>Email:</b></td>
+		          <td style="padding: 8px 0;">${emailId || "-"}</td>
+		        </tr>
+		        <tr>
+		          <td style="padding: 8px 0;"><b>Course:</b></td>
+		          <td style="padding: 8px 0;">${courseName || "-"}</td>
+		        </tr>
+		        <tr>
+		          <td style="padding: 8px 0;"><b>Subject:</b></td>
+		          <td style="padding: 8px 0;">${subject || "-"}</td>
+		        </tr>
+		      </table>
 
-						<p><b>Course:</b> ${courseName || "-"}</p>
+		      <!-- Message Box -->
-						<p><b>Subject:</b> ${subject || "-"}</p>
+		     <div style="margin-top: 20px;">
+				<h3>Message</h3>
+				<div style="
+					background: #f8f9fa;
+					padding: 15px;
+					border-radius: 6px;
+					line-height: 1.6;
+					white-space: pre-wrap;
+					word-break: break-word;
+					overflow-wrap: anywhere;
+				">
+					${message ? message.replace(/\n/g, "<br/>") : "-"}
+				</div>
+				</div>
 
-						<p><b>Message:</b></p>
+		    </div>
-						<p>${message || "-"}</p>
+
-					`,
+		    <!-- Footer -->
+		    <div style="background: #f1f1f1; padding: 15px; text-align: center; font-size: 12px; color: #666;">
+		      This message was sent from the GG Hospital website (Academics & Research Inquiry).
+		    </div>
+
+		  </div>
+
+		</div>
+		`,
 				});
 			}
 		} catch (err) {

backend/src/controllers/appointment.controller.js

@@ -1,10 +1,10 @@
 import prisma from "../prisma/client.js";
-import {sendEmail} from "../utils/sendEmail.js";
+import { sendEmail } from "../utils/sendEmail.js";
-import {getEmailsByType} from "../utils/getEmailByTypes.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) {
@@ -38,15 +38,84 @@ export const createAppointment = async (req, res) => {
 					to: emailList,
 					subject: "New Appointment Booked",
 					html: `
-						<h2>New Appointment Booked</h2>
+		<div style="font-family: Arial, sans-serif; background-color: #f4f6f8; padding: 20px;">
-						<p><b>Name:</b> ${name}</p>
+		  
-						<p><b>Phone:</b> ${mobileNumber}</p>
+		  <div style="max-width: 600px; margin: auto; background: #ffffff; border-radius: 10px; overflow: hidden; box-shadow: 0 4px 10px rgba(0,0,0,0.05);">
-						<p><b>Email:</b> ${email || "-"}</p>
+		    
-						<p><b>Doctor:</b> ${appointment.doctor?.name}</p>
+		    <!-- Header -->
-						<p><b>Department:</b> ${appointment.department?.name}</p>
+		    <div style="background-color: #0d6efd; color: #ffffff; padding: 20px;">
-						<p><b>Date:</b> ${new Date(date).toLocaleDateString()}</p>
+		      <h2 style="margin: 0;">GG Hospital</h2>
-						<p><b>Message:</b> ${message || "-"}</p>
+		      <p style="margin: 5px 0 0; font-size: 14px;">
-					`,
+		        New Appointment Booked
+		      </p>
+		    </div>
+
+		    <!-- Body -->
+		    <div style="padding: 20px; color: #333;">
+		      
+		      <h3 style="margin-top: 0;">Patient Details</h3>
+		      
+		      <table style="width: 100%; border-collapse: collapse;">
+		        <tr>
+		          <td style="padding: 8px 0;"><b>Name:</b></td>
+		          <td style="padding: 8px 0;">${name}</td>
+		        </tr>
+		        <tr>
+		          <td style="padding: 8px 0;"><b>Phone:</b></td>
+		          <td style="padding: 8px 0;">${mobileNumber}</td>
+		        </tr>
+		        <tr>
+		          <td style="padding: 8px 0;"><b>Email:</b></td>
+		          <td style="padding: 8px 0;">${email || "-"}</td>
+		        </tr>
+		      </table>
+
+		      <h3 style="margin-top: 20px;">Appointment Details</h3>
+
+		      <table style="width: 100%; border-collapse: collapse;">
+		        <tr>
+		          <td style="padding: 8px 0;"><b>Doctor:</b></td>
+		          <td style="padding: 8px 0;">${appointment.doctor?.name || "-"}</td>
+		        </tr>
+		        <tr>
+		          <td style="padding: 8px 0;"><b>Department:</b></td>
+		          <td style="padding: 8px 0;">${appointment.department?.name || "-"}</td>
+		        </tr>
+		        <tr>
+		          <td style="padding: 8px 0;"><b>Date:</b></td>
+		          <td style="padding: 8px 0;">
+		            ${new Date(date).toLocaleDateString()}
+		          </td>
+		        </tr>
+		      </table>
+
+		      <!-- Message Box -->
+		      <div style="margin-top: 20px;">
+		        <h3>Message</h3>
+		       <div style="
+					background: #f8f9fa;
+					padding: 15px;
+					border-radius: 6px;
+					line-height: 1.6;
+					white-space: pre-wrap;
+					word-break: break-word;
+					overflow-wrap: anywhere;
+				">
+					${message ? message.replace(/\n/g, "<br/>") : "-"}
+				</div>
+		      </div>
+
+		    </div>
+
+		    <!-- Footer -->
+		    <div style="background: #f1f1f1; padding: 15px; text-align: center; font-size: 12px; color: #666;">
+		      This appointment was booked via the GG Hospital website.
+		    </div>
+
+		  </div>
+
+		</div>
+		`,
 				});
 			}
 		} catch (err) {
@@ -71,26 +140,49 @@ export const createAppointment = async (req, res) => {
 
 export const getAppointments = async (req, res) => {
 	try {
-		const appointments = await prisma.appointment.findMany({
+		const page = parseInt(req.query.page) || 1;
-			include: {
+		const limit = parseInt(req.query.limit) || 10;
-				doctor: true,
+		const skip = (page - 1) * limit;
-				department: true,
+		const { date, search } = req.query;
-			},
+
-			orderBy: {
+		const where = {};
-				createdAt: "desc",
+
-			},
+		if (date) {
-		});
+			const start = new Date(date);
+			const end = new Date(date);
+			end.setDate(end.getDate() + 1);
+			where.date = { gte: start, lt: end };
+		}
+
+		if (search) {
+			where.OR = [
+				{ name: { contains: search, mode: "insensitive" } },
+				{ mobileNumber: { contains: search } },
+				{ email: { contains: search, mode: "insensitive" } },
+			];
+		}
+
+		const [appointments, total] = await Promise.all([
+			prisma.appointment.findMany({
+				where,
+				include: { doctor: true, department: true },
+				orderBy: { createdAt: "desc" },
+				skip,
+				take: limit,
+			}),
+			prisma.appointment.count({ where }),
+		]);
 
 		res.status(200).json({
 			success: true,
 			data: appointments,
+			pagination: { total, page, limit, totalPages: Math.ceil(total / limit) },
 		});
 	} catch (error) {
 		console.error(error);
-		res.status(500).json({
+		res
-			success: false,
+			.status(500)
-			message: "Failed to fetch appointments",
+			.json({ success: false, message: "Failed to fetch appointments" });
-		});
 	}
 };
 
@@ -98,7 +190,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 +226,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 +258,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 +287,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 +318,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/candidate.controller.js

@@ -39,19 +39,82 @@ export const createCandidate = async (req, res) => {
 					to: emailList,
 					subject: "New Job Application Received",
 					html: `
-						<h2>New Candidate Application</h2>
+		<div style="font-family: Arial, sans-serif; background-color: #f4f6f8; padding: 20px;">
+		  
+		  <div style="max-width: 600px; margin: auto; background: #ffffff; border-radius: 10px; overflow: hidden; box-shadow: 0 4px 10px rgba(0,0,0,0.05);">
+		    
+		    <!-- Header -->
+		    <div style="background-color: #0d6efd; color: #ffffff; padding: 20px;">
+		      <h2 style="margin: 0;">GG Hospital</h2>
+		      <p style="margin: 5px 0 0; font-size: 14px;">
+		        New Job Application Received
+		      </p>
+		    </div>
 
-						<p><b>Name:</b> ${fullName}</p>
+		    <!-- Body -->
-						<p><b>Phone:</b> ${mobile}</p>
+		    <div style="padding: 20px; color: #333;">
-						<p><b>Email:</b> ${email}</p>
+		      
+		      <h3 style="margin-top: 0;">Candidate Details</h3>
+		      
+		      <table style="width: 100%; border-collapse: collapse;">
+		        <tr>
+		          <td style="padding: 8px 0;"><b>Name:</b></td>
+		          <td style="padding: 8px 0;">${fullName}</td>
+		        </tr>
+		        <tr>
+		          <td style="padding: 8px 0;"><b>Phone:</b></td>
+		          <td style="padding: 8px 0;">${mobile}</td>
+		        </tr>
+		        <tr>
+		          <td style="padding: 8px 0;"><b>Email:</b></td>
+		          <td style="padding: 8px 0;">${email}</td>
+		        </tr>
+		      </table>
 
-						<p><b>Applied For:</b> ${candidate.career?.post || "-"}</p>
+		      <h3 style="margin-top: 20px;">Application Details</h3>
-						<p><b>Designation:</b> ${candidate.career?.designation || "-"}</p>
 
-						<p><b>Subject:</b> ${subject || "-"}</p>
+		      <table style="width: 100%; border-collapse: collapse;">
-						<p><b>Cover Letter:</b></p>
+		        <tr>
-						<p>${coverLetter || "-"}</p>
+		          <td style="padding: 8px 0;"><b>Applied For:</b></td>
-					`,
+		          <td style="padding: 8px 0;">${candidate.career?.post || "-"}</td>
+		        </tr>
+		        <tr>
+		          <td style="padding: 8px 0;"><b>Designation:</b></td>
+		          <td style="padding: 8px 0;">${candidate.career?.designation || "-"}</td>
+		        </tr>
+		        <tr>
+		          <td style="padding: 8px 0;"><b>Subject:</b></td>
+		          <td style="padding: 8px 0;">${subject || "-"}</td>
+		        </tr>
+		      </table>
+
+		      <!-- Cover Letter -->
+		      <div style="margin-top: 20px;">
+		        <h3>Cover Letter</h3>
+				<div style="
+					background: #f8f9fa;
+					padding: 15px;
+					border-radius: 6px;
+					line-height: 1.6;
+					white-space: pre-wrap;
+					word-break: break-word;
+					overflow-wrap: anywhere;
+				">
+					${coverLetter ? coverLetter.replace(/\n/g, "<br/>") : "-"}
+				</div>
+		      </div>
+
+		    </div>
+
+		    <!-- Footer -->
+		    <div style="background: #f1f1f1; padding: 15px; text-align: center; font-size: 12px; color: #666;">
+		      This application was submitted via the GG Hospital careers page.
+		    </div>
+
+		  </div>
+
+		</div>
+		`,
 				});
 			}
 		} catch (err) {

backend/src/controllers/importController.js

@@ -0,0 +1,304 @@
+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 doctorName = row.Doctor?.toString();
+				const departmentName = row["Department Id"]?.toString();
+
+				const doctor = await prisma.doctor.findFirst({
+					where: { name: doctorName },
+				});
+
+				const department = await prisma.department.findFirst({
+					where: { name: departmentName },
+				});
+				const parseDate = (value) => {
+					if (!value) return new Date();
+
+					// Excel numeric date
+					if (typeof value === "number") {
+						return new Date((value - 25569) * 86400 * 1000);
+					}
+
+					if (typeof value === "string") {
+						const v = value.trim();
+
+						// Handle DD/MM/YYYY
+						const ddmmyyyy = /^(\d{2})\/(\d{2})\/(\d{4})$/;
+						const match = v.match(ddmmyyyy);
+
+						if (match) {
+							const [_, dd, mm, yyyy] = match;
+							return new Date(`${yyyy}-${mm}-${dd}`);
+						}
+
+						// Fallback (ISO or other valid formats)
+						const d = new Date(v);
+
+						if (!isNaN(d.getTime()) && d.getFullYear() < 2100) {
+							return d;
+						}
+					}
+
+					console.warn("⚠️ Invalid date, using current date:", value);
+					return new Date();
+				};
+				if (doctor && department) {
+					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: parseDate(row.Date),
+							doctorId: doctor.doctorId,
+							departmentId: department.departmentId,
+						},
+					});
+				}
+			}
+		}
+
+		// 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

@@ -32,14 +32,66 @@ export const createInquiry = async (req, res) => {
 					to: emailList,
 					subject: "New Inquiry Received",
 					html: `
-						<h2>New Inquiry</h2>
+					<div style="font-family: Arial, sans-serif; background-color: #f4f6f8; padding: 20px;">
+					
+					<div style="max-width: 600px; margin: auto; background: #ffffff; border-radius: 10px; overflow: hidden; box-shadow: 0 4px 10px rgba(0,0,0,0.05);">
+						
+						<!-- Header -->
+						<div style="background-color: #0d6efd; color: #ffffff; padding: 20px;">
+						<h2 style="margin: 0;">GG Hospital</h2>
+						<p style="margin: 5px 0 0; font-size: 14px;">New Inquiry Received</p>
+						</div>
 
-						<p><b>Name:</b> ${fullName}</p>
+						<!-- Body -->
-						<p><b>Phone:</b> ${number}</p>
+						<div style="padding: 20px; color: #333;">
-						<p><b>Email:</b> ${emailId}</p>
+						
+						<h3 style="margin-top: 0;">Contact Details</h3>
+						
+						<table style="width: 100%; border-collapse: collapse;">
+							<tr>
+							<td style="padding: 8px 0;"><b>Name:</b></td>
+							<td style="padding: 8px 0;">${fullName}</td>
+							</tr>
+							<tr>
+							<td style="padding: 8px 0;"><b>Phone:</b></td>
+							<td style="padding: 8px 0;">${number}</td>
+							</tr>
+							<tr>
+							<td style="padding: 8px 0;"><b>Email:</b></td>
+							<td style="padding: 8px 0;">${emailId}</td>
+							</tr>
+							<tr>
+							<td style="padding: 8px 0;"><b>Subject:</b></td>
+							<td style="padding: 8px 0;">${subject}</td>
+							</tr>
+						</table>
 
-						<p><b>Subject:</b> ${subject}</p>
+						<!-- Message Box -->
-					<p><b>Message:</b> ${message}</p>
+						<div style="margin-top: 20px;">
+							<h3>Message</h3>
+							<div style="
+										background: #f8f9fa;
+										padding: 15px;
+										border-radius: 6px;
+										line-height: 1.6;
+										white-space: pre-wrap;
+										word-break: break-word;
+										overflow-wrap: anywhere;
+									">
+										${message ? message.replace(/\n/g, "<br/>") : "-"}
+							</div>
+						</div>
+
+						</div>
+
+						<!-- Footer -->
+						<div style="background: #f1f1f1; padding: 15px; text-align: center; font-size: 12px; color: #666;">
+						This message was sent from the GG Hospital website contact form.
+						</div>
+
+					</div>
+
+					</div>
 					`,
 				});
 			}

backend/src/controllers/newsMedia.controller.js

@@ -4,53 +4,40 @@ import prisma from "../prisma/client.js";
 
 export const getAllNews = async (req, res) => {
 	try {
-		const page = parseInt(req.query.page);
+		const page = parseInt(req.query.page) || 1;
-		const limit = parseInt(req.query.limit);
+		const limit = parseInt(req.query.limit) || 10;
+		const search = req.query.search?.trim() || "";
 
 		const includeImages = {
 			images: true,
 		};
 
-		if (!page && !limit) {
+		const searchFilter = search
-			const news = await prisma.newsMedia.findMany({
+			? {
-				include: includeImages,
+					headline: {
-				orderBy: { createdAt: "desc" },
+						contains: search,
-			});
+						mode: "insensitive",
+					},
+				}
+			: {};
 
-			const response = news.map((n) => ({
+		const whereCondition = {
-				Id: n.id.toString(),
+			...searchFilter,
-				Headline: n.headline,
+		};
-				Content: n.content,
-				FirstPara: n.firstPara,
-				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({
+		const skip = (page - 1) * limit;
-				success: true,
-				data: response,
-				meta: null,
-			});
-		}
-
-		const currentPage = page || 1;
-		const currentLimit = limit || 10;
-
-		const skip = (currentPage - 1) * currentLimit;
 
 		const [news, total] = await Promise.all([
 			prisma.newsMedia.findMany({
+				where: whereCondition,
 				include: includeImages,
 				orderBy: { createdAt: "desc" },
 				skip,
-				take: currentLimit,
+				take: limit,
+			}),
+			prisma.newsMedia.count({
+				where: whereCondition,
 			}),
-			prisma.newsMedia.count(),
 		]);
 
 		const response = news.map((n) => ({
@@ -72,9 +59,9 @@ export const getAllNews = async (req, res) => {
 			data: response,
 			meta: {
 				total,
-				page: currentPage,
+				page,
-				limit: currentLimit,
+				limit,
-				totalPages: Math.ceil(total / currentLimit),
+				totalPages: Math.ceil(total / limit),
 			},
 		});
 	} catch (error) {
@@ -85,7 +72,6 @@ export const getAllNews = async (req, res) => {
 		});
 	}
 };
-
 // GET NEWS BY ID
 
 export const getNewsById = async (req, res) => {

backend/src/routes/auth.routes.js

@@ -1,9 +1,8 @@
 import express from "express";
-import {register, login} from "../controllers/auth.controller.js";
+import { login } from "../controllers/auth.controller.js";
 
 const router = express.Router();
 
-router.post("/register", register);
 router.post("/login", login);
 
 export default router;

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/utils/createUser.js

@@ -0,0 +1,47 @@
+import prisma from "../prisma/client.js";
+import { hashPassword } from "./password.js";
+async function main() {
+	const username = process.argv[2];
+	const password = process.argv[3];
+	const role = process.argv[4] || "admin";
+
+	if (!username || !password) {
+		console.log(
+			"Usage: node scripts/createUser.js <username> <password> [role]",
+		);
+		process.exit(1);
+	}
+
+	const existingUser = await prisma.user.findUnique({
+		where: { username },
+	});
+
+	if (existingUser) {
+		console.log("User already exists");
+		process.exit(1);
+	}
+
+	const hashedPassword = await hashPassword(password);
+
+	const user = await prisma.user.create({
+		data: {
+			username,
+			password: hashedPassword,
+			role,
+		},
+	});
+
+	console.log("User created:", {
+		id: user.id,
+		username: user.username,
+		role: user.role,
+	});
+}
+
+main()
+	.catch((e) => {
+		console.error(e);
+	})
+	.finally(async () => {
+		await prisma.$disconnect();
+	});

docker-compose.dev.yml

@@ -0,0 +1,44 @@
+version: "3.8"
+
+services:
+ backend:
+  build:
+   context: .
+   dockerfile: docker/dev/Dockerfile.main
+  ports:
+   - "127.0.0.1:5008:5008"
+  env_file:
+   - ./backend/.env
+  depends_on:
+   db:
+    condition: service_healthy
+  restart: unless-stopped
+
+ frontend:
+  build:
+   context: .
+   dockerfile: docker/dev/Dockerfile.frontend
+  ports:
+   - "127.0.0.1:3008:3000"
+  env_file:
+   - ./frontend/.env
+  restart: unless-stopped
+
+ db:
+  image: postgres:16-alpine
+  container_name: postgres_db
+  environment:
+   - POSTGRES_USER=${POSTGRES_USER}
+   - POSTGRES_PASSWORD=${POSTGRES_PASSWORD}
+   - POSTGRES_DB=${POSTGRES_DB}
+  volumes:
+   - postgres_data:/var/lib/postgresql/data
+  healthcheck:
+   test: ["CMD-SHELL", "pg_isready -U $$POSTGRES_USER -d $$POSTGRES_DB"]
+   interval: 5s
+   timeout: 5s
+   retries: 5
+  restart: unless-stopped
+
+volumes:
+ postgres_data:

docker/dev/Dockerfile.frontend

@@ -0,0 +1,19 @@
+ARG NODE_VERSION=24.15.0
+FROM node:${NODE_VERSION}-alpine
+
+WORKDIR /usr/src/app
+
+COPY ./frontend/package*.json ./
+RUN npm ci
+
+COPY ./frontend .
+
+# Build the app
+RUN npm run build
+
+RUN npm install -g serve
+
+EXPOSE 3000
+
+# Serve built app
+CMD ["serve", "-s", "dist"]

docker/dev/Dockerfile.main

@@ -0,0 +1,24 @@
+ARG NODE_VERSION=24.15.0
+FROM node:${NODE_VERSION}-alpine
+
+WORKDIR /usr/src/app
+
+# Use cache mounts for faster installs
+RUN --mount=type=bind,source=backend/package.json,target=package.json \
+    --mount=type=bind,source=backend/package-lock.json,target=package-lock.json \
+    --mount=type=cache,target=/root/.npm \
+    npm ci
+
+# Copy the backend source
+COPY ./backend .
+
+# Copy and setup entrypoint
+COPY ./docker/entrypoint.sh /usr/local/bin/entrypoint.sh
+RUN chmod +x /usr/local/bin/entrypoint.sh
+
+EXPOSE 5008
+
+ENTRYPOINT [ "entrypoint.sh" ]
+
+# This '$@' will be replaced by the CMD
+CMD ["npm", "start"]

docker/entrypoint.sh

@@ -0,0 +1,14 @@
+#!/bin/sh
+set -e  # Exit immediately if a command exits with a non-zero status
+
+echo "Generating Prisma Client..."
+npx prisma generate
+
+# echo "Running migrate..."
+# npx prisma migrate deploy
+echo "Running PUSH..."
+npx prisma db push
+
+echo "Executing command: $@"
+exec "$@"
+

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:5008/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/index.html

@@ -1,13 +1,13 @@
 <!doctype html>
 <html lang="en">
-  <head>
+	<head>
-    <meta charset="UTF-8" />
+		<meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+		<link rel="icon" type="image/svg+xml" href="/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>frontend</title>
+		<title>GG Admin Dashboard</title>
-  </head>
+	</head>
-  <body>
+	<body>
-    <div id="root"></div>
+		<div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
+		<script type="module" src="/src/main.tsx"></script>
-  </body>
+	</body>
 </html>

frontend/package-lock.json

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

frontend/package.json

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

frontend/public/vite.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

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/appointment.ts

@@ -1,7 +1,18 @@
 import apiClient from "@/api/client";
 
-export const getAppointmentsApi = async () => {
+export const getAppointmentsApi = async (
-	const res = await apiClient.get("/appointments/getall");
+	page = 1,
+	limit = 10,
+	date = "",
+	search = "",
+) => {
+	const params = new URLSearchParams({
+		page: String(page),
+		limit: String(limit),
+		...(date && { date }),
+		...(search && { search }),
+	});
+	const res = await apiClient.get(`/appointments/getall?${params}`);
 	return res.data;
 };
 

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/newsMedia.ts

@@ -1,8 +1,8 @@
 import apiClient from "@/api/client";
 
-export const getNewsApi = async (page = 1, limit = 10) => {
+export const getNewsApi = async (page = 1, limit = 10, search = "") => {
 	const res = await apiClient.get(
-		`/newsMedia/getAll?page=${page}&limit=${limit}`,
+		`/newsMedia/getAll?page=${page}&limit=${limit}&search=${search}`,
 	);
 	return res.data;
 };

frontend/src/components/BytescaleUploader/BytescaleUploader.tsx

@@ -6,7 +6,7 @@ import axios from "axios";
 interface BytescaleUploaderProps {
 	value: string;
 	onChange: (url: string) => void;
-	folderPath: "/doctors" | "/departments" | "/news";
+	folderPath: "/doctors" | "/departments" | "/news" | "/blog";
 }
 
 export function BytescaleUploader({
@@ -14,6 +14,7 @@ export function BytescaleUploader({
 	onChange,
 	folderPath,
 }: BytescaleUploaderProps) {
+	const baseURL = import.meta.env.VITE_API_URL;
 	const [isUploading, setIsUploading] = useState(false);
 	const fileInputRef = useRef<HTMLInputElement>(null);
 
@@ -33,15 +34,11 @@ export function BytescaleUploader({
 		formData.append("folderPath", folderPath);
 
 		try {
-			const response = await axios.post(
+			const response = await axios.post(`${baseURL}/upload`, formData, {
-				"http://localhost:3000/api/upload",
+				headers: {
-				formData,
+					"Content-Type": "multipart/form-data",
-				{
-					headers: {
-						"Content-Type": "multipart/form-data",
-					},
 				},
-			);
+			});
 
 			const {fileUrl} = response.data;
 			onChange(fileUrl);

frontend/src/pages/Appointment.tsx

@@ -45,52 +45,46 @@ export default function AppointmentPage() {
 	const [viewData, setViewData] = useState<any>(null);
 
 	const [currentPage, setCurrentPage] = useState(1);
-	const itemsPerPage = 10;
+	const [totalPages, setTotalPages] = useState(1);
+	const [totalItems, setTotalItems] = useState(0);
+	const [itemsPerPage, setItemsPerPage] = useState(10);
 
 	const fetchAll = useCallback(async () => {
 		setLoading(true);
 		try {
-			const res = await getAppointmentsApi();
+			const res = await getAppointmentsApi(
+				currentPage,
+				itemsPerPage,
+				filterDate,
+				searchText,
+			);
 			setAppointments(res?.data || []);
+			setTotalPages(res?.pagination?.totalPages || 1);
+			setTotalItems(res?.pagination?.total || 0);
 		} catch (err) {
 			console.error(err);
 		} finally {
 			setLoading(false);
 		}
-	}, []);
+	}, [currentPage, itemsPerPage, filterDate, searchText]);
 
 	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
+		return matchesDoctor;
-			? 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 indexOfFirstItem = (currentPage - 1) * itemsPerPage;
-	const indexOfLastItem = currentPage * itemsPerPage;
-	const indexOfFirstItem = indexOfLastItem - itemsPerPage;
-	const currentItems = filteredAppointments.slice(
-		indexOfFirstItem,
-		indexOfLastItem,
-	);
 
 	function openView(item: any) {
 		setViewData(item);
@@ -126,17 +120,36 @@ export default function AppointmentPage() {
 					<Input
 						placeholder="Search name / phone..."
 						value={searchText}
-						onChange={(e) => setSearchText(e.target.value)}
+						onChange={(e) => {
+							setSearchText(e.target.value);
+							setCurrentPage(1);
+						}}
 						className="w-[220px] text-base"
 					/>
 
 					<Input
 						type="date"
 						value={filterDate}
-						onChange={(e) => setFilterDate(e.target.value)}
+						onChange={(e) => {
+							setFilterDate(e.target.value);
+							setCurrentPage(1);
+						}}
 						className="w-[160px] text-base"
 					/>
 
+					<select
+						value={itemsPerPage}
+						onChange={(e) => {
+							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"
+					>
+						<option value={5}>5 / page</option>
+						<option value={10}>10 / page</option>
+						<option value={20}>20 / page</option>
+					</select>
+
 					<Button
 						variant="outline"
 						onClick={fetchAll}
@@ -192,7 +205,7 @@ export default function AppointmentPage() {
 											<Loader2 className="h-8 w-8 animate-spin mx-auto" />
 										</TableCell>
 									</TableRow>
-								) : currentItems.length === 0 ? (
+								) : filteredAppointments.length === 0 ? (
 									<TableRow>
 										<TableCell
 											colSpan={6}
@@ -202,7 +215,7 @@ export default function AppointmentPage() {
 										</TableCell>
 									</TableRow>
 								) : (
-									currentItems.map((item) => (
+									filteredAppointments.map((item) => (
 										<TableRow key={item.id} className="hover:bg-muted/50">
 											<TableCell className="font-mono text-xs">
 												{item.id}
@@ -260,18 +273,15 @@ export default function AppointmentPage() {
 						</Table>
 					</div>
 
-					{!loading && filteredAppointments.length > 0 && (
+					{!loading && totalItems > 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)}
+									{Math.min(currentPage * itemsPerPage, totalItems)}
 								</span>{" "}
-								of{" "}
+								of <span className="font-semibold">{totalItems}</span>
-								<span className="font-semibold">
-									{filteredAppointments.length}
-								</span>
 							</div>
 							<div className="flex items-center gap-6">
 								<div className="text-base font-semibold">

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/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/newsMedia.tsx

@@ -73,7 +73,7 @@ export default function NewsPage() {
 	const fetchAll = useCallback(async () => {
 		setLoading(true);
 		try {
-			const res = await getNewsApi(currentPage, itemsPerPage);
+			const res = await getNewsApi(currentPage, itemsPerPage, searchText);
 
 			setNews(res?.data || []);
 			setTotalItems(res?.meta?.total || 0);
@@ -82,18 +82,12 @@ export default function NewsPage() {
 		} finally {
 			setLoading(false);
 		}
-	}, [currentPage, itemsPerPage]);
+	}, [currentPage, itemsPerPage, searchText]);
 
 	useEffect(() => {
 		fetchAll();
 	}, [fetchAll]);
 
-	const filteredNews = news.filter(
-		(item) =>
-			item.Headline?.toLowerCase().includes(searchText.toLowerCase()) ||
-			item.Author?.toLowerCase().includes(searchText.toLowerCase()),
-	);
-
 	const totalPages = Math.ceil(totalItems / itemsPerPage);
 
 	function handleChange(e: any) {
@@ -171,8 +165,10 @@ export default function NewsPage() {
 					<Input
 						placeholder="Filter headline..."
 						value={searchText}
-						onChange={(e) => setSearchText(e.target.value)}
+						onChange={(e) => {
-						className="w-[250px] text-base"
+							setSearchText(e.target.value);
+							setCurrentPage(1); // reset page
+						}}
 					/>
 
 					<select
@@ -246,7 +242,7 @@ export default function NewsPage() {
 											<Loader2 className="h-8 w-8 animate-spin mx-auto text-primary" />
 										</TableCell>
 									</TableRow>
-								) : filteredNews.length === 0 ? (
+								) : news.length === 0 ? (
 									<TableRow>
 										<TableCell
 											colSpan={7}
@@ -256,7 +252,7 @@ export default function NewsPage() {
 										</TableCell>
 									</TableRow>
 								) : (
-									filteredNews.map((item) => (
+									news.map((item) => (
 										<TableRow key={item.Id} className="hover:bg-muted/50">
 											<TableCell className="font-mono text-xs">
 												{item.Id}

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" />