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 */}
|
||||
<div
|
||||
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)}
|
||||
>
|
||||
<Icon icon="lucide:plus" className="text-lg" />
|
||||
@ -485,15 +485,15 @@ const DineInInner = () => {
|
||||
<div
|
||||
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"}`}
|
||||
style={{ width: "auto", minWidth: "120px", maxWidth: "200px", borderRadius: "12px", height: "60px" }}
|
||||
style={{ width: "auto", minWidth: "120px", maxWidth: "200px", borderRadius: "12px", height: "40px" }}
|
||||
onClick={() => {
|
||||
setSelectedFloor(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
|
||||
className="text-truncate text-sm fw-semibold w-100 text-center"
|
||||
className="text-truncate text-sm fw-semibold w-100"
|
||||
title={floor.floorname}
|
||||
>
|
||||
{floor.floorname}
|
||||
@ -541,7 +541,7 @@ const DineInInner = () => {
|
||||
{/* Add Room Card */}
|
||||
<div
|
||||
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)}
|
||||
>
|
||||
<div className="text-theme">
|
||||
@ -554,15 +554,15 @@ const DineInInner = () => {
|
||||
<div
|
||||
key={room.name}
|
||||
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={() => {
|
||||
setSelectedRoom(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
|
||||
className="text-truncate text-center w-100 text-sm fw-semibold"
|
||||
className="text-truncatew-100 text-sm fw-semibold"
|
||||
title={room.roomname}
|
||||
>
|
||||
{room.roomname}
|
||||
|
||||
@ -203,8 +203,8 @@ const SidesPageInner = () => {
|
||||
return (
|
||||
<div className="container-fluid" style={{ marginBottom: "100px" }}>
|
||||
{/* Header + Create Button */}
|
||||
<div className="card h-100 p-0 radius-12">
|
||||
<div className="card-body p-3 p-lg-5">
|
||||
<div className="">
|
||||
<div className="">
|
||||
<div className="d-flex justify-content-between align-items-center mb-3">
|
||||
<h6 className="mb-0">Sides</h6>
|
||||
<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) => {
|
||||
const gradientClass = gradientClasses[index % gradientClasses.length];
|
||||
return (
|
||||
<div className="col-xxl-3 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="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 border border-white position-relative`}>
|
||||
<div className="position-absolute top-0 end-0 me-1 mt-1 d-flex gap-2">
|
||||
<div className="dropdown">
|
||||
<button className="btn px-1 py-1 d-flex align-items-center text-primary-light" data-bs-toggle="dropdown">
|
||||
<Icon icon="entypo:dots-three-vertical" />
|
||||
</button>
|
||||
<ul className="dropdown-menu">
|
||||
<li>
|
||||
<Link href="#" className="dropdown-item" onClick={(e) => {
|
||||
e.preventDefault();
|
||||
handleEdit(room);
|
||||
}}>
|
||||
<Icon icon="lucide:edit" /> Edit
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="#" className="dropdown-item" onClick={(e) => {
|
||||
e.preventDefault();
|
||||
setDeleteConfirm({ show: true, id: room.name });
|
||||
}}>
|
||||
<Icon icon="fluent:delete-24-regular" /> Delete
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
<div className='dropdown'>
|
||||
<button
|
||||
className='btn px-1 py-1 d-flex align-items-center text-primary-light'
|
||||
type='button'
|
||||
data-bs-toggle='dropdown'
|
||||
aria-expanded='false'
|
||||
>
|
||||
<Icon icon='entypo:dots-three-vertical' className='menu-icon' />
|
||||
</button>
|
||||
<ul className='dropdown-menu'>
|
||||
<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();
|
||||
handleEdit(room);
|
||||
}}
|
||||
> <Icon icon='lucide:edit' className='menu-icon' />
|
||||
Edit
|
||||
</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 className="card-body text-center p-0">
|
||||
<h6 className="text-lg mt-0 mb-0">{room?.sidename}</h6>
|
||||
<p className="mb-0 text-sm">{room?.description}</p>
|
||||
<div className="card-body text-center p-3">
|
||||
<img
|
||||
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>
|
||||
|
||||
@ -335,7 +335,7 @@ const MenuItemsCategoryInner = () => {
|
||||
setShowItemModal(true);
|
||||
}}
|
||||
>
|
||||
<div className="card-body text-center p-0">
|
||||
<div className="card-body text-center p-3">
|
||||
<img
|
||||
src={menu.profileImg}
|
||||
alt=""
|
||||
@ -344,7 +344,7 @@ const MenuItemsCategoryInner = () => {
|
||||
{/* <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" }} />
|
||||
</div> */}
|
||||
<div className="p-3 pt-0">
|
||||
<div className="p-0">
|
||||
<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>
|
||||
<h6 className="text-md mb-0 mt-1">${menu.price.toFixed(2)}</h6>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user