sides and menu item page floor and room ui updated
This commit is contained in:
Alaguraj0361
parent
77a286002c
commit
9f1b31b818
@ -474,7 +474,7 @@ const DineInInner = () => {
|
|||||||
{/* Add Floor Card */}
|
{/* Add Floor Card */}
|
||||||
<div
|
<div
|
||||||
className="card shadow-sm bg-light border-0 text-center cursor-pointer d-flex align-items-center justify-content-center"
|
className="card shadow-sm bg-light border-0 text-center cursor-pointer d-flex align-items-center justify-content-center"
|
||||||
style={{ width: "60px", height: "60px", borderRadius: "12px" }}
|
style={{ width: "60px", height: "40px", borderRadius: "12px" }}
|
||||||
onClick={() => setShowFloorModal(true)}
|
onClick={() => setShowFloorModal(true)}
|
||||||
>
|
>
|
||||||
<Icon icon="lucide:plus" className="text-lg" />
|
<Icon icon="lucide:plus" className="text-lg" />
|
||||||
@ -485,15 +485,15 @@ const DineInInner = () => {
|
|||||||
<div
|
<div
|
||||||
key={floor.name}
|
key={floor.name}
|
||||||
className={`card shadow-sm position-relative cursor-pointer border-2 px-2 py-1 ${selectedFloor === floor.name ? "bg-theme text-white" : "border-light"}`}
|
className={`card shadow-sm position-relative cursor-pointer border-2 px-2 py-1 ${selectedFloor === floor.name ? "bg-theme text-white" : "border-light"}`}
|
||||||
style={{ width: "auto", minWidth: "120px", maxWidth: "200px", borderRadius: "12px", height: "60px" }}
|
style={{ width: "auto", minWidth: "120px", maxWidth: "200px", borderRadius: "12px", height: "40px" }}
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
setSelectedFloor(floor.name);
|
setSelectedFloor(floor.name);
|
||||||
getRoomData(floor.name);
|
getRoomData(floor.name);
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<div className="card-body px-2 py-1 d-flex align-items-center justify-content-center" style={{ minHeight: "60px" }}>
|
<div className="card-body px-3 py-1 d-flex align-items-center justify-content-center" >
|
||||||
<span
|
<span
|
||||||
className="text-truncate text-sm fw-semibold w-100 text-center"
|
className="text-truncate text-sm fw-semibold w-100"
|
||||||
title={floor.floorname}
|
title={floor.floorname}
|
||||||
>
|
>
|
||||||
{floor.floorname}
|
{floor.floorname}
|
||||||
@ -541,7 +541,7 @@ const DineInInner = () => {
|
|||||||
{/* Add Room Card */}
|
{/* Add Room Card */}
|
||||||
<div
|
<div
|
||||||
className="card shadow-sm bg-light border-0 text-center cursor-pointer d-flex align-items-center justify-content-center"
|
className="card shadow-sm bg-light border-0 text-center cursor-pointer d-flex align-items-center justify-content-center"
|
||||||
style={{ width: "60px", height: "60px", borderRadius: "12px" }}
|
style={{ width: "60px", height: "40px", borderRadius: "12px" }}
|
||||||
onClick={() => setShowRoomModal(true)}
|
onClick={() => setShowRoomModal(true)}
|
||||||
>
|
>
|
||||||
<div className="text-theme">
|
<div className="text-theme">
|
||||||
@ -554,15 +554,15 @@ const DineInInner = () => {
|
|||||||
<div
|
<div
|
||||||
key={room.name}
|
key={room.name}
|
||||||
className={`card shadow-sm position-relative cursor-pointer border-2 ${selectedRoom === room.name && "bg-theme text-white"}`}
|
className={`card shadow-sm position-relative cursor-pointer border-2 ${selectedRoom === room.name && "bg-theme text-white"}`}
|
||||||
style={{ width: "auto", minWidth: "120px", maxWidth: "200px", height: "60px", borderRadius: "12px" }}
|
style={{ width: "auto", minWidth: "120px", maxWidth: "200px", height: "40px", borderRadius: "12px" }}
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
setSelectedRoom(room.name);
|
setSelectedRoom(room.name);
|
||||||
getTableData(room.name);
|
getTableData(room.name);
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<div className="card-body d-flex align-items-center justify-content-center p-2">
|
<div className="card-body px-3 py-1 d-flex align-items-center ">
|
||||||
<span
|
<span
|
||||||
className="text-truncate text-center w-100 text-sm fw-semibold"
|
className="text-truncatew-100 text-sm fw-semibold"
|
||||||
title={room.roomname}
|
title={room.roomname}
|
||||||
>
|
>
|
||||||
{room.roomname}
|
{room.roomname}
|
||||||
|
|||||||
@ -203,8 +203,8 @@ const SidesPageInner = () => {
|
|||||||
return (
|
return (
|
||||||
<div className="container-fluid" style={{ marginBottom: "100px" }}>
|
<div className="container-fluid" style={{ marginBottom: "100px" }}>
|
||||||
{/* Header + Create Button */}
|
{/* Header + Create Button */}
|
||||||
<div className="card h-100 p-0 radius-12">
|
<div className="">
|
||||||
<div className="card-body p-3 p-lg-5">
|
<div className="">
|
||||||
<div className="d-flex justify-content-between align-items-center mb-3">
|
<div className="d-flex justify-content-between align-items-center mb-3">
|
||||||
<h6 className="mb-0">Sides</h6>
|
<h6 className="mb-0">Sides</h6>
|
||||||
<button className="btn btn-bg-theme radius-8 px-20 py-11" onClick={() => setShowModal(true)}>
|
<button className="btn btn-bg-theme radius-8 px-20 py-11" onClick={() => setShowModal(true)}>
|
||||||
@ -222,36 +222,66 @@ const SidesPageInner = () => {
|
|||||||
roomData?.map((room, index) => {
|
roomData?.map((room, index) => {
|
||||||
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={room?.name}>
|
<div className="col-xxl-2 col-lg-4 col-sm-6 cursor-pointer" key={room?.name}>
|
||||||
<div className={`card p-3 shadow-2 radius-8 h-100 bg-theme border border-white position-relative`}>
|
<div className={`card p-3 shadow-2 radius-8 h-100 border border-white position-relative`}>
|
||||||
<div className="position-absolute top-0 end-0 me-1 mt-1 d-flex gap-2">
|
<div className="position-absolute top-0 end-0 me-1 mt-1 d-flex gap-2">
|
||||||
<div className="dropdown">
|
<div className="dropdown">
|
||||||
<button className="btn px-1 py-1 d-flex align-items-center text-primary-light" data-bs-toggle="dropdown">
|
<div className='dropdown'>
|
||||||
<Icon icon="entypo:dots-three-vertical" />
|
<button
|
||||||
</button>
|
className='btn px-1 py-1 d-flex align-items-center text-primary-light'
|
||||||
<ul className="dropdown-menu">
|
type='button'
|
||||||
<li>
|
data-bs-toggle='dropdown'
|
||||||
<Link href="#" className="dropdown-item" onClick={(e) => {
|
aria-expanded='false'
|
||||||
e.preventDefault();
|
>
|
||||||
handleEdit(room);
|
<Icon icon='entypo:dots-three-vertical' className='menu-icon' />
|
||||||
}}>
|
</button>
|
||||||
<Icon icon="lucide:edit" /> Edit
|
<ul className='dropdown-menu'>
|
||||||
</Link>
|
<li>
|
||||||
</li>
|
<Link
|
||||||
<li>
|
href="#"
|
||||||
<Link href="#" className="dropdown-item" onClick={(e) => {
|
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'
|
||||||
e.preventDefault();
|
onClick={(e) => {
|
||||||
setDeleteConfirm({ show: true, id: room.name });
|
e.preventDefault();
|
||||||
}}>
|
handleEdit(room);
|
||||||
<Icon icon="fluent:delete-24-regular" /> Delete
|
}}
|
||||||
</Link>
|
> <Icon icon='lucide:edit' className='menu-icon' />
|
||||||
</li>
|
Edit
|
||||||
</ul>
|
</Link>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<Link
|
||||||
|
href="#"
|
||||||
|
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) => {
|
||||||
|
e.preventDefault();
|
||||||
|
setDeleteConfirm({ show: true, id: room.name });
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Icon
|
||||||
|
icon='fluent:delete-24-regular'
|
||||||
|
className='menu-icon'
|
||||||
|
/>
|
||||||
|
Delete
|
||||||
|
</Link>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="card-body text-center p-0">
|
<div className="card-body text-center p-3">
|
||||||
<h6 className="text-lg mt-0 mb-0">{room?.sidename}</h6>
|
<img
|
||||||
<p className="mb-0 text-sm">{room?.description}</p>
|
src={`${ImageBase}/api${room.item_image}`}
|
||||||
|
alt=""
|
||||||
|
className="border br-white border-width-2-px w-100-px h-100-px rounded-circle object-fit-cover"
|
||||||
|
/>
|
||||||
|
<div className="p-0">
|
||||||
|
<h6 className="text-lg mb-0 mt-1">{room?.sidename}</h6>
|
||||||
|
<span className="text-secondary-light text-sm lh-sm mb-1">{room?.description}</span>
|
||||||
|
<h6 className="text-md mb-0 mt-1">${room.price.toFixed(2)}</h6>
|
||||||
|
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -335,7 +335,7 @@ const MenuItemsCategoryInner = () => {
|
|||||||
setShowItemModal(true);
|
setShowItemModal(true);
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<div className="card-body text-center p-0">
|
<div className="card-body text-center p-3">
|
||||||
<img
|
<img
|
||||||
src={menu.profileImg}
|
src={menu.profileImg}
|
||||||
alt=""
|
alt=""
|
||||||
@ -344,7 +344,7 @@ const MenuItemsCategoryInner = () => {
|
|||||||
{/* <div className="w-100 max-h-150-px radius-0 overflow-hidden" >
|
{/* <div className="w-100 max-h-150-px radius-0 overflow-hidden" >
|
||||||
<img alt="" className="w-100 h-150-px object-fit-cover" src="/assets/images/blog/blog5.png" style={{ height: "150px" }} />
|
<img alt="" className="w-100 h-150-px object-fit-cover" src="/assets/images/blog/blog5.png" style={{ height: "150px" }} />
|
||||||
</div> */}
|
</div> */}
|
||||||
<div className="p-3 pt-0">
|
<div className="p-0">
|
||||||
<h6 className="text-lg mb-1 mt-1">{menu.menuitemname}</h6>
|
<h6 className="text-lg mb-1 mt-1">{menu.menuitemname}</h6>
|
||||||
<span className="text-secondary-light text-sm lh-sm mb-1">{menu.parent}</span>
|
<span className="text-secondary-light text-sm lh-sm mb-1">{menu.parent}</span>
|
||||||
<h6 className="text-md mb-0 mt-1">${menu.price.toFixed(2)}</h6>
|
<h6 className="text-md mb-0 mt-1">${menu.price.toFixed(2)}</h6>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user