main #1
83
src/components/ui/file-upload-field.tsx
Normal file
83
src/components/ui/file-upload-field.tsx
Normal file
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,6 +1,5 @@
|
|||
import { parseApiError } from '@/lib/auth-api';
|
||||
|
||||
const API_PREFIX = '/api';
|
||||
|
||||
function getBaseUrl(): string {
|
||||
return import.meta.env.VITE_API_BASE_URL ?? '';
|
||||
|
|
@ -52,15 +51,21 @@ 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}`;
|
||||
const url = `${getBaseUrl()}${resolved}`;
|
||||
return fetch(url, {
|
||||
...init,
|
||||
method,
|
||||
headers,
|
||||
body: body !== undefined ? JSON.stringify(body) : init?.body,
|
||||
body:
|
||||
body === undefined
|
||||
? init?.body
|
||||
: isFormData
|
||||
? (body as FormData)
|
||||
: JSON.stringify(body),
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -97,7 +102,7 @@ export async function apiDownloadBlob(
|
|||
const headers: Record<string, string> = { ...(init?.headers as Record<string, string>) };
|
||||
if (token) headers.Authorization = `Bearer ${token}`;
|
||||
|
||||
const url = `${getBaseUrl()}${API_PREFIX}${resolved}`;
|
||||
const url = `${getBaseUrl()}${resolved}`;
|
||||
const res = await fetch(url, { ...init, method: 'GET', headers });
|
||||
if (!res.ok) throw new Error(await parseApiError(res));
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,5 @@
|
|||
import type { RegisterHotelStaffDto, StaffAccess } from "@/lib/types";
|
||||
|
||||
const API_ROOT = "/api";
|
||||
|
||||
let getPropertyId: () => string | null = () => null;
|
||||
|
||||
/** Register property scope for hotel auth-API paths (e.g. staff management). */
|
||||
|
|
@ -31,7 +29,7 @@ function rewriteHotelPath(path: string): string {
|
|||
function apiUrl(path: string): string {
|
||||
const base = import.meta.env.VITE_API_BASE_URL ?? "";
|
||||
const resolved = rewriteHotelPath(path);
|
||||
return `${base}${API_ROOT}${resolved}`;
|
||||
return `${base}${resolved}`;
|
||||
}
|
||||
|
||||
export async function parseApiError(res: Response): Promise<string> {
|
||||
|
|
|
|||
|
|
@ -110,6 +110,7 @@ export interface RoomTypeCatalog {
|
|||
|
||||
export interface Room {
|
||||
id: string;
|
||||
imageKeys: string[];
|
||||
name: string;
|
||||
roomTypeSlug: string;
|
||||
floor?: string;
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user