Compare commits
14 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| dd5d46c58d | |||
| 64d720143e | |||
| 69d6d5a8f3 | |||
| 3fc4100a72 | |||
| ddb87d6789 | |||
| d0686b67aa | |||
| 671a3c4e3a | |||
| e356aa8fd9 | |||
| 740631d376 | |||
| 39e162f65c | |||
| 959440e1c6 | |||
| 809a0a4798 | |||
| 5cf73a6351 | |||
| 7eab5fe3ff |
@@ -0,0 +1,87 @@
|
||||
# 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=3000
|
||||
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_BASE_URL=http://localhost:5000
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Running the Project
|
||||
|
||||
### Start containers
|
||||
|
||||
```bash
|
||||
docker compose -f docker-compose.dev.yml up --build
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 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
|
||||
```
|
||||
@@ -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.
|
||||
@@ -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": "",
|
||||
|
||||
@@ -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, () => {
|
||||
|
||||
@@ -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 });
|
||||
}
|
||||
};
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
@@ -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();
|
||||
});
|
||||
|
Before Width: | Height: | Size: 171 KiB |
|
Before Width: | Height: | Size: 2.3 MiB |
|
Before Width: | Height: | Size: 171 KiB |
|
Before Width: | Height: | Size: 71 KiB |
|
Before Width: | Height: | Size: 68 KiB |
|
Before Width: | Height: | Size: 68 KiB |
|
Before Width: | Height: | Size: 113 KiB |
|
Before Width: | Height: | Size: 68 KiB |
|
Before Width: | Height: | Size: 48 KiB |
@@ -0,0 +1,44 @@
|
||||
version: "3.8"
|
||||
|
||||
services:
|
||||
backend:
|
||||
build:
|
||||
context: .
|
||||
dockerfile: docker/dev/Dockerfile.main
|
||||
ports:
|
||||
- "5000:3000"
|
||||
env_file:
|
||||
- ./backend/.env
|
||||
depends_on:
|
||||
db:
|
||||
condition: service_healthy
|
||||
restart: unless-stopped
|
||||
|
||||
frontend:
|
||||
build:
|
||||
context: .
|
||||
dockerfile: docker/dev/Dockerfile.frontend
|
||||
ports:
|
||||
- "3000:3000"
|
||||
env_file:
|
||||
- ./frontend/.env
|
||||
restart: unless-stopped
|
||||
|
||||
db:
|
||||
image: postgres:15-alpine
|
||||
container_name: postgres_db
|
||||
environment:
|
||||
POSTGRES_USER: user
|
||||
POSTGRES_PASSWORD: password
|
||||
POSTGRES_DB: mydb
|
||||
volumes:
|
||||
- postgres_data:/var/lib/postgresql/data
|
||||
healthcheck:
|
||||
test: ["CMD-SHELL", "pg_isready -U user -d mydb"]
|
||||
interval: 5s
|
||||
timeout: 5s
|
||||
retries: 5
|
||||
restart: unless-stopped
|
||||
|
||||
volumes:
|
||||
postgres_data:
|
||||
@@ -0,0 +1,19 @@
|
||||
ARG NODE_VERSION=22.11.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"]
|
||||
@@ -0,0 +1,24 @@
|
||||
ARG NODE_VERSION=22.11.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 5000
|
||||
|
||||
ENTRYPOINT [ "entrypoint.sh" ]
|
||||
|
||||
# This '$@' will be replaced by the CMD
|
||||
CMD ["npm", "start"]
|
||||
@@ -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 "$@"
|
||||
|
||||
@@ -22,3 +22,8 @@ dist-ssr
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
|
||||
#env files
|
||||
.env
|
||||
.env.*.local
|
||||
|
||||
|
||||
@@ -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
|
||||
- [@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
|
||||
## Project Structure
|
||||
|
||||
## 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
|
||||
export default defineConfig([
|
||||
globalIgnores(['dist']),
|
||||
{
|
||||
files: ['**/*.{ts,tsx}'],
|
||||
extends: [
|
||||
// Other configs...
|
||||
**3. Install Dependencies**
|
||||
npm install
|
||||
|
||||
// Remove tseslint.configs.recommended and replace with this
|
||||
tseslint.configs.recommendedTypeChecked,
|
||||
// Alternatively, use this for stricter rules
|
||||
tseslint.configs.strictTypeChecked,
|
||||
// Optionally, add this for stylistic rules
|
||||
tseslint.configs.stylisticTypeChecked,
|
||||
**4. Development**
|
||||
npm run dev
|
||||
|
||||
// Other configs...
|
||||
],
|
||||
languageOptions: {
|
||||
parserOptions: {
|
||||
project: ['./tsconfig.node.json', './tsconfig.app.json'],
|
||||
tsconfigRootDir: import.meta.dirname,
|
||||
},
|
||||
// other options...
|
||||
},
|
||||
},
|
||||
])
|
||||
```
|
||||
## Scripts
|
||||
|
||||
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:
|
||||
|
||||
```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...
|
||||
},
|
||||
},
|
||||
])
|
||||
```
|
||||
npm run dev: Starts the Vite development server with Hot Module Replacement.
|
||||
npm run build: Compiles TypeScript and builds the production-ready assets.
|
||||
|
||||
@@ -2,9 +2,9 @@
|
||||
<html lang="en">
|
||||
<head>
|
||||
<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" />
|
||||
<title>frontend</title>
|
||||
<title>GG Admin Dashboard</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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",
|
||||
|
||||
|
After Width: | Height: | Size: 15 KiB |
@@ -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>
|
||||
|
Before Width: | Height: | Size: 1.5 KiB |
@@ -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>
|
||||
|
||||
|
||||
@@ -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",
|
||||
},
|
||||
|
||||
@@ -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(
|
||||
"http://localhost:3000/api/upload",
|
||||
formData,
|
||||
{
|
||||
const response = await axios.post(`${baseURL}/upload`, formData, {
|
||||
headers: {
|
||||
"Content-Type": "multipart/form-data",
|
||||
},
|
||||
},
|
||||
);
|
||||
});
|
||||
|
||||
const {fileUrl} = response.data;
|
||||
onChange(fileUrl);
|
||||
|
||||
@@ -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));
|
||||
|
||||
setBlog(response);
|
||||
} catch (error) {
|
||||
console.error("Error fetching blog", error);
|
||||
const res = await getBlogByIdApi(Number(id));
|
||||
console.log({res});
|
||||
setBlog(res);
|
||||
} catch (err) {
|
||||
console.error("Error fetching blog", err);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
fetchBlogById();
|
||||
}, [id]); // ✅ FIXED dependency
|
||||
fetchBlog();
|
||||
}, [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 ">
|
||||
<Card>
|
||||
<CardContent className="p-6 space-y-4">
|
||||
{/* Back */}
|
||||
<div className="mx-auto flex flex-col ">
|
||||
{/* Back Button */}
|
||||
<Button
|
||||
variant="ghost"
|
||||
className="text-black-600 p-0"
|
||||
className="mb-4 w-fit text-black px-0"
|
||||
onClick={() => navigate(-1)}
|
||||
>
|
||||
← Back
|
||||
</Button>
|
||||
|
||||
{/* Title */}
|
||||
<h1 className="text-2xl md:text-4xl lg:text-5xl font-bold">
|
||||
{blog.title}
|
||||
</h1>
|
||||
<h1 className="text-3xl md:text-5xl font-bold mb-2">{blog.title}</h1>
|
||||
|
||||
{/* Meta */}
|
||||
<p className="text-gray-500 text-sm">
|
||||
<p className="text-gray-500 mb-4">
|
||||
{blog.writer} • {new Date(blog.createdAt).toLocaleDateString()}
|
||||
</p>
|
||||
|
||||
{/* Image */}
|
||||
{/* Image (only if exists) */}
|
||||
{blog.image?.trim() && (
|
||||
<img
|
||||
src={blog.image}
|
||||
alt={blog.title}
|
||||
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 */}
|
||||
<div className="space-y-3 text-gray-800 leading-relaxed">
|
||||
{blog.content?.blocks?.map((block: any, index: number) => (
|
||||
<p key={index}>{block.data?.text}</p>
|
||||
))}
|
||||
<div>
|
||||
{blog.content?.blocks?.map((block, index) => renderBlock(block, index))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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;
|
||||
@@ -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) => {
|
||||
|
||||
@@ -0,0 +1 @@
|
||||
/// <reference types="vite/client" />
|
||||