feat: add Bytescale image uploads

frontend/src/api/department.ts

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

frontend/src/api/doctor.ts

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

frontend/src/components/BytescaleUploader/BytescaleUploader.tsx

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

frontend/src/pages/Department.tsx

@@ -1,5 +1,6 @@
 import { useState, useEffect, useCallback } from "react";
 import { AxiosError } from "axios";
+import { BytescaleUploader } from "@/components/BytescaleUploader/BytescaleUploader";
 
 import {
 	getDepartmentsApi,
@@ -45,6 +46,7 @@ import {
 interface Department {
 	departmentId: string;
 	name: string;
+	image?: string;
 	para1: string;
 	para2: string;
 	para3: string;
@@ -71,6 +73,7 @@ export default function DepartmentPage() {
 	const [form, setForm] = useState<Department>({
 		departmentId: "",
 		name: "",
+		image: "",
 		para1: "",
 		para2: "",
 		para3: "",
@@ -132,6 +135,7 @@ export default function DepartmentPage() {
 		setForm({
 			departmentId: "",
 			name: "",
+			image: "",
 			para1: "",
 			para2: "",
 			para3: "",
@@ -393,6 +397,14 @@ export default function DepartmentPage() {
 					</DialogHeader>
 
 					<div className="space-y-4">
+						<div className="space-y-2">
+							<label className="text-sm font-semibold">Department Image</label>
+							<BytescaleUploader
+								value={form.image}
+								folderPath="/departments"
+								onChange={(url) => setForm({ ...form, image: url })}
+							/>
+						</div>
 						<Input
 							name="departmentId"
 							value={form.departmentId}

frontend/src/pages/Doctor.tsx

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

frontend/src/pages/newsMedia.tsx

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