/* global React, Icon, Modal, Pill, StatusPill, Field, formatBaht, formatDateTH, DATA, DB */
const { useState: useStateR, useMemo: useMemoR } = React;
function Rooms({ rooms, setRooms, onOpenInvoice, onOpenReceipt }) {
const [tab, setTab] = useStateR("all");
const [view, setView] = useStateR("floor");
const [query, setQuery] = useStateR("");
const [active, setActive] = useStateR(null); // selected room for detail
const [adding, setAdding] = useStateR(false);
const [newRoom, setNewRoom] = useStateR({ no: "", floor: "", type: "monthly", size: "ห้องมาตรฐาน 22 ตร.ม.", rent: "", waterRate: "25", electricRate: "8", deposit: "" });
const [meterFor, setMeterFor] = useStateR(null);
const [editPriceFor, setEditPriceFor] = useStateR(null);
const [promo, setPromo] = useStateR(false);
const filtered = useMemoR(() => {
return rooms.filter(r => {
if (tab === "monthly" && r.type !== "monthly") return false;
if (tab === "daily" && r.type !== "daily") return false;
if (tab === "vacant" && r.status !== "vacant") return false;
if (tab === "overdue" && r.status !== "overdue") return false;
if (query && !(r.no.includes(query) || (r.customer && r.customer.name.includes(query)))) return false;
return true;
});
}, [rooms, tab, query]);
const byFloor = useMemoR(() => {
const out = {};
filtered.forEach(r => { (out[r.floor] = out[r.floor] || []).push(r); });
Object.keys(out).forEach(f => {
out[f].sort((a, b) => a.no.localeCompare(b.no, undefined, { numeric: true, sensitivity: "base" }));
});
return out;
}, [filtered]);
const counts = useMemoR(() => ({
all: rooms.length,
monthly: rooms.filter(r => r.type === "monthly").length,
daily: rooms.filter(r => r.type === "daily").length,
vacant: rooms.filter(r => r.status === "vacant").length,
overdue: rooms.filter(r => r.status === "overdue").length,
}), [rooms]);
const updateRoom = (no, patch) => {
// optimistic UI update
setRooms(rs => rs.map(r => r.no === no ? { ...r, ...patch } : r));
if (active && active.no === no) setActive(a => ({ ...a, ...patch }));
// persist to DB — detect check-in vs regular update
const currentRoom = rooms.find(r => r.no === no);
if (patch.customer && !currentRoom?.customer) {
// new check-in: update room status + create customer + tenant
DB.updateRoom(no, { status: patch.status }).catch(console.error);
DB.checkIn(no, patch.customer).catch(console.error);
} else {
DB.updateRoom(no, patch).catch(console.error);
}
};
const deleteRoom = (no) => {
if (!confirm(`ต้องการลบห้อง ${no}?`)) return;
setRooms(rs => rs.filter(r => r.no !== no));
setActive(null);
DB.deleteRoom(no).catch(console.error);
};
const saveNewRoom = () => {
const { no, floor, type, size, rent, waterRate, electricRate } = newRoom;
if (!no.trim()) { alert("กรุณากรอกเลขห้อง"); return; }
if (!floor.trim()) { alert("กรุณากรอกชั้น"); return; }
if (!rent.trim()) { alert("กรุณากรอกค่าเช่า"); return; }
if (rooms.some(r => r.no === no.trim())) { alert(`ห้อง ${no.trim()} มีอยู่แล้ว`); return; }
const floorNum = parseInt(floor) || 1;
const rentNum = parseFloat(rent) || 0;
const room = {
no: no.trim(), floor: floorNum, type, size: size || "ห้องมาตรฐาน 22 ตร.ม.",
rent: rentNum, status: "vacant", customer: null,
waterRate: parseFloat(waterRate) || 25,
electricRate: parseFloat(electricRate) || 8,
extras: [],
prevMeter: { water: 0, electric: 0 },
currMeter: { water: 0, electric: 0 },
};
setRooms(rs => [...rs, room].sort((a, b) => a.no.localeCompare(b.no, undefined, { numeric: true })));
setNewRoom({ no: "", floor: "", type: "monthly", size: "ห้องมาตรฐาน 22 ตร.ม.", rent: "", waterRate: "25", electricRate: "8", deposit: "" });
setAdding(false);
DB.addRoom(room).catch(console.error);
};
return (
setQuery(e.target.value)} />
ผังห้องพัก
มีผู้เช่า
รายวัน
ว่าง
ค้างชำระ
ทำความสะอาด
{view === "floor" ? (
{Object.keys(byFloor).sort().map(f => (
ชั้น {f}
{byFloor[f].length} ห้อง
{byFloor[f].map(r => (
))}
))}
) : (
| ห้อง | ประเภท | สถานะ | ผู้เช่า | โทรศัพท์ | ค่าเช่า | |
{filtered.map(r => (
setActive(r)} style={{ cursor: "pointer" }}>
| {r.no} · ชั้น {r.floor} |
{r.type === "monthly" ? "รายเดือน" : "รายวัน"} |
|
{r.customer ? r.customer.name : "—"} |
{r.customer ? r.customer.phone : "—"} |
{formatBaht(r.rent)}{r.type === "daily" && "/คืน"} |
|
))}
)}
{/* Room detail modal */}
setActive(null)} size="xl"
title={active ? `ห้อง ${active.no} · ชั้น ${active.floor} · ${active.type === "monthly" ? "รายเดือน" : "รายวัน"}` : ""}>
{active && (
updateRoom(active.no, p)}
onDelete={() => deleteRoom(active.no)}
onMeter={() => setMeterFor(active)}
onEditPrice={() => setEditPriceFor(active)}
onInvoice={() => onOpenInvoice(active)}
onReceipt={() => onOpenReceipt(active)} />
)}
{/* Add room modal */}
setAdding(false)} title="เพิ่มห้องพักใหม่"
footer={<>
}>
setNewRoom(r => ({ ...r, no: e.target.value }))}/>
setNewRoom(r => ({ ...r, floor: e.target.value }))}/>
setNewRoom(r => ({ ...r, size: e.target.value }))}/>
setNewRoom(r => ({ ...r, rent: e.target.value }))}/>
setNewRoom(r => ({ ...r, waterRate: e.target.value }))}/>
setNewRoom(r => ({ ...r, electricRate: e.target.value }))}/>
setNewRoom(r => ({ ...r, deposit: e.target.value }))}/>
{/* Meter modal */}
setMeterFor(null)} size="lg"
title={meterFor ? `จดมิเตอร์ — ห้อง ${meterFor.no}` : ""}>
{meterFor && (
{ updateRoom(meterFor.no, patch); setMeterFor(null); if (printInvoice) onOpenInvoice({ ...meterFor, ...patch }); }}
onCancel={() => setMeterFor(null)}
/>
)}
{/* Edit Price */}
setEditPriceFor(null)}
title={editPriceFor ? `ตั้งค่าราคาห้อง ${editPriceFor.no}` : ""}>
{editPriceFor && (
{ updateRoom(editPriceFor.no, patch); setEditPriceFor(null); }}
onCancel={() => setEditPriceFor(null)}
/>
)}
{/* Promotions */}
setPromo(false)} size="lg" title="โปรโมชั่นห้องพักรายวัน">
{DATA.promotions.filter(p => p.type === "daily-week").map(p => (
))}
);
}
function RoomDetail({ room, onUpdate, onDelete, onMeter, onEditPrice, onInvoice, onReceipt }) {
const [editCust, setEditCust] = useStateR(false);
const [checkIn, setCheckIn] = useStateR(false);
const usedWater = (room.currMeter?.water || 0) - (room.prevMeter?.water || 0);
const usedElec = (room.currMeter?.electric || 0) - (room.prevMeter?.electric || 0);
const waterCost = usedWater * room.waterRate;
const elecCost = usedElec * room.electricRate;
const extraSum = (room.extras || []).reduce((s, x) => s + Number(x.amount || 0), 0);
const total = room.rent + waterCost + elecCost + extraSum;
return (
{room.size}
{room.type === "monthly" ? `${formatBaht(room.rent)} / เดือน` : `${formatBaht(room.rent)} / คืน`}
{room.customer ? (
ข้อมูลผู้เช่า
โทรศัพท์
{room.customer.phone}
เข้าพักตั้งแต่
{formatDateTH(room.customer.since)}
{room.customer.checkoutPlan &&
กำหนดออก
{formatDateTH(room.customer.checkoutPlan)}
}
{room.customer.deposit > 0 &&
เงินมัดจำ
{formatBaht(room.customer.deposit)}
}
รหัสลูกค้า
{room.customer.id}
) : (
ห้องนี้ว่าง · พร้อมเข้าพัก
)}
{room.type === "monthly" && (
มิเตอร์เดือนนี้
น้ำประปา
{usedWater} หน่วย
{room.prevMeter.water} → {room.currMeter.water} · {formatBaht(waterCost)}
ไฟฟ้า
{usedElec} หน่วย
{room.prevMeter.electric} → {room.currMeter.electric} · {formatBaht(elecCost)}
ค่าเช่าห้อง{formatBaht(room.rent)}
ค่าน้ำ + ไฟ{formatBaht(waterCost + elecCost)}
{(room.extras || []).map((x, i) => (
{x.name || "ค่าใช้จ่ายอื่นๆ"}{formatBaht(x.amount)}
))}
รวมที่ต้องชำระ{formatBaht(total)}
)}
{/* Edit customer modal */}
setEditCust(false)} title="แก้ไขข้อมูลผู้เช่า">
{editCust && room.customer && (
{ onUpdate({ customer: c }); setEditCust(false); }}
onCancel={() => setEditCust(false)}
/>
)}
{/* Check-in modal */}
setCheckIn(false)} title={`เช็คอินผู้เช่า — ห้อง ${room.no}`}>
{checkIn && (
{ onUpdate(patch); setCheckIn(false); }}
onCancel={() => setCheckIn(false)}
/>
)}
);
}
function CheckInModal({ room, onSave, onCancel }) {
const today = new Date().toISOString().slice(0, 10);
const [name, setName] = useStateR("");
const [phone, setPhone] = useStateR("");
const [since, setSince] = useStateR(today);
const [deposit, setDeposit] = useStateR(room.type === "monthly" ? String(room.rent * 2) : "0");
const [checkoutPlan, setCheckoutPlan] = useStateR("");
const [idCard, setIdCard] = useStateR("");
const save = () => {
if (!name.trim()) { alert("กรุณากรอกชื่อ-นามสกุล"); return; }
if (!phone.trim()) { alert("กรุณากรอกเบอร์โทรศัพท์"); return; }
if (!since) { alert("กรุณาเลือกวันที่เข้าพัก"); return; }
const newId = `C${Date.now().toString().slice(-6)}`;
const customer = {
id: newId,
name: name.trim(),
phone: phone.trim(),
since,
deposit: parseFloat(deposit) || 0,
checkoutPlan: checkoutPlan || null,
idCard: idCard.trim() || null,
};
const newStatus = room.type === "daily" ? "daily" : "occupied";
onSave({ customer, status: newStatus });
};
return (
);
}
function EditCustomerModal({ customer, onSave, onCancel }) {
const [name, setName] = useStateR(customer.name || "");
const [phone, setPhone] = useStateR(customer.phone || "");
const [since, setSince] = useStateR(customer.since || "");
const [deposit, setDeposit] = useStateR(customer.deposit || 0);
const [checkoutPlan, setCheckoutPlan] = useStateR(customer.checkoutPlan || "");
return (
);
}
function MeterModal({ room, onSave, onCancel }) {
const [w, setW] = useStateR(room.currMeter.water);
const [e, setE] = useStateR(room.currMeter.electric);
const [waterPhoto, setWaterPhoto] = useStateR(false);
const [elecPhoto, setElecPhoto] = useStateR(false);
const [extras, setExtras] = useStateR(room.extras && room.extras.length ? room.extras : []);
const usedW = w - room.prevMeter.water;
const usedE = e - room.prevMeter.electric;
const wCost = usedW * room.waterRate;
const eCost = usedE * room.electricRate;
const extraSum = extras.reduce((s,x) => s + Number(x.amount || 0), 0);
const total = room.rent + wCost + eCost + extraSum;
return (
ค่าใช้จ่ายอื่นๆ
ค่าเช่าห้อง{formatBaht(room.rent)}
ค่าน้ำ{formatBaht(wCost)}
ค่าไฟ{formatBaht(eCost)}
{extras.map((x, i) => (
{x.name || "ค่าใช้จ่ายอื่นๆ"}{formatBaht(x.amount)}
))}
รวมที่ต้องชำระ
{formatBaht(total)}
);
}
function EditPriceModal({ room, onSave, onCancel }) {
const [rent, setRent] = useStateR(room.rent);
const [size, setSize] = useStateR(room.size);
const [waterRate, setWaterRate] = useStateR(room.waterRate);
const [electricRate, setElectricRate] = useStateR(room.electricRate);
const [extras, setExtras] = useStateR(room.extras || []);
const handleSave = () => {
onSave({ rent: Number(rent), size, waterRate: Number(waterRate), electricRate: Number(electricRate), extras });
};
return (
);
}
window.Rooms = Rooms;