Compare commits
2 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 671a3c4e3a | |||
| e356aa8fd9 |
@@ -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
|
||||
```
|
||||
+1
-5
@@ -14,15 +14,11 @@ 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"];
|
||||
@@ -39,6 +35,7 @@ const corsOptions = {
|
||||
allowedHeaders: "*",
|
||||
};
|
||||
|
||||
app.use(express.json());
|
||||
app.use(cors(corsOptions));
|
||||
|
||||
app.use("/api/departments", departmentRoutes);
|
||||
@@ -54,7 +51,6 @@ 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, () => {
|
||||
|
||||
@@ -1,267 +0,0 @@
|
||||
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 +0,0 @@
|
||||
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,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:
|
||||
- "5173:5173"
|
||||
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,17 @@
|
||||
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
|
||||
|
||||
EXPOSE 5173
|
||||
|
||||
# Serve built app (no hot reload)
|
||||
CMD ["npm", "run", "preview", "--", "--host", "0.0.0.0"]
|
||||
@@ -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", "run", "dev"]
|
||||
@@ -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 "$@"
|
||||
|
||||
Generated
-7
@@ -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",
|
||||
|
||||
@@ -21,7 +21,6 @@ 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 (
|
||||
@@ -47,7 +46,6 @@ 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,158 +0,0 @@
|
||||
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;
|
||||
Reference in New Issue
Block a user