From 9f1b31b81873cb166ce7c0d49bd15092e00ab792 Mon Sep 17 00:00:00 2001
From: Alaguraj0361 <alaguraj0361@gmail.com>
Date: Tue, 15 Jul 2025 12:02:52 +0530
Subject: [PATCH] sides and menu item page floor and room ui updated

---
 .../(floor-plan-update)/floor-plan/page.jsx   | 16 ++--
 src/app/admin/(pos-system)/pos/sides/page.jsx | 86 +++++++++++++------
 src/app/waiter/menu-items/page.jsx            |  4 +-
 3 files changed, 68 insertions(+), 38 deletions(-)

diff --git a/src/app/admin/(floor-plan-update)/floor-plan/page.jsx b/src/app/admin/(floor-plan-update)/floor-plan/page.jsx
index 0597aa6..7db3b8e 100644
--- a/src/app/admin/(floor-plan-update)/floor-plan/page.jsx
+++ b/src/app/admin/(floor-plan-update)/floor-plan/page.jsx
@@ -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}
diff --git a/src/app/admin/(pos-system)/pos/sides/page.jsx b/src/app/admin/(pos-system)/pos/sides/page.jsx
index 4ebb62c..b36b716 100644
--- a/src/app/admin/(pos-system)/pos/sides/page.jsx
+++ b/src/app/admin/(pos-system)/pos/sides/page.jsx
@@ -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>
diff --git a/src/app/waiter/menu-items/page.jsx b/src/app/waiter/menu-items/page.jsx
index 2b078f5..81c479e 100644
--- a/src/app/waiter/menu-items/page.jsx
+++ b/src/app/waiter/menu-items/page.jsx
@@ -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>