MetatroncubeSoftwareSolutions/dine360-POS-System
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

1. Floor plan module floor, room and table management updated in single page

Browse Source 
2. day reservation ui updated
This commit is contained in:
Alaguraj0361 2025-07-12 13:48:53 +05:30
parent b6695372c7
commit 46a6714f26
17 changed files with 15282 additions and 219 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13914
public/assets/css/lib/bootstrap.min.css vendored
View File

File diff suppressed because one or more lines are too long

8
public/assets/css/style.css
View File

@ -13248,9 +13248,13 @@ select option {
/* Gradient Tab Css End */ /* Gradient Tab Css End */
/* Focus Tab Css Start */ /* Focus Tab Css Start */
.focus-tab .nav-link{
border: 1px solid var(--theme-color);
}
.focus-tab .nav-link.active { .focus-tab .nav-link.active {
background-color: var(--primary-50); background-color: var(--theme-color);
color: var(--primary-600); color: #fff !important;
} }
/* Focus Tab Css End */ /* Focus Tab Css End */

BIN
public/assets/images/day/fri.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.0 KiB

BIN
public/assets/images/day/mon.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.6 KiB

BIN
public/assets/images/day/sat.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.4 KiB

BIN
public/assets/images/day/sun.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.5 KiB

BIN
public/assets/images/day/thu.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.2 KiB

BIN
public/assets/images/day/tue.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.1 KiB

BIN
public/assets/images/day/wed.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.4 KiB

1164
src/app/admin/(floor-plan-update)/floor-plan/page.jsx Normal file
View File

File diff suppressed because it is too large Load Diff

98
src/app/admin/(pos-system)/pos/room/page.jsx
View File

@ -19,19 +19,17 @@ const FloorSectionPageInner = () => {
// const restaurantbranch = params?.restaurantbranch; // const restaurantbranch = params?.restaurantbranch;
// const RestaruntBranch = restaurantbranch // const RestaruntBranch = restaurantbranch
// const floorName = decodeURIComponent(params.name); // const floorName = decodeURIComponent(params.name);
const [showModal, setShowModal] = useState(false);
const [editMode, setEditMode] = useState(false);
const [editingRoomId, setEditingRoomId] = useState(null);
const [roomData, setRoomData] = useState(null); const [roomData, setRoomData] = useState(null);
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
const [error, setError] = useState(null); const [showRoomModal, setShowRoomModal] = useState(false);
const [formData, setFormData] = useState({ const [editRoomMode, setEditRoomMode] = useState(false);
const [editingRoomId, setEditingRoomId] = useState(null);
const [roomFormData, setRoomFormData] = useState({
roomname: "", roomname: "",
description: "", description: "",
}); });
const [errors, setErrors] = useState({}); const [roomErrors, setRoomErrors] = useState({});
const [deleteConfirm, setDeleteConfirm] = useState({ show: false, id: null }); const [roomDeleteConfirm, setRoomDeleteConfirm] = useState({ show: false, id: null });
const [restaruntBranch, setRestaruntBranch] = useState("") const [restaruntBranch, setRestaruntBranch] = useState("")
@ -57,70 +55,68 @@ const FloorSectionPageInner = () => {
const getRoomData = async () => { const getRoomData = async () => {
try { try {
setLoading(true); setLoading(true);
setError(null);
const roomRes = await client.get( const roomRes = await client.get(
`/Dine360%20Room?fields=["*"]&limit_page_length=100&filters=[["floor","=","${floorName}"]]` `/Dine360%20Room?fields=["*"]&limit_page_length=100&filters=[["floor","=","${floorName}"]]`
); );
setRoomData(roomRes?.data?.data || []); setRoomData(roomRes?.data?.data || []);
} catch (error) { } catch (error) {
console.error("Error fetching data:", error); console.error("Error fetching data:", error);
setError(error?.message || "Failed to fetch floor data");
} finally { } finally {
setLoading(false); setLoading(false);
} }
}; };
const handleChange = (e) => { const handleRoomChange = (e) => {
const { name, value } = e.target; const { name, value } = e.target;
setFormData((prev) => ({ ...prev, [name]: value })); setRoomFormData((prev) => ({ ...prev, [name]: value }));
}; };
const handleSubmit = async (e) => { const handleRoomSubmit = async (e) => {
e.preventDefault(); e.preventDefault();
const newErrors = {}; const newErrors = {};
Object.entries(formData).forEach(([key, value]) => { Object.entries(formData).forEach(([key, value]) => {
if (!value.trim()) newErrors[key] = `${key} is required`; if (!value.trim()) newErrors[key] = `${key} is required`;
}); });
setErrors(newErrors); setRoomErrors(newErrors);
if (Object.keys(newErrors).length > 0) return; if (Object.keys(newErrors).length > 0) return;
const body = { const body = {
roomname: formData.roomname, roomname: roomFormData.roomname,
description: formData.description, description: roomFormData.description,
floor: floorName, floor: floorName,
restaurantbranch: restaruntBranch restaurantbranch: restaruntBranch
}; };
try { try {
if (editMode) { if (editRoomMode) {
await client.put(`/Dine360 Room/${editingRoomId}`, body); await client.put(`/Dine360 Room/${editingRoomId}`, body);
} else { } else {
await client.post(`/Dine360 Room`, body); await client.post(`/Dine360 Room`, body);
} }
getRoomData(); getRoomData();
resetForm(); resetRoomForm();
} catch (error) { } catch (error) {
console.error("❌ Submission error:", error); console.error("❌ Submission error:", error);
} }
}; };
const handleEdit = (room) => { const handleEdit = (room) => {
setFormData({ setRoomFormData({
roomname: room.roomname || "", roomname: room.roomname || "",
description: room.description || "", description: room.description || "",
// branch: room.branch || "", // branch: room.branch || "",
}); });
setEditingRoomId(room.name); setEditingRoomId(room.name);
setEditMode(true); setEditRoomMode(true);
setShowModal(true); setShowRoomModal(true);
}; };
const handleDelete = async () => { const handleRoomDelete = async () => {
try { try {
await client.delete(`/Dine360 Room/${deleteConfirm?.id}`); await client.delete(`/Dine360 Room/${roomDeleteConfirm?.id}`);
setDeleteConfirm({ show: false, id: null }); setRoomDeleteConfirm({ show: false, id: null });
getRoomData(); getRoomData();
} catch (error) { } catch (error) {
if ( if (
@ -135,12 +131,12 @@ const FloorSectionPageInner = () => {
} }
}; };
const resetForm = () => { const resetRoomForm = () => {
setFormData({ roomname: "", description: "", }); setRoomFormData({ roomname: "", description: "", });
setErrors({}); setRoomErrors({});
setEditMode(false); setEditRoomMode(false);
setEditingRoomId(null); setEditingRoomId(null);
setShowModal(false); setShowRoomModal(false);
}; };
return ( return (
@ -153,7 +149,7 @@ const FloorSectionPageInner = () => {
<button <button
type="button" type="button"
className="btn btn-bg-theme radius-8 px-20 py-11" className="btn btn-bg-theme radius-8 px-20 py-11"
onClick={() => setShowModal(true)} onClick={() => setShowRoomModal(true)}
> >
Create Create
</button> </button>
@ -201,7 +197,7 @@ const FloorSectionPageInner = () => {
className='dropdown-item px-16 py-8 d-flex align-items-center gap-2 rounded text-secondary-light bg-hover-neutral-200 text-hover-neutral-900' className='dropdown-item px-16 py-8 d-flex align-items-center gap-2 rounded text-secondary-light bg-hover-neutral-200 text-hover-neutral-900'
onClick={(e) => { onClick={(e) => {
e.preventDefault(); e.preventDefault();
setDeleteConfirm({ show: true, id: room.name }) setRoomDeleteConfirm({ show: true, id: room.name })
}} }}
> <Icon > <Icon
icon='fluent:delete-24-regular' icon='fluent:delete-24-regular'
@ -222,7 +218,7 @@ const FloorSectionPageInner = () => {
</button> </button>
<button <button
className="remove-item-btn bg-danger-focus bg-hover-danger-200 text-danger-600 fw-medium w-40-px h-40-px d-flex justify-content-center align-items-center rounded-circle" className="remove-item-btn bg-danger-focus bg-hover-danger-200 text-danger-600 fw-medium w-40-px h-40-px d-flex justify-content-center align-items-center rounded-circle"
onClick={() => setDeleteConfirm({ show: true, id: room.name })} onClick={() => setRoomDeleteConfirm({ show: true, id: room.name })}
> >
<Icon <Icon
icon='fluent:delete-24-regular' icon='fluent:delete-24-regular'
@ -247,45 +243,45 @@ const FloorSectionPageInner = () => {
</div> </div>
{/* Modal */} {/* Modal */}
{showModal && ( {showRoomModal && (
<div className="modal fade show" style={{ display: "block", backgroundColor: "rgba(0,0,0,0.5)" }}> <div className="modal fade show" style={{ display: "block", backgroundColor: "rgba(0,0,0,0.5)" }}>
<div className="modal-dialog modal-dialog-centered"> <div className="modal-dialog modal-dialog-centered">
<div className="modal-content"> <div className="modal-content">
<div className="modal-header border-0 pb-0"> <div className="modal-header border-0 pb-0">
<h6 className="modal-title text-lg">{editMode ? "Edit Room" : "Create Room"}</h6> <h6 className="modal-title text-lg">{editRoomMode ? "Edit Room" : "Create Room"}</h6>
<button <button
type="button" type="button"
className="btn-close" className="btn-close"
onClick={resetForm} onClick={resetRoomForm}
></button> ></button>
</div> </div>
<div className="modal-body"> <div className="modal-body">
<form onSubmit={handleSubmit}> <form onSubmit={handleRoomSubmit}>
<div className="mb-3"> <div className="mb-3">
<label className="form-label">Room Name</label> <label className="form-label">Room Name</label>
<input <input
type="text" type="text"
className={`form-control ${errors.roomname ? "is-invalid" : ""}`} className={`form-control ${roomErrors.roomname ? "is-invalid" : ""}`}
name="roomname" name="roomname"
value={formData.roomname} value={roomFormData.roomname}
onChange={handleChange} onChange={handleRoomChange}
/> />
{errors.roomname && ( {roomErrors.roomname && (
<div className="invalid-feedback">{errors.roomname}</div> <div className="invalid-feedback">{roomErrors.roomname}</div>
)} )}
</div> </div>
<div className="mb-3"> <div className="mb-3">
<label className="form-label">Description</label> <label className="form-label">Description</label>
<textarea <textarea
className={`form-control ${errors.description ? "is-invalid" : ""}`} className={`form-control ${roomErrors.description ? "is-invalid" : ""}`}
name="description" name="description"
value={formData.description} value={roomFormData.description}
onChange={handleChange} onChange={handleRoomChange}
rows="3" rows="3"
></textarea> ></textarea>
{errors.description && ( {roomErrors.description && (
<div className="invalid-feedback">{errors.description}</div> <div className="invalid-feedback">{roomErrors.description}</div>
)} )}
</div> </div>
@ -293,7 +289,7 @@ const FloorSectionPageInner = () => {
<div className="d-flex justify-content-end"> <div className="d-flex justify-content-end">
<button type="submit" className="btn btn-bg-theme"> <button type="submit" className="btn btn-bg-theme">
{editMode ? "Update" : "Submit"} {editRoomMode ? "Update" : "Submit"}
</button> </button>
</div> </div>
</form> </form>
@ -304,7 +300,7 @@ const FloorSectionPageInner = () => {
)} )}
{/* Delete Confirmation Modal */} {/* Delete Confirmation Modal */}
{deleteConfirm.show && ( {roomDeleteConfirm.show && (
<div className="modal fade show" style={{ display: "block", backgroundColor: "rgba(0,0,0,0.5)" }}> <div className="modal fade show" style={{ display: "block", backgroundColor: "rgba(0,0,0,0.5)" }}>
<div className="modal-dialog modal-dialog-centered"> <div className="modal-dialog modal-dialog-centered">
<div className="modal-content"> <div className="modal-content">
@ -315,18 +311,18 @@ const FloorSectionPageInner = () => {
<button <button
type="button" type="button"
className="btn-close" className="btn-close"
onClick={() => setDeleteConfirm({ show: false, id: null })} onClick={() => setRoomDeleteConfirm({ show: false, id: null })}
></button> ></button>
</div> </div>
<p className="mb-0">Are you sure you want to delete this Room?</p> <p className="mb-0">Are you sure you want to delete this Room?</p>
<div className="d-flex justify-content-end gap-2 mt-1"> <div className="d-flex justify-content-end gap-2 mt-1">
<button <button
className="btn btn-outline-danger-600 px-14 py-6 text-sm" className="btn btn-outline-danger-600 px-14 py-6 text-sm"
onClick={() => setDeleteConfirm({ show: false, id: null })} onClick={() => setRoomDeleteConfirm({ show: false, id: null })}
> >
Cancel Cancel
</button> </button>
<button className="btn btn-danger px-14 py-6 text-sm" onClick={handleDelete}> <button className="btn btn-danger px-14 py-6 text-sm" onClick={handleRoomDelete}>
Delete Delete
</button> </button>
</div> </div>

9
src/app/admin/(pos-system)/pos/sides/page.jsx
View File

@ -9,6 +9,7 @@ import PageLoader from "@/components/common-component/PageLoader";
import PageNoData from "@/components/common-component/PageNoData"; import PageNoData from "@/components/common-component/PageNoData";
import Breadcrumb from "@/components/Breadcrumb"; import Breadcrumb from "@/components/Breadcrumb";
import { Icon } from "@iconify/react"; import { Icon } from "@iconify/react";
import { Baseurl, ImageBase } from "@utils/BaseUrl.utils";
const SidesPageInner = () => { const SidesPageInner = () => {
const router = useRouter(); const router = useRouter();
@ -148,16 +149,22 @@ const SidesPageInner = () => {
form.append("doctype", doctype); form.append("doctype", doctype);
form.append("docname", docname); form.append("docname", docname);
const res = await fetch("https://dev.dine360.ca/api/method/upload_file", { const res = await fetch(`${ImageBase}/api/method/upload_file`, {
method: "POST", method: "POST",
headers: {
"Authorization": "token 482beca79d9c005:b8778f51fcca82b",
// ❌ Don't set Content-Type when using FormData — let the browser set it
},
body: form, body: form,
}); });
const result = await res.json(); const result = await res.json();
if (!result.message?.file_url) throw new Error("Upload failed"); if (!result.message?.file_url) throw new Error("Upload failed");
return result.message.file_url; return result.message.file_url;
}; };
const handleEdit = (room) => { const handleEdit = (room) => {
setFormData({ setFormData({
sidename: room.sidename || "", sidename: room.sidename || "",

34
src/components/admin/(reservation)/DayReservationMainComponent.jsx
View File

@ -95,13 +95,13 @@ const DayReservationMainComponent = () => {
return ( return (
<> <>
<div className="container-fluid" style={{ marginBottom: "100px" }}> <div className="container" style={{ marginBottom: "100px" }}>
<div className='card h-100 p-0 radius-12'> <div className=' h-100 p-0 radius-12'>
<div className='card-body p-3 p-lg-5 p-lg-40'> <div className='p-3 '>
<div className='d-flex justify-content-between align-items-center mb-3'> <div className='d-flex justify-content-end align-items-center mb-3'>
<div> {/* <div>
<h6 className="mb-0 text-lg">Day Reservation</h6> <h6 className="mb-0 text-lg">Day Reservation</h6>
</div> </div> */}
<button className="btn btn-bg-theme" onClick={() => { <button className="btn btn-bg-theme" onClick={() => {
setFormData({ day: "" }); setFormData({ day: "" });
setFormError(""); setFormError("");
@ -120,21 +120,33 @@ const DayReservationMainComponent = () => {
const gradientClass = gradientClasses[index % gradientClasses.length]; const gradientClass = gradientClasses[index % gradientClasses.length];
return ( return (
<div className="col-xxl-3 col-lg-4 col-sm-6 cursor-pointer" key={days.name}> <div className="col-xxl-3 col-lg-4 col-sm-6 cursor-pointer" key={days.name}>
<div className={`card p-3 shadow-2 radius-8 h-100 bg-theme border border-white`}>
<div className="card-body d-flex justify-content-between align-items-center p-0"> <div className="card p-3 shadow-2 radius-8 h-100 border border-white position-relative">
<div className="card-body d-flex justify-content-center align-items-center p-0 ">
{/* Day Image Link */}
<Link <Link
href={`/admin/day-reservation-enable-table?restaurantbranch=${restaruntBranch}&name=${days?.name}&day=${encodeURIComponent(days?.day)}`} href={`/admin/day-reservation-enable-table?restaurantbranch=${restaruntBranch}&name=${days?.name}&day=${encodeURIComponent(days?.day)}`}
> >
<h6 className="text-lg m-0">{days.day}</h6> <img
src={`/assets/images/day/${days.day.slice(0, 3).toLowerCase()}.webp`}
alt={days.day}
style={{ width: "200px" }}
/>
</Link> </Link>
{/* Delete Button Top-Right */}
<button <button
className="remove-item-btn bg-danger-focus bg-hover-danger-200 text-danger-600 fw-medium w-40-px h-40-px d-flex justify-content-center align-items-center rounded-circle" className="remove-item-btn bg-danger-focus bg-hover-danger-200 text-danger-600 fw-medium w-40-px h-40-px d-flex justify-content-center align-items-center rounded-circle position-absolute"
style={{ top: "8px", right: "8px" }}
onClick={() => setDeleteConfirm({ show: true, id: days.name })} onClick={() => setDeleteConfirm({ show: true, id: days.name })}
> >
<Icon icon='fluent:delete-24-regular' className='menu-icon' /> <Icon icon="fluent:delete-24-regular" className="menu-icon" />
</button> </button>
</div> </div>
</div> </div>
</div> </div>
); );
}) })

110
src/components/admin/(reservation)/DayReservationTableEnable.jsx
View File

@ -219,15 +219,15 @@ const DayReservationTableEnableInner = () => {
<PageNoData /> <PageNoData />
) : ( ) : (
<> <>
<div className="container-fluid" style={{ marginBottom: "100px" }}> <div className="container" style={{ marginBottom: "100px" }}>
<div className='card h-100 p-0 radius-12'> <div className=' h-100 p-0 radius-12'>
<div className='card-body p-3 p-lg-5 p-lg-40'> <div className='p-3 '>
<div className="d-flex justify-content-between mb-5"> <div className="d-flex justify-content-end mb-3">
<div className="d-flex align-items-center"> {/* <div className="d-flex align-items-center">
<h6 className="text-lg mb-0"> <h6 className="text-lg mb-0">
Day Reservations Day Reservations
</h6> </h6>
</div> </div> */}
<button <button
type="button" type="button"
className="btn btn-bg-theme radius-8 px-16 py-7" className="btn btn-bg-theme radius-8 px-16 py-7"
@ -237,69 +237,58 @@ const DayReservationTableEnableInner = () => {
</button> </button>
</div> </div>
<div className='row gy-3 gx-3 gx-lg-5 gy-lg-5 justify-content-center'> <div className="row gy-3 gx-3 gx-lg-5 gy-lg-5 justify-content-center">
{sortedTables.map((table) => ( {sortedTables.map((table) => (
<div className="col-xxl-2 col-lg-3 col-md-4 col-sm-6 col-6 text-center" key={table.name}> <div
className="col-xxl-2 col-lg-3 col-md-4 col-sm-6 col-6 text-center"
key={table.name}
>
<div className="d-inline-block"> <div className="d-inline-block">
<div <div
className={` cursor-pointer p-3 radius-12 ${table.enabled ? 'bg-success-focus' : 'bg-theme'} `} className="cursor-pointer radius-12"
onClick={() => handleTableClick(table)} onClick={() => handleTableClick(table)}
> >
<div className="text-center p-0 position-relative"> <div
<h6 className="text-lg mt-0 mb-1">{table?.tablename}</h6> className={`position-relative d-inline-block p-2 radius-12`}
<span className='mb-0 w-100-px h-100-px position-relative'> style={{ width: "150px" }}
{ >
table?.totalcapacity <= 2 ? ( {/* Table Image */}
<img <img
src='/assets/images/seat/seating-02.png' src={
alt='' table.totalcapacity <= 2
className={classNames( ? '/assets/images/seat/seating-24.png'
'mx-auto d-block w-100 h-100 object-fit-cover', : table.totalcapacity <= 4
{ 'grayscale': table.status === 'booked' } ? '/assets/images/seat/seating-25.png'
)} : table.totalcapacity <= 6
/> ? '/assets/images/seat/seating-26.png'
) : table?.totalcapacity <= 4 ? ( : table.totalcapacity <= 8
<img ? '/assets/images/seat/seating-27.png'
src='/assets/images/seat/seating-04.png' : '/assets/images/seat/seating-28.png'
alt=''
className={classNames(
'mx-auto d-block w-100 h-100 object-fit-cover',
{ 'grayscale': table.status === 'booked' }
)}
/>
) : table?.totalcapacity <= 6 ? (
<img
src='/assets/images/seat/seating-06.png'
alt=''
className={classNames(
'mx-auto d-block w-100 h-100 object-fit-cover',
{ 'grayscale': table.status === 'booked' }
)}
/>
) : table?.totalcapacity <= 8 ? (
<img
src='/assets/images/seat/seating-08.png'
alt=''
className={classNames(
'mx-auto d-block w-100 h-100 object-fit-cover',
{ 'grayscale': table.status === 'booked' }
)}
/>
) : table?.totalcapacity <= 10 && (
<img
src='/assets/images/seat/seating-10.png'
alt=''
className={classNames(
'mx-auto d-block w-100 h-100 object-fit-cover',
{ 'grayscale': table.status === 'booked' }
)}
/>
)
} }
alt=""
className={classNames(
'w-100 h-100 object-fit-cover',
{ grayscale: table.status === 'booked' }
)}
/>
{/* Table name overlay at center */}
<div className={`position-absolute top-50 start-50 translate-middle text-white ${table.enabled ? 'bg-success-500' : 'bg-theme'
} fw-bold`}>
<h6
className={`position-absolute text-xs translate-middle text-white fw-bold text-center d-flex align-items-center justify-content-center ${table.enabled ? "bg-success-500" : "bg-warning-500"}`}
style={{
pointerEvents: "none",
top: "55%",
left: "50%",
width: "50px",
height: "50px",
borderRadius: "50%",
</span> }}
>{table.tablename}
</h6>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -308,6 +297,7 @@ const DayReservationTableEnableInner = () => {
</div> </div>
</div> </div>
{showModal && ( {showModal && (

118
src/components/floor-component/FloorComponent.jsx
View File

@ -17,15 +17,15 @@ const FloorComponent = ({ floorData, getFloor }) => {
// const restaurantbranch = searchParams.get('restaurantbranch') // const restaurantbranch = searchParams.get('restaurantbranch')
// const RestaruntBranch = restaurantbranch // const RestaruntBranch = restaurantbranch
const [showModal, setShowModal] = useState(false); const [showFloorModal, setShowFloorModal] = useState(false);
const [isEditMode, setIsEditMode] = useState(false); const [isFloorEditMode, setIsFloorEditMode] = useState(false);
const [selectedFloorId, setSelectedFloorId] = useState(null); const [selectedFloorId, setSelectedFloorId] = useState(null);
const [formData, setFormData] = useState({ const [floorFormData, setFloorFormData] = useState({
floorname: "", floorname: "",
description: "", description: "",
}); });
const [errors, setErrors] = useState({}); const [floorErrors, setFloorErrors] = useState({});
const [deleteConfirm, setDeleteConfirm] = useState({ show: false, id: null }); const [floorDeleteConfirm, setFloorDeleteConfirm] = useState({ show: false, id: null });
const [restaruntBranch, setRestaruntBranch] = useState("") const [restaruntBranch, setRestaruntBranch] = useState("")
@ -41,35 +41,35 @@ const FloorComponent = ({ floorData, getFloor }) => {
} }
}, [router]); }, [router]);
const handleChange = (e) => { const handleFloorChange = (e) => {
const { name, value } = e.target; const { name, value } = e.target;
setFormData((prev) => ({ ...prev, [name]: value })); setFloorFormData((prev) => ({ ...prev, [name]: value }));
}; };
const handleSubmit = async (e) => { const handleFloorSubmit = async (e) => {
e.preventDefault(); e.preventDefault();
const newErrors = {}; const newErrors = {};
Object.entries(formData).forEach(([key, value]) => { Object.entries(floorFormData).forEach(([key, value]) => {
if (!value.trim()) newErrors[key] = `${key} is required`; if (!value.trim()) newErrors[key] = `${key} is required`;
}); });
setErrors(newErrors); setFloorErrors(newErrors);
if (Object.keys(newErrors).length > 0) return; if (Object.keys(newErrors).length > 0) return;
const body = { const body = {
// ...(isEditMode && { name: selectedFloorId }), // only adds `name` if editing // ...(isFloorEditMode && { name: selectedFloorId }), // only adds `name` if editing
floorname: formData?.floorname, floorname: floorFormData?.floorname,
description: formData?.description, description: floorFormData?.description,
restaurantbranch: restaruntBranch restaurantbranch: restaruntBranch
}; };
try { try {
if (isEditMode) { if (isFloorEditMode) {
await client.put(`/Dine360 Floor/${selectedFloorId}`, body); await client.put(`/Dine360 Floor/${selectedFloorId}`, body);
} else { } else {
await client.post(`/Dine360 Floor`, body); await client.post(`/Dine360 Floor`, body);
} }
getFloor(); getFloor();
resetForm(); resetFloorForm();
} catch (error) { } catch (error) {
if ( if (
error?.response?.data?.exception?.includes("DuplicateEntryError") || error?.response?.data?.exception?.includes("DuplicateEntryError") ||
@ -87,30 +87,30 @@ const FloorComponent = ({ floorData, getFloor }) => {
} }
}; };
const resetForm = () => { const resetFloorForm = () => {
setFormData({ setFloorFormData({
floorname: "", description: "", floorname: "", description: "",
}); });
setShowModal(false); setShowFloorModal(false);
setIsEditMode(false); setIsFloorEditMode(false);
setSelectedFloorId(null); setSelectedFloorId(null);
setErrors({}); setFloorErrors({});
}; };
const handleEdit = (floor) => { const handleFloorEdit = (floor) => {
setIsEditMode(true); setIsFloorEditMode(true);
setSelectedFloorId(floor.name); setSelectedFloorId(floor.name);
setFormData({ setFloorFormData({
floorname: floor.floorname || "", floorname: floor.floorname || "",
description: floor.description || "", description: floor.description || "",
}); });
setShowModal(true); setShowFloorModal(true);
}; };
const handleDelete = async () => { const handleFloorDelete = async () => {
try { try {
await client.delete(`/Dine360 Floor/${deleteConfirm.id}`); await client.delete(`/Dine360 Floor/${floorDeleteConfirm.id}`);
setDeleteConfirm({ show: false, id: null }); setFloorDeleteConfirm({ show: false, id: null });
getFloor(); getFloor();
} catch (error) { } catch (error) {
if ( if (
@ -134,7 +134,7 @@ const FloorComponent = ({ floorData, getFloor }) => {
<button <button
type="button" type="button"
className="btn btn-bg-theme radius-8 px-20 py-11" className="btn btn-bg-theme radius-8 px-20 py-11"
onClick={() => setShowModal(true)} onClick={() => setShowFloorModal(true)}
> >
Create Create
</button> </button>
@ -170,7 +170,7 @@ const FloorComponent = ({ floorData, getFloor }) => {
className='dropdown-item px-16 py-8 d-flex align-items-center gap-2 rounded text-secondary-light bg-hover-neutral-200 text-hover-neutral-900' className='dropdown-item px-16 py-8 d-flex align-items-center gap-2 rounded text-secondary-light bg-hover-neutral-200 text-hover-neutral-900'
onClick={(e) => { onClick={(e) => {
e.preventDefault(); e.preventDefault();
handleEdit(floor); handleFloorEdit(floor);
}} }}
> <Icon icon='lucide:edit' className='menu-icon' /> > <Icon icon='lucide:edit' className='menu-icon' />
Edit Edit
@ -182,7 +182,7 @@ const FloorComponent = ({ floorData, getFloor }) => {
className='dropdown-item px-16 py-8 d-flex align-items-center gap-2 rounded text-secondary-light bg-hover-neutral-200 text-hover-neutral-900' className='dropdown-item px-16 py-8 d-flex align-items-center gap-2 rounded text-secondary-light bg-hover-neutral-200 text-hover-neutral-900'
onClick={(e) => { onClick={(e) => {
e.preventDefault(); e.preventDefault();
setDeleteConfirm({ show: true, id: floor.name }); setFloorDeleteConfirm({ show: true, id: floor.name });
}} }}
> >
<Icon <Icon
@ -219,69 +219,49 @@ const FloorComponent = ({ floorData, getFloor }) => {
</div> </div>
{/* Create/Edit Modal */} {/* Create/Edit Modal */}
{showModal && ( {showFloorModal && (
<div className="modal fade show" style={{ display: "block", backgroundColor: "rgba(0,0,0,0.5)" }}> <div className="modal fade show" style={{ display: "block", backgroundColor: "rgba(0,0,0,0.5)" }}>
<div className="modal-dialog modal-dialog-centered"> <div className="modal-dialog modal-dialog-centered">
<div className="modal-content"> <div className="modal-content">
<div className="modal-header border-0 pb-0"> <div className="modal-header border-0 pb-0">
<h6 className="modal-title text-lg"> <h6 className="modal-title text-lg">
{isEditMode ? "Edit Floor" : "Create Floor"} {isFloorEditMode ? "Edit Floor" : "Create Floor"}
</h6> </h6>
<button type="button" className="btn-close" onClick={resetForm}></button> <button type="button" className="btn-close" onClick={resetFloorForm}></button>
</div> </div>
<div className="modal-body"> <div className="modal-body">
<form onSubmit={handleSubmit}> <form onSubmit={handleFloorSubmit}>
<div className="mb-3"> <div className="mb-3">
<label className="form-label">Floor Name</label> <label className="form-label">Floor Name</label>
<input <input
type="text" type="text"
className={`form-control ${errors.floorname ? "is-invalid" : ""}`} className={`form-control ${floorErrors.floorname ? "is-invalid" : ""}`}
name="floorname" name="floorname"
value={formData.floorname} value={floorFormData.floorname}
onChange={handleChange} onChange={handleFloorChange}
/> />
{errors.floorname && ( {floorErrors.floorname && (
<div className="invalid-feedback">{errors.floorname}</div> <div className="invalid-feedback">{floorErrors.floorname}</div>
)} )}
</div> </div>
<div className="mb-3"> <div className="mb-3">
<label className="form-label">Description</label> <label className="form-label">Description</label>
<textarea <textarea
className={`form-control ${errors.description ? "is-invalid" : ""}`} className={`form-control ${floorErrors.description ? "is-invalid" : ""}`}
name="description" name="description"
value={formData.description} value={floorFormData.description}
onChange={handleChange} onChange={handleFloorChange}
rows="3" rows="3"
></textarea> ></textarea>
{errors.description && ( {floorErrors.description && (
<div className="invalid-feedback">{errors.description}</div> <div className="invalid-feedback">{floorErrors.description}</div>
)} )}
</div> </div>
{/* <div className="mb-3">
<label className="form-label">Branch</label>
<select
className={`form-select ${errors.branch ? "is-invalid" : ""}`}
name="branch"
value={formData.branch}
onChange={handleChange}
>
<option value="">Select Branch</option>
{branchData.map((branch) => (
<option key={branch.name} value={branch.name}>
{branch.branch}
</option>
))}
</select>
{errors.branch && (
<div className="invalid-feedback">{errors.branch}</div>
)}
</div> */}
<div className="d-flex justify-content-end"> <div className="d-flex justify-content-end">
<button type="submit" className="btn btn-bg-theme"> <button type="submit" className="btn btn-bg-theme">
{isEditMode ? "Update" : "Submit"} {isFloorEditMode ? "Update" : "Submit"}
</button> </button>
</div> </div>
</form> </form>
@ -292,7 +272,7 @@ const FloorComponent = ({ floorData, getFloor }) => {
)} )}
{/* Delete Confirmation Modal */} {/* Delete Confirmation Modal */}
{deleteConfirm.show && ( {floorDeleteConfirm.show && (
<div className="modal fade show" style={{ display: "block", backgroundColor: "rgba(0,0,0,0.5)" }}> <div className="modal fade show" style={{ display: "block", backgroundColor: "rgba(0,0,0,0.5)" }}>
<div className="modal-dialog modal-dialog-centered"> <div className="modal-dialog modal-dialog-centered">
<div className="modal-content"> <div className="modal-content">
@ -303,18 +283,18 @@ const FloorComponent = ({ floorData, getFloor }) => {
<button <button
type="button" type="button"
className="btn-close" className="btn-close"
onClick={() => setDeleteConfirm({ show: false, id: null })} onClick={() => setFloorDeleteConfirm({ show: false, id: null })}
></button> ></button>
</div> </div>
<p className="m-0">Are you sure you want to delete this floor?</p> <p className="m-0">Are you sure you want to delete this floor?</p>
<div className="d-flex justify-content-end gap-2 mt-1 "> <div className="d-flex justify-content-end gap-2 mt-1 ">
<button <button
className="btn btn-outline-danger px-14 py-6 text-sm" className="btn btn-outline-danger px-14 py-6 text-sm"
onClick={() => setDeleteConfirm({ show: false, id: null })} onClick={() => setFloorDeleteConfirm({ show: false, id: null })}
> >
Cancel Cancel
</button> </button>
<button className="btn btn-danger px-14 py-6 text-sm" onClick={handleDelete}> <button className="btn btn-danger px-14 py-6 text-sm" onClick={handleFloorDelete}>
Delete Delete
</button> </button>
</div> </div>

2
src/components/home/MainComponent.jsx
View File

@ -24,7 +24,7 @@ const MainComponent = () => {
}, [router]); }, [router]);
return ( return (
<div className="container-fluid"> <div className="container">
<div className='card h-100 p-0 radius-12'> <div className='card h-100 p-0 radius-12'>
<div className='card-body p-3 p-lg-5 p-lg-40'> <div className='card-body p-3 p-lg-5 p-lg-40'>
<div className='row gy-3 gx-3 gx-lg-5 gy-lg-5 justify-content-center'> <div className='row gy-3 gx-3 gx-lg-5 gy-lg-5 justify-content-center'>

38
src/components/home/ReservationMainComponent.jsx
View File

@ -24,12 +24,12 @@ const AdminDashBoardMain = () => {
}, [router]); }, [router]);
return ( return (
<div className="container-fluid" style={{ marginBottom: "100px" }}> <div className="container" style={{ marginBottom: "100px" }}>
<div className='card h-100 p-0 radius-12'> <div className=' h-100 p-0 radius-12'>
<div className='card-body p-3 p-lg-5 p-lg-40'> <div className=' p-3 p-lg-5 p-lg-40'>
<div className='row gy-3 gx-3 gx-lg-5 gy-lg-5 justify-content-center'> <div className='row gy-3 gx-3 gx-lg-5 gy-lg-5 justify-content-center'>
<div className="col-xxl-3 col-lg-4 col-sm-6 cursor-pointer"> <div className="col-xxl-4 col-lg-4 col-sm-6 cursor-pointer">
<div className={`card p-3 shadow-2 radius-8 h-100 bg-theme border border-white`}> <div className={`card p-3 shadow-2 radius-8 h-100 border border-white`}>
<div className="card-body text-center p-0"> <div className="card-body text-center p-0">
<Link <Link
href={`/admin/day-reservation-table?restaurantbranch=${restaruntBranch}`} href={`/admin/day-reservation-table?restaurantbranch=${restaruntBranch}`}
@ -38,13 +38,13 @@ const AdminDashBoardMain = () => {
<img src="/assets/images/day.webp" alt="reservation icon" /> <img src="/assets/images/day.webp" alt="reservation icon" />
</div> </div>
<h6 className="mb-0 mt-3">Day Reservation</h6> <h6 className="mb-0 text-theme mt-3">Day Reservation</h6>
</Link> </Link>
</div> </div>
</div> </div>
</div> </div>
<div className="col-xxl-3 col-lg-4 col-sm-6 cursor-pointer"> <div className="col-xxl-4 col-lg-4 col-sm-6 cursor-pointer">
<div className={`card p-3 shadow-2 radius-8 h-100 bg-theme border border-white`}> <div className={`card p-3 shadow-2 radius-8 h-100 border border-white`}>
<div className="card-body text-center p-0"> <div className="card-body text-center p-0">
<Link <Link
href={`/admin/date-reservation-table?restaurantbranch=${restaruntBranch}`} href={`/admin/date-reservation-table?restaurantbranch=${restaruntBranch}`}
@ -53,13 +53,13 @@ const AdminDashBoardMain = () => {
<img src="/assets/images/date.webp" alt="reservation icon" /> <img src="/assets/images/date.webp" alt="reservation icon" />
</div> </div>
<h6 className="mb-0 mt-3">Date Reservation</h6> <h6 className="mb-0 text-theme mt-3">Date Reservation</h6>
</Link> </Link>
</div> </div>
</div> </div>
</div> </div>
<div className="col-xxl-3 col-lg-4 col-sm-6 cursor-pointer"> <div className="col-xxl-4 col-lg-4 col-sm-6 cursor-pointer">
<div className={`card p-3 shadow-2 radius-8 h-100 bg-theme border border-white`}> <div className={`card p-3 shadow-2 radius-8 h-100 border border-white`}>
<div className="card-body text-center p-0"> <div className="card-body text-center p-0">
<Link <Link
href={`/admin/reserved-users?restaurantbranch=${restaruntBranch}`} href={`/admin/reserved-users?restaurantbranch=${restaruntBranch}`}
@ -68,28 +68,28 @@ const AdminDashBoardMain = () => {
<img src="/assets/images/reserved.webp" alt="reservation icon" /> <img src="/assets/images/reserved.webp" alt="reservation icon" />
</div> </div>
<h6 className="mb-0 mt-3">Reserved by User</h6> <h6 className="mb-0 text-theme mt-3">Reserved by User</h6>
</Link> </Link>
</div> </div>
</div> </div>
</div> </div>
<div className="col-xxl-3 col-lg-4 col-sm-6 cursor-pointer"> <div className="col-xxl-4 col-lg-4 col-sm-6 cursor-pointer">
<div className={`card p-3 shadow-2 radius-8 h-100 bg-theme border border-white`}> <div className={`card p-3 shadow-2 radius-8 h-100 border border-white`}>
<div className="card-body text-center p-0"> <div className="card-body text-center p-0">
<Link <Link
href={`/admin/pos/floor?restaurantbranch=${restaruntBranch}`} href={`/admin/floor-plan?restaurantbranch=${restaruntBranch}`}
> >
<div style={{ width: "300px", height: "300px" }}> <div style={{ width: "300px", height: "300px" }}>
<img src="/assets/images/plan.webp" alt="reservation icon" /> <img src="/assets/images/plan.webp" alt="reservation icon" />
</div> </div>
<h6 className="mb-0 mt-3">Floor Plan Update</h6> <h6 className="mb-0 text-theme mt-3">Floor Plan Update</h6>
</Link> </Link>
</div> </div>
</div> </div>
</div> </div>
<div className="col-xxl-3 col-lg-4 col-sm-6 cursor-pointer"> <div className="col-xxl-4 col-lg-4 col-sm-6 cursor-pointer">
<div className={`card p-3 shadow-2 radius-8 h-100 bg-theme border border-white`}> <div className={`card p-3 shadow-2 radius-8 h-100 border border-white`}>
<div className="card-body text-center p-0"> <div className="card-body text-center p-0">
<Link <Link
href={`/admin/pos/dashboard`} href={`/admin/pos/dashboard`}
@ -98,7 +98,7 @@ const AdminDashBoardMain = () => {
<img src="/assets/images/plan.webp" alt="reservation icon" /> <img src="/assets/images/plan.webp" alt="reservation icon" />
</div> </div>
<h6 className="mb-0 mt-3">POS System</h6> <h6 className="mb-0 text-theme mt-3">POS System</h6>
</Link> </Link>
</div> </div>
</div> </div>