feat: add Bytescale image uploads

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}