file uploader and image updates

src/App.tsx

@@ -1,67 +1,87 @@
+import type { ComponentType } from "react";
 import { Navigate, Route, Routes } from "react-router-dom";
+import { Suspense, lazy } from "react";
 
 import { AppLayout } from "@/components/layout/AppLayout";
 import { useAuthStore } from "@/store/authStore";
-import { BookingDetailPage } from "@/pages/BookingDetailPage";
-import { BookingsPage } from "@/pages/BookingsPage";
-import { CalendarPage } from "@/pages/CalendarPage";
-import { CustomersPage } from "@/pages/CustomersPage";
-import { DashboardPage } from "@/pages/DashboardPage";
-import { DiscountCodesPage } from "@/pages/DiscountCodesPage";
-import { LoginPage } from "@/pages/LoginPage";
-import { NewBookingPage } from "@/pages/NewBookingPage";
-import { PaymentsPage } from "@/pages/PaymentsPage";
-import { ReferralCodesPage } from "@/pages/ReferralCodesPage";
-import { ReservationsPage } from "@/pages/ReservationsPage";
-import { RoomsPage } from "@/pages/RoomsPage";
-import { SettingsPage } from "@/pages/SettingsPage";
-import { TransactionsPage } from "@/pages/TransactionsPage";
-import { VisitsPage } from "@/pages/VisitsPage";
-import { ManageUsersPage } from "@/pages/ManageUsersPage";
-import { GuestServicesPage } from "@/pages/GuestServicesPage";
-import { LoyaltyPointsPage } from "@/pages/LoyaltyPointsPage";
-import { HotelRafflesPage } from "@/pages/HotelRafflesPage";
+import { Spinner } from "./components/ui/spinner";
+
+function lazyNamed<T extends ComponentType<unknown>, TModule extends Record<string, T>>(
+  importer: () => Promise<TModule>,
+  exportName: keyof TModule,
+) {
+  return lazy(async () => ({
+    default: (await importer())[exportName],
+  }));
+}
+
+// Lazy load pages
+const LoginPage = lazyNamed(() => import("@/pages/LoginPage"), "LoginPage");
+const DashboardPage = lazyNamed(() => import("@/pages/DashboardPage"), "DashboardPage");
+const ReservationsPage = lazyNamed(() => import("@/pages/ReservationsPage"), "ReservationsPage");
+const BookingsPage = lazyNamed(() => import("@/pages/BookingsPage"), "BookingsPage");
+const NewBookingPage = lazyNamed(() => import("@/pages/NewBookingPage"), "NewBookingPage");
+const BookingDetailPage = lazyNamed(() => import("@/pages/BookingDetailPage"), "BookingDetailPage");
+const CalendarPage = lazyNamed(() => import("@/pages/CalendarPage"), "CalendarPage");
+const RoomsPage = lazyNamed(() => import("@/pages/RoomsPage"), "RoomsPage");
+const GuestServicesPage = lazyNamed(() => import("@/pages/GuestServicesPage"), "GuestServicesPage");
+const LoyaltyPointsPage = lazyNamed(() => import("@/pages/LoyaltyPointsPage"), "LoyaltyPointsPage");
+const HotelRafflesPage = lazyNamed(() => import("@/pages/HotelRafflesPage"), "HotelRafflesPage");
+const CustomersPage = lazyNamed(() => import("@/pages/CustomersPage"), "CustomersPage");
+const TransactionsPage = lazyNamed(() => import("@/pages/TransactionsPage"), "TransactionsPage");
+const PaymentsPage = lazyNamed(() => import("@/pages/PaymentsPage"), "PaymentsPage");
+const VisitsPage = lazyNamed(() => import("@/pages/VisitsPage"), "VisitsPage");
+const DiscountCodesPage = lazyNamed(() => import("@/pages/DiscountCodesPage"), "DiscountCodesPage");
+const ReferralCodesPage = lazyNamed(() => import("@/pages/ReferralCodesPage"), "ReferralCodesPage");
+const ManageUsersPage = lazyNamed(() => import("@/pages/ManageUsersPage"), "ManageUsersPage");
+const SettingsPage = lazyNamed(() => import("@/pages/SettingsPage"), "SettingsPage");
 
 function ProtectedLayout() {
   const accessToken = useAuthStore((s) => s.accessToken);
   const bootstrapped = useAuthStore((s) => s.bootstrapped);
+
   if (!bootstrapped) {
     return (
       <div className="flex min-h-screen items-center justify-center text-muted-foreground">
-        Loading…
+        <Spinner />
       </div>
     );
   }
+
   if (!accessToken) return <Navigate to="/login" replace />;
   return <AppLayout />;
 }
 
 export default function App() {
   return (
-    <Routes>
-      <Route path="/login" element={<LoginPage />} />
-      <Route element={<ProtectedLayout />}>
-        <Route path="/" element={<Navigate to="/dashboard" replace />} />
-        <Route path="/dashboard" element={<DashboardPage />} />
-        <Route path="/reservations" element={<ReservationsPage />} />
-        <Route path="/bookings" element={<BookingsPage />} />
-        <Route path="/bookings/new" element={<NewBookingPage />} />
-        <Route path="/bookings/:id" element={<BookingDetailPage />} />
-        <Route path="/calendar" element={<CalendarPage />} />
-        <Route path="/rooms" element={<RoomsPage />} />
-        <Route path="/guest-services" element={<GuestServicesPage />} />
-        <Route path="/loyalty/points" element={<LoyaltyPointsPage />} />
-        <Route path="/loyalty/raffles" element={<HotelRafflesPage />} />
-        <Route path="/customers" element={<CustomersPage />} />
-        <Route path="/transactions" element={<TransactionsPage />} />
-        <Route path="/payments" element={<PaymentsPage />} />
-        <Route path="/marketing/visits" element={<VisitsPage />} />
-        <Route path="/marketing/discount-codes" element={<DiscountCodesPage />} />
-        <Route path="/marketing/referral-codes" element={<ReferralCodesPage />} />
-        <Route path="/settings/users" element={<ManageUsersPage />} />
-        <Route path="/settings" element={<SettingsPage />} />
-      </Route>
-      <Route path="*" element={<Navigate to="/dashboard" replace />} />
-    </Routes>
+    <Suspense fallback={<div className="p-4">Loading...</div>}>
+      <Routes>
+        <Route path="/login" element={<LoginPage />} />
+
+        <Route element={<ProtectedLayout />}>
+          <Route path="/" element={<Navigate to="/dashboard" replace />} />
+          <Route path="/dashboard" element={<DashboardPage />} />
+          <Route path="/reservations" element={<ReservationsPage />} />
+          <Route path="/bookings" element={<BookingsPage />} />
+          <Route path="/bookings/new" element={<NewBookingPage />} />
+          <Route path="/bookings/:id" element={<BookingDetailPage />} />
+          <Route path="/calendar" element={<CalendarPage />} />
+          <Route path="/rooms" element={<RoomsPage />} />
+          <Route path="/guest-services" element={<GuestServicesPage />} />
+          <Route path="/loyalty/points" element={<LoyaltyPointsPage />} />
+          <Route path="/loyalty/raffles" element={<HotelRafflesPage />} />
+          <Route path="/customers" element={<CustomersPage />} />
+          <Route path="/transactions" element={<TransactionsPage />} />
+          <Route path="/payments" element={<PaymentsPage />} />
+          <Route path="/marketing/visits" element={<VisitsPage />} />
+          <Route path="/marketing/discount-codes" element={<DiscountCodesPage />} />
+          <Route path="/marketing/referral-codes" element={<ReferralCodesPage />} />
+          <Route path="/settings/users" element={<ManageUsersPage />} />
+          <Route path="/settings" element={<SettingsPage />} />
+        </Route>
+
+        <Route path="*" element={<Navigate to="/dashboard" replace />} />
+      </Routes>
+    </Suspense>
   );
 }

src/components/ui/file-upload-field.tsx

@@ -0,0 +1,83 @@
+import { InputHTMLAttributes } from "react";
+
+import { cn } from "@/lib/utils";
+
+type FileUploadFieldProps = {
+  id: string;
+  label: string;
+  helperText: string;
+  files: File[];
+  multiple?: boolean;
+  required?: boolean;
+  accept?: string;
+  buttonLabel?: string;
+  emptyLabel?: string;
+  className?: string;
+  onChange: InputHTMLAttributes<HTMLInputElement>["onChange"];
+};
+
+export function FileUploadField({
+  id,
+  label,
+  helperText,
+  files,
+  multiple = false,
+  required = false,
+  accept = "image/*",
+  buttonLabel = "Choose files",
+  emptyLabel = "No files selected yet",
+  className,
+  onChange,
+}: FileUploadFieldProps) {
+  const hasFiles = files.length > 0;
+
+  return (
+    <div className={cn("space-y-2", className)}>
+      <label htmlFor={id} className="text-sm font-medium leading-none">
+        {label}
+      </label>
+      <label
+        htmlFor={id}
+        className={cn(
+          "flex cursor-pointer flex-col gap-3 rounded-xl border border-dashed px-4 py-4 transition-colors",
+          hasFiles
+            ? "border-primary/50 bg-primary/5"
+            : "border-input bg-muted/30 hover:border-primary/40 hover:bg-muted/50"
+        )}
+      >
+        <div className="flex items-center justify-between gap-3">
+          <div className="space-y-1">
+            <p className="text-sm font-medium">
+              {hasFiles ? `${files.length} file${files.length === 1 ? "" : "s"} selected` : emptyLabel}
+            </p>
+            <p className="text-xs text-muted-foreground">{helperText}</p>
+          </div>
+          <span className="rounded-lg border bg-background px-3 py-2 text-xs font-medium">
+            {buttonLabel}
+          </span>
+        </div>
+        {hasFiles && (
+          <div className="flex flex-wrap gap-2">
+            {files.map((file) => (
+              <span
+                key={`${file.name}-${file.size}-${file.lastModified}`}
+                className="rounded-full bg-background px-3 py-1 text-xs text-muted-foreground"
+              >
+                {file.name}
+              </span>
+            ))}
+          </div>
+        )}
+      </label>
+      <input
+        id={id}
+        type="file"
+        className="sr-only"
+        multiple={multiple}
+        required={required}
+        accept={accept}
+        onChange={onChange}
+      />
+    </div>
+  );
+}

src/lib/api.ts

@@ -52,7 +52,8 @@ async function request(
   const headers: Record<string, string> = {
     ...(init?.headers as Record<string, string>),
   };
-  if (body !== undefined) headers['Content-Type'] = 'application/json';
+  const isFormData = typeof FormData !== "undefined" && body instanceof FormData;
+  if (body !== undefined && !isFormData) headers["Content-Type"] = "application/json";
   if (token) headers.Authorization = `Bearer ${token}`;
 
   const url = `${getBaseUrl()}${API_PREFIX}${resolved}`;
@@ -60,7 +61,12 @@ async function request(
     ...init,
     method,
     headers,
-    body: body !== undefined ? JSON.stringify(body) : init?.body,
+    body:
+      body === undefined
+        ? init?.body
+        : isFormData
+          ? (body as FormData)
+          : JSON.stringify(body),
   });
 }
 

src/lib/types/index.ts

@@ -110,6 +110,7 @@ export interface RoomTypeCatalog {
 
 export interface Room {
   id: string;
+  imageKeys: string[];
   name: string;
   roomTypeSlug: string;
   floor?: string;

src/pages/GuestServicesPage.tsx

@@ -9,6 +9,7 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "@/components/ui/dialog";
+import { FileUploadField } from "@/components/ui/file-upload-field";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import {
@@ -54,6 +55,7 @@ const SPA_STATUS = ["PENDING", "CONFIRMED", "COMPLETED", "CANCELLED"] as const;
 
 type MenuItem = {
   id: string;
+  image?: string;
   name: string;
   category: string;
   unitPrice: string;
@@ -83,6 +85,7 @@ type LaundryRow = {
 
 type Offering = {
   id: string;
+  image?: string;
   kind: string;
   name: string;
   price: string;
@@ -112,14 +115,20 @@ export function GuestServicesPage() {
   const [loading, setLoading] = useState(true);
 
   const [mOpen, setMOpen] = useState(false);
+  const [mEditOpen, setMEditOpen] = useState(false);
+  const [editingMenuId, setEditingMenuId] = useState<string | null>(null);
   const [mName, setMName] = useState("");
   const [mCat, setMCat] = useState<(typeof MENU_CATS)[number]>("FOOD");
   const [mPrice, setMPrice] = useState("0");
+  const [mImageFile, setMImageFile] = useState<File | null>(null);
 
   const [oOpen, setOOpen] = useState(false);
+  const [oEditOpen, setOEditOpen] = useState(false);
+  const [editingOfferingId, setEditingOfferingId] = useState<string | null>(null);
   const [oKind, setOKind] = useState<(typeof OFFER_KINDS)[number]>("SPA_SESSION");
   const [oName, setOName] = useState("");
   const [oPrice, setOPrice] = useState("0");
+  const [oImageFile, setOImageFile] = useState<File | null>(null);
 
   const loadMenu = useCallback(async () => {
     const r = await apiGet<{ data: MenuItem[] }>("/menu/items");
@@ -158,30 +167,98 @@ export function GuestServicesPage() {
     void refresh();
   }, [refresh]);
 
-  async function addMenu(e: React.FormEvent) {
-    e.preventDefault();
-    await apiPost("/menu/items", {
-      name: mName,
-      category: mCat,
-      unitPrice: mPrice,
-      isAvailable: true,
-    });
-    setMOpen(false);
+  function resetMenuForm() {
+    setEditingMenuId(null);
     setMName("");
     setMPrice("0");
+    setMCat("FOOD");
+    setMImageFile(null);
+  }
+
+  async function addMenu(e: React.FormEvent) {
+    e.preventDefault();
+    const formData = new FormData();
+    formData.append("name", mName);
+    formData.append("category", mCat);
+    formData.append("unitPrice", mPrice);
+    formData.append("isAvailable", "true");
+    if (mImageFile) formData.append("image", mImageFile);
+
+    await apiPost("/menu/items", formData);
+    setMOpen(false);
+    resetMenuForm();
     void loadMenu();
   }
 
+  function startMenuEdit(item: MenuItem) {
+    setEditingMenuId(item.id);
+    setMName(item.name);
+    setMCat(item.category as (typeof MENU_CATS)[number]);
+    setMPrice(item.unitPrice);
+    setMImageFile(null);
+    setMEditOpen(true);
+  }
+
+  async function updateMenu(e: React.FormEvent) {
+    e.preventDefault();
+    if (!editingMenuId) return;
+
+    const formData = new FormData();
+    formData.append("name", mName);
+    formData.append("category", mCat);
+    formData.append("unitPrice", mPrice);
+    if (mImageFile) formData.append("image", mImageFile);
+
+    await apiPatch(`/menu/items/${editingMenuId}`, formData);
+    setMEditOpen(false);
+    resetMenuForm();
+    void loadMenu();
+  }
+
+  function resetOfferingForm() {
+    setEditingOfferingId(null);
+    setOKind("SPA_SESSION");
+    setOName("");
+    setOPrice("0");
+    setOImageFile(null);
+  }
+
   async function addOffering(e: React.FormEvent) {
     e.preventDefault();
-    await apiPost("/spa/offerings", {
-      kind: oKind,
-      name: oName,
-      price: oPrice,
-    });
+    const formData = new FormData();
+    formData.append("kind", oKind);
+    formData.append("name", oName);
+    formData.append("price", oPrice);
+    if (oImageFile) formData.append("image", oImageFile);
+
+    await apiPost("/spa/offerings", formData);
     setOOpen(false);
-    setOName("");
-    setOPrice("0");
+    resetOfferingForm();
+    void loadSpa();
+  }
+
+  function startOfferingEdit(offering: Offering) {
+    setEditingOfferingId(offering.id);
+    setOKind(offering.kind as (typeof OFFER_KINDS)[number]);
+    setOName(offering.name);
+    setOPrice(offering.price);
+    setOImageFile(null);
+    setOEditOpen(true);
+  }
+
+  async function updateOffering(e: React.FormEvent) {
+    e.preventDefault();
+    if (!editingOfferingId) return;
+
+    const formData = new FormData();
+    formData.append("kind", oKind);
+    formData.append("name", oName);
+    formData.append("price", oPrice);
+    if (oImageFile) formData.append("image", oImageFile);
+
+    await apiPatch(`/spa/offerings/${editingOfferingId}`, formData);
+    setOEditOpen(false);
+    resetOfferingForm();
     void loadSpa();
   }
 
@@ -217,7 +294,14 @@ export function GuestServicesPage() {
             <CardHeader className="flex flex-row items-center justify-between">
               <CardTitle className="text-base">Menu items</CardTitle>
               {canOps && (
-                <Dialog open={mOpen} onOpenChange={setMOpen}>
+                <>
+                <Dialog
+                  open={mOpen}
+                  onOpenChange={(next) => {
+                    setMOpen(next);
+                    if (!next) resetMenuForm();
+                  }}
+                >
                   <DialogTrigger asChild>
                     <Button size="sm">Add item</Button>
                   </DialogTrigger>
@@ -252,24 +336,95 @@ export function GuestServicesPage() {
                           </SelectContent>
                         </Select>
                       </div>
-                      <div className="space-y-2">
-                        <Label>Unit price (ETB)</Label>
-                        <Input
+                       <div className="space-y-2">
+                         <Label>Unit price (ETB)</Label>
+                         <Input
                           required
                           value={mPrice}
-                          onChange={(e) => setMPrice(e.target.value)}
+                           onChange={(e) => setMPrice(e.target.value)}
+                         />
+                       </div>
+                        <FileUploadField
+                          id="menu-item-image"
+                          label="Image"
+                          required
+                          files={mImageFile ? [mImageFile] : []}
+                          buttonLabel="Upload image"
+                          emptyLabel="Select a menu item image"
+                          helperText="Add the image guests will see for this menu item."
+                          onChange={(e) => setMImageFile(e.target.files?.[0] ?? null)}
                         />
-                      </div>
-                      <Button type="submit">Save</Button>
-                    </form>
-                  </DialogContent>
-                </Dialog>
+                       <Button type="submit">Save</Button>
+                     </form>
+                   </DialogContent>
+                 </Dialog>
+                 <Dialog
+                   open={mEditOpen}
+                   onOpenChange={(next) => {
+                     setMEditOpen(next);
+                     if (!next) resetMenuForm();
+                   }}
+                 >
+                   <DialogContent>
+                     <DialogHeader>
+                       <DialogTitle>Edit menu item</DialogTitle>
+                     </DialogHeader>
+                     <form onSubmit={updateMenu} className="grid gap-3">
+                       <div className="space-y-2">
+                         <Label>Name</Label>
+                         <Input
+                           required
+                           value={mName}
+                           onChange={(e) => setMName(e.target.value)}
+                         />
+                       </div>
+                       <div className="space-y-2">
+                         <Label>Category</Label>
+                         <Select
+                           value={mCat}
+                           onValueChange={(v) => setMCat(v as (typeof MENU_CATS)[number])}
+                         >
+                           <SelectTrigger>
+                             <SelectValue />
+                           </SelectTrigger>
+                           <SelectContent>
+                             {MENU_CATS.map((c) => (
+                               <SelectItem key={c} value={c}>
+                                 {c}
+                               </SelectItem>
+                             ))}
+                           </SelectContent>
+                         </Select>
+                       </div>
+                       <div className="space-y-2">
+                         <Label>Unit price (ETB)</Label>
+                         <Input
+                           required
+                           value={mPrice}
+                           onChange={(e) => setMPrice(e.target.value)}
+                         />
+                       </div>
+                        <FileUploadField
+                          id="menu-item-image-edit"
+                          label="Replace image"
+                          files={mImageFile ? [mImageFile] : []}
+                          buttonLabel="Choose replacement"
+                          emptyLabel="Keep current menu item image"
+                          helperText="Leave this empty to keep the current image."
+                          onChange={(e) => setMImageFile(e.target.files?.[0] ?? null)}
+                        />
+                       <Button type="submit">Update</Button>
+                     </form>
+                   </DialogContent>
+                 </Dialog>
+                </>
               )}
             </CardHeader>
             <CardContent>
               <Table>
                 <TableHeader>
                   <TableRow>
+                    <TableHead></TableHead>
                     <TableHead>Name</TableHead>
                     <TableHead>Category</TableHead>
                     <TableHead>Price</TableHead>
@@ -280,23 +435,33 @@ export function GuestServicesPage() {
                 <TableBody>
                   {menu.map((it) => (
                     <TableRow key={it.id}>
+                      <TableCell>
+                        <img src={it.image} alt={it.name} width={48} height={48} />
+                      </TableCell>
                       <TableCell>{it.name}</TableCell>
                       <TableCell className="text-xs">{it.category}</TableCell>
                       <TableCell>{formatMoney(Number(it.unitPrice), "ETB")}</TableCell>
                       <TableCell>{it.isAvailable ? "Yes" : "No"}</TableCell>
                       {canOps && (
                         <TableCell>
-                          <Button
-                            size="sm"
-                            variant="ghost"
-                            onClick={() =>
-                              void apiPatch(`/menu/items/${it.id}`, {
-                                isAvailable: !it.isAvailable,
-                              }).then(() => loadMenu())
-                            }
-                          >
-                            Toggle
-                          </Button>
+                          <div className="flex justify-end gap-2">
+                            <Button size="sm" variant="ghost" onClick={() => startMenuEdit(it)}>
+                              Edit
+                            </Button>
+                            <Button
+                              size="sm"
+                              variant="ghost"
+                              onClick={() => {
+                                const formData = new FormData();
+                                formData.append("isAvailable", String(!it.isAvailable));
+                                void apiPatch(`/menu/items/${it.id}`, formData).then(() =>
+                                  loadMenu()
+                                );
+                              }}
+                            >
+                              Change availability
+                            </Button>
+                          </div>
                         </TableCell>
                       )}
                     </TableRow>
@@ -344,7 +509,7 @@ export function GuestServicesPage() {
                               }).then(() => loadRs())
                             }
                           >
-                            <SelectTrigger className="h-8 w-[160px]">
+                            <SelectTrigger className="h-8 w-40">
                               <SelectValue />
                             </SelectTrigger>
                             <SelectContent>
@@ -399,7 +564,7 @@ export function GuestServicesPage() {
                               }).then(() => loadLaundry())
                             }
                           >
-                            <SelectTrigger className="h-8 w-[160px]">
+                            <SelectTrigger className="h-8 w-40">
                               <SelectValue />
                             </SelectTrigger>
                             <SelectContent>
@@ -427,7 +592,14 @@ export function GuestServicesPage() {
             <CardHeader className="flex flex-row items-center justify-between">
               <CardTitle className="text-base">Offerings</CardTitle>
               {canOps && (
-                <Dialog open={oOpen} onOpenChange={setOOpen}>
+                <>
+                <Dialog
+                  open={oOpen}
+                  onOpenChange={(next) => {
+                    setOOpen(next);
+                    if (!next) resetOfferingForm();
+                  }}
+                >
                   <DialogTrigger asChild>
                     <Button size="sm">Add offering</Button>
                   </DialogTrigger>
@@ -462,37 +634,133 @@ export function GuestServicesPage() {
                           onChange={(e) => setOName(e.target.value)}
                         />
                       </div>
-                      <div className="space-y-2">
-                        <Label>Price (ETB)</Label>
-                        <Input
+                       <div className="space-y-2">
+                         <Label>Price (ETB)</Label>
+                         <Input
                           required
                           value={oPrice}
-                          onChange={(e) => setOPrice(e.target.value)}
+                           onChange={(e) => setOPrice(e.target.value)}
+                         />
+                       </div>
+                        <FileUploadField
+                          id="offering-image"
+                          label="Image"
+                          required
+                          files={oImageFile ? [oImageFile] : []}
+                          buttonLabel="Upload image"
+                          emptyLabel="Select a spa or gym image"
+                          helperText="Add the image that represents this spa or gym offering."
+                          onChange={(e) => setOImageFile(e.target.files?.[0] ?? null)}
                         />
-                      </div>
-                      <Button type="submit">Save</Button>
-                    </form>
-                  </DialogContent>
-                </Dialog>
+                       <Button type="submit">Save</Button>
+                     </form>
+                   </DialogContent>
+                 </Dialog>
+                 <Dialog
+                   open={oEditOpen}
+                   onOpenChange={(next) => {
+                     setOEditOpen(next);
+                     if (!next) resetOfferingForm();
+                   }}
+                 >
+                   <DialogContent>
+                     <DialogHeader>
+                       <DialogTitle>Edit offering</DialogTitle>
+                     </DialogHeader>
+                     <form onSubmit={updateOffering} className="grid gap-3">
+                       <div className="space-y-2">
+                         <Label>Kind</Label>
+                         <Select
+                           value={oKind}
+                           onValueChange={(v) => setOKind(v as (typeof OFFER_KINDS)[number])}
+                         >
+                           <SelectTrigger>
+                             <SelectValue />
+                           </SelectTrigger>
+                           <SelectContent>
+                             {OFFER_KINDS.map((k) => (
+                               <SelectItem key={k} value={k}>
+                                 {k}
+                               </SelectItem>
+                             ))}
+                           </SelectContent>
+                         </Select>
+                       </div>
+                       <div className="space-y-2">
+                         <Label>Name</Label>
+                         <Input
+                           required
+                           value={oName}
+                           onChange={(e) => setOName(e.target.value)}
+                         />
+                       </div>
+                       <div className="space-y-2">
+                         <Label>Price (ETB)</Label>
+                         <Input
+                           required
+                           value={oPrice}
+                           onChange={(e) => setOPrice(e.target.value)}
+                         />
+                       </div>
+                        <FileUploadField
+                          id="offering-image-edit"
+                          label="Replace image"
+                          files={oImageFile ? [oImageFile] : []}
+                          buttonLabel="Choose replacement"
+                          emptyLabel="Keep current offering image"
+                          helperText="Leave this empty to keep the current image."
+                          onChange={(e) => setOImageFile(e.target.files?.[0] ?? null)}
+                        />
+                       <Button type="submit">Update</Button>
+                     </form>
+                   </DialogContent>
+                 </Dialog>
+                </>
               )}
             </CardHeader>
             <CardContent>
               <Table>
                 <TableHeader>
-                  <TableRow>
-                    <TableHead>Name</TableHead>
-                    <TableHead>Kind</TableHead>
-                    <TableHead>Price</TableHead>
-                    <TableHead>Active</TableHead>
-                  </TableRow>
+                   <TableRow>
+                     <TableHead></TableHead>
+                     <TableHead>Name</TableHead>
+                     <TableHead>Kind</TableHead>
+                     <TableHead>Price</TableHead>
+                     <TableHead>Active</TableHead>
+                     {canOps && <TableHead />}
+                   </TableRow>
                 </TableHeader>
                 <TableBody>
                   {offerings.map((x) => (
                     <TableRow key={x.id}>
-                      <TableCell>{x.name}</TableCell>
-                      <TableCell className="text-xs">{x.kind}</TableCell>
-                      <TableCell>{formatMoney(Number(x.price), "ETB")}</TableCell>
-                      <TableCell>{x.isActive ? "Yes" : "No"}</TableCell>
+                      <TableCell>
+                        <img src={x.image} alt={x.name} width={48} height={48} />
+                      </TableCell>
+                     <TableCell>{x.name}</TableCell>
+                     <TableCell className="text-xs">{x.kind}</TableCell>
+                     <TableCell>{formatMoney(Number(x.price), "ETB")}</TableCell>
+                     <TableCell>{x.isActive ? "Yes" : "No"}</TableCell>
+                     {canOps && (
+                       <TableCell className="text-right">
+
+                         <Button size="sm" variant="ghost" onClick={() => startOfferingEdit(x)}>
+                           Edit
+                         </Button>
+                            <Button
+                              size="sm"
+                              variant="ghost"
+                              onClick={() => {
+                                const formData = new FormData();
+                                formData.append("isActive", String(!x.isActive));
+                                void apiPatch(`/spa/offerings/${x.id}`, formData).then(() =>
+                                  loadSpa()
+                                );
+                              }}
+                            >
+                              Change availability
+                            </Button>
+                       </TableCell>
+                     )}
                     </TableRow>
                   ))}
                 </TableBody>

src/pages/RoomsPage.tsx

@@ -10,6 +10,7 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "@/components/ui/dialog";
+import { FileUploadField } from "@/components/ui/file-upload-field";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import {
@@ -27,7 +28,7 @@ import {
   TableHeader,
   TableRow,
 } from "@/components/ui/table";
-import { apiGet, apiPost } from "@/lib/api";
+import { apiGet, apiPatch, apiPost } from "@/lib/api";
 import { Spinner } from "@/components/ui/spinner";
 import {
   isLikelyApiHotelRoom,
@@ -44,113 +45,254 @@ export function RoomsPage() {
   const [loading, setLoading] = useState(true);
   const [submitting, setSubmitting] = useState(false);
   const [open, setOpen] = useState(false);
+  const [editOpen, setEditOpen] = useState(false);
+  const [editingRoomId, setEditingRoomId] = useState<string | null>(null);
   const [name, setName] = useState("");
   const [slug, setSlug] = useState(ROOM_CATALOGUE[0].slug);
   const [maxGuests, setMaxGuests] = useState("2");
   const [baseRate, setBaseRate] = useState("120");
+  const [imageFiles, setImageFiles] = useState<File[]>([]);
 
   function load() {
     setLoading(true);
-    apiGet<{ data: unknown[] }>("/rooms").then((r) => {
-      const mapped = r.data.map((row) =>
-        isLikelyApiHotelRoom(row) ? mapApiRoomToRoom(row) : (row as Room)
-      );
-      setRooms(mapped);
-    }).finally(() => setLoading(false));
+    apiGet<{ data: unknown[] }>("/rooms")
+      .then((r) => {
+        const mapped = r.data.map((row) =>
+          isLikelyApiHotelRoom(row) ? mapApiRoomToRoom(row) : (row as Room)
+        );
+        setRooms(mapped);
+      })
+      .finally(() => setLoading(false));
   }
 
   useEffect(() => {
     load();
   }, [selectedPropertyId]);
 
+  function resetForm() {
+    setEditingRoomId(null);
+    setName("");
+    setSlug(ROOM_CATALOGUE[0].slug);
+    setMaxGuests("2");
+    setBaseRate("120");
+    setImageFiles([]);
+  }
+
   async function addRoom(e: React.FormEvent) {
     e.preventDefault();
     setSubmitting(true);
     try {
-      await apiPost<Room>("/rooms", {
-        name,
-        roomType: slug,
-        maxGuests: Number(maxGuests),
-        baseRate: Number(baseRate),
-      });
+      const formData = new FormData();
+      formData.append("name", name);
+      formData.append("roomType", slug);
+      formData.append("maxGuests", maxGuests);
+      formData.append("baseRate", baseRate);
+      imageFiles.forEach((file) => formData.append("images", file));
+
+      await apiPost<Room>("/rooms", formData);
       setOpen(false);
-      setName("");
+      resetForm();
       load();
     } finally {
       setSubmitting(false);
     }
   }
 
-  if (loading && rooms.length === 0) return (
-    <div className="flex min-h-[400px] items-center justify-center">
-      <Spinner size={32} />
-    </div>
-  );
+  function startEdit(room: Room) {
+    setEditingRoomId(room.id);
+    setName(room.name);
+    setSlug(room.roomTypeSlug);
+    setMaxGuests(String(room.maxGuests));
+    setBaseRate(String(room.baseRate));
+    setImageFiles([]);
+    setEditOpen(true);
+  }
+
+  async function updateRoom(e: React.FormEvent) {
+    e.preventDefault();
+    if (!editingRoomId) return;
+
+    setSubmitting(true);
+    try {
+      const formData = new FormData();
+      formData.append("name", name);
+      formData.append("roomType", slug);
+      formData.append("maxGuests", maxGuests);
+      formData.append("baseRate", baseRate);
+      imageFiles.forEach((file) => formData.append("images", file));
+
+      await apiPatch<Room>(`/rooms/${editingRoomId}`, formData);
+      setEditOpen(false);
+      resetForm();
+      load();
+    } finally {
+      setSubmitting(false);
+    }
+  }
+
+  if (loading && rooms.length === 0)
+    return (
+      <div className="flex min-h-[400px] items-center justify-center">
+        <Spinner size={32} />
+      </div>
+    );
 
   return (
     <div className="space-y-6">
       <div className="flex items-center justify-between">
         <h1 className="text-2xl font-bold">Rooms</h1>
-        <Dialog open={open} onOpenChange={setOpen}>
-          <DialogTrigger asChild>
-            <Button>+ Add room</Button>
-          </DialogTrigger>
-          <DialogContent>
-            <DialogHeader>
-              <DialogTitle>Add room</DialogTitle>
-            </DialogHeader>
-            <form onSubmit={addRoom} className="grid gap-3">
-              <div className="space-y-2">
-                <Label>Unit name</Label>
-                <Input
+        <div className="flex items-center gap-2">
+          <Dialog
+            open={open}
+            onOpenChange={(next) => {
+              setOpen(next);
+              if (!next) resetForm();
+            }}
+          >
+            <DialogTrigger asChild>
+              <Button>+ Add room</Button>
+            </DialogTrigger>
+            <DialogContent>
+              <DialogHeader>
+                <DialogTitle>Add room</DialogTitle>
+              </DialogHeader>
+              <form onSubmit={addRoom} className="grid gap-3">
+                <div className="space-y-2">
+                  <Label>Unit name</Label>
+                  <Input
+                    required
+                    placeholder="Room 104"
+                    value={name}
+                    onChange={(e) => setName(e.target.value)}
+                  />
+                </div>
+                <div className="space-y-2">
+                  <Label>Type</Label>
+                  <Select value={slug} onValueChange={setSlug}>
+                    <SelectTrigger>
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {ROOM_CATALOGUE.map((r) => (
+                        <SelectItem key={r.slug} value={r.slug}>
+                          {r.name}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </div>
+                <div className="grid grid-cols-2 gap-3">
+                  <div className="space-y-2">
+                    <Label>Max guests</Label>
+                    <Input
+                      type="number"
+                      value={maxGuests}
+                      onChange={(e) => setMaxGuests(e.target.value)}
+                    />
+                  </div>
+                  <div className="space-y-2">
+                    <Label>Base rate</Label>
+                    <Input
+                      type="number"
+                      value={baseRate}
+                      onChange={(e) => setBaseRate(e.target.value)}
+                    />
+                  </div>
+                </div>
+                <FileUploadField
+                  id="room-images"
+                  label="Images"
+                  multiple
                   required
-                  placeholder="Room 104"
-                  value={name}
-                  onChange={(e) => setName(e.target.value)}
+                  files={imageFiles}
+                  buttonLabel="Upload images"
+                  emptyLabel="Select room images"
+                  helperText="Add one or more room photos. This is required when creating a room."
+                  onChange={(e) => setImageFiles(Array.from(e.target.files ?? []))}
                 />
-              </div>
-              <div className="space-y-2">
-                <Label>Type</Label>
-                <Select value={slug} onValueChange={setSlug}>
-                  <SelectTrigger>
-                    <SelectValue />
-                  </SelectTrigger>
-                  <SelectContent>
-                    {ROOM_CATALOGUE.map((r) => (
-                      <SelectItem key={r.slug} value={r.slug}>
-                        {r.name}
-                      </SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
-              </div>
-              <div className="grid grid-cols-2 gap-3">
+                <Button type="submit" loading={submitting}>
+                  Save
+                </Button>
+              </form>
+            </DialogContent>
+          </Dialog>
+
+          <Dialog
+            open={editOpen}
+            onOpenChange={(next) => {
+              setEditOpen(next);
+              if (!next) resetForm();
+            }}
+          >
+            <DialogContent>
+              <DialogHeader>
+                <DialogTitle>Edit room</DialogTitle>
+              </DialogHeader>
+              <form onSubmit={updateRoom} className="grid gap-3">
                 <div className="space-y-2">
-                  <Label>Max guests</Label>
+                  <Label>Unit name</Label>
                   <Input
-                    type="number"
-                    value={maxGuests}
-                    onChange={(e) => setMaxGuests(e.target.value)}
+                    required
+                    placeholder="Room 104"
+                    value={name}
+                    onChange={(e) => setName(e.target.value)}
                   />
                 </div>
                 <div className="space-y-2">
-                  <Label>Base rate</Label>
-                  <Input
-                    type="number"
-                    value={baseRate}
-                    onChange={(e) => setBaseRate(e.target.value)}
-                  />
+                  <Label>Type</Label>
+                  <Select value={slug} onValueChange={setSlug}>
+                    <SelectTrigger>
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {ROOM_CATALOGUE.map((r) => (
+                        <SelectItem key={r.slug} value={r.slug}>
+                          {r.name}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
                 </div>
-              </div>
-              <Button type="submit" loading={submitting}>Save</Button>
-            </form>
-          </DialogContent>
-        </Dialog>
+                <div className="grid grid-cols-2 gap-3">
+                  <div className="space-y-2">
+                    <Label>Max guests</Label>
+                    <Input
+                      type="number"
+                      value={maxGuests}
+                      onChange={(e) => setMaxGuests(e.target.value)}
+                    />
+                  </div>
+                  <div className="space-y-2">
+                    <Label>Base rate</Label>
+                    <Input
+                      type="number"
+                      value={baseRate}
+                      onChange={(e) => setBaseRate(e.target.value)}
+                    />
+                  </div>
+                </div>
+                <FileUploadField
+                  id="room-images-edit"
+                  label="Replace images"
+                  multiple
+                  files={imageFiles}
+                  buttonLabel="Choose replacements"
+                  emptyLabel="Keep current room images"
+                  helperText="Leave this empty to keep the current images, or upload new files to replace them."
+                  onChange={(e) => setImageFiles(Array.from(e.target.files ?? []))}
+                />
+                <Button type="submit" loading={submitting}>
+                  Update
+                </Button>
+              </form>
+            </DialogContent>
+          </Dialog>
+        </div>
       </div>
 
       <Card className="rounded-2xl">
         <CardHeader>
-          <CardTitle className="text-base">Inventory</CardTitle>
+          <CardTitle className="text-base">List</CardTitle>
         </CardHeader>
         <CardContent className="hidden md:block">
           <Table>
@@ -161,11 +303,27 @@ export function RoomsPage() {
                 <TableHead>Guests</TableHead>
                 <TableHead>Rate</TableHead>
                 <TableHead>Status</TableHead>
+                <TableHead />
               </TableRow>
             </TableHeader>
             <TableBody>
               {rooms.map((r) => (
                 <TableRow key={r.id}>
+                  <TableCell>
+                    {r.imageKeys?.length > 0 ? (
+                      <img
+                        src={r.imageKeys[0]}
+                        alt={r.name}
+                        width={48}
+                        height={48}
+                        className="object-cover rounded"
+                      />
+                    ) : (
+                      <div className="w-12 h-12 flex items-center justify-center text-xs text-gray-400 border rounded">
+                        No Image
+                      </div>
+                    )}
+                  </TableCell>
                   <TableCell className="font-medium">{r.name}</TableCell>
                   <TableCell className="text-sm text-muted-foreground">
                     {r.roomTypeSlug}
@@ -175,6 +333,11 @@ export function RoomsPage() {
                   <TableCell>
                     <Badge variant="secondary">{r.status}</Badge>
                   </TableCell>
+                  <TableCell className="text-right">
+                    <Button size="sm" variant="ghost" onClick={() => startEdit(r)}>
+                      Edit
+                    </Button>
+                  </TableCell>
                 </TableRow>
               ))}
             </TableBody>
@@ -187,7 +350,12 @@ export function RoomsPage() {
               <p className="text-muted-foreground">
                 {r.roomTypeSlug} · {formatMoney(r.baseRate)}
               </p>
-              <Badge className="mt-2">{r.status}</Badge>
+              <div className="mt-2 flex items-center justify-between gap-2">
+                <Badge>{r.status}</Badge>
+                <Button size="sm" variant="ghost" onClick={() => startEdit(r)}>
+                  Edit
+                </Button>
+              </div>
             </div>
           ))}
         </CardContent>

vite.config.ts

@@ -1,21 +1,42 @@
 import path from "node:path";
 import tailwindcss from "@tailwindcss/vite";
 import react from "@vitejs/plugin-react";
-import { defineConfig } from "vite";
+import { defineConfig, loadEnv } from "vite";
 
-export default defineConfig({
-  plugins: [react(), tailwindcss()],
-  server: {
-    proxy: {
-      "/api": {
-        target: process.env.VITE_PROXY_TARGET ?? "http://localhost:3000",
-        changeOrigin: true,
+export default defineConfig(({ mode }) => {
+  const isProduction = mode === "production";
+  const env = loadEnv(mode, process.cwd(), "");
+
+  const backendUrl =
+    env.VITE_PROXY_TARGET?.replace(/\/api\/?$/, "") ||
+    "http://localhost:3000";
+
+  return {
+    plugins: [react(), tailwindcss()],
+
+    resolve: {
+      alias: {
+        "@": path.resolve(__dirname, "./src"),
       },
     },
-  },
-  resolve: {
-    alias: {
-      "@": path.resolve(__dirname, "./src"),
+
+    server: {
+      proxy: {
+        "/api": {
+          target: backendUrl,
+          changeOrigin: true,
+        },
+      },
     },
-  },
+
+    build: {
+      target: "esnext",
+      minify: "esbuild",
+      sourcemap: !isProduction,
+      reportCompressedSize: false,
+    },
+    esbuild: {
+      drop: isProduction ? ["console", "debugger"] : [],
+    },
+  };
 });