onClick(imageUrl)) : onClick
+ rectangular ? (blank ? null : () => onClick(iconImageUrl)) : onClick
}
className={styles["item-type-rect"]}
style={{
- top: selected ? "-10px" : "initial",
+ // Remove lift-up effect; only color changes when selected
+ backgroundColor: selected ? 'var(--brand-sage, #6B8F71)' : '#ffffff',
+ border: selected ? '1px solid var(--brand-sage, #6B8F71)' : '1px solid #e6e6e6',
+ color: selected ? '#ffffff' : '#4a6b5a'
}}
>
- {imageUrl != 'uploads/assets/All.png' ?
-
- :
- }
+ ) : (iconImageUrl && typeof iconImageUrl === 'string' && iconImageUrl.startsWith('icon:')) ? (
+
+
+
+ ) : (
+
+ )}
{blank && rectangular && (
)}
);
}
+
+function LucideCategoryIcon({ name, iconKey }) {
+ const key = pickIconKey(name, iconKey);
+ const size = '56%';
+ switch (key) {
+ case 'coffee':
+ return
;
+ case 'drink':
+ return
;
+ case 'dessert':
+ return
;
+ case 'food':
+ return
;
+ case 'all':
+ return
;
+ case 'plus':
+ return
;
+ default:
+ return
;
+ }
+}
+
+function pickIconKey(name, iconKey) {
+ const n = (name || '').toLowerCase();
+ if (iconKey === 'plus') return 'plus';
+ if (iconKey === 'all') return 'all';
+ if (/(kopi|coffee|espresso|latte|americano|kapal|brew)/.test(n)) return 'coffee';
+ if (/(teh|tea|drink|minum|soda|juice|jus|milk|susu|lemon)/.test(n)) return 'drink';
+ if (/(dessert|cake|kue|manis|ice|es krim|ice-cream)/.test(n)) return 'dessert';
+ if (/(food|makan|snack|cemilan|nasi|mie|noodle|soup|sup|ayam|daging|ikan|roti|sandwich|burger|pizza)/.test(n)) return 'food';
+ return 'food';
+}
diff --git a/src/components/ItemType.module.css b/src/components/ItemType.module.css
index edd7836..f3cd906 100644
--- a/src/components/ItemType.module.css
+++ b/src/components/ItemType.module.css
@@ -1,7 +1,7 @@
.item-type {
- width: calc(25vw - 20px);
- height: calc(30vw - 20px);
- margin: 1px 10px 0px;
+ width: auto;
+ height: auto;
+ margin: 0 4px; /* tighter spacing between tiles */
overflow: visible;
text-align: center;
align-items: center;
@@ -34,24 +34,33 @@
}
.item-type-rect {
position: relative;
- height: 13vw;
- width: 13vw;
+ height: clamp(48px, 9vw, 80px);
+ width: clamp(48px, 9vw, 80px);
object-fit: cover;
- border-radius: 15px;
+ border-radius: 12px;
background-color: #fff;
- box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+ box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.item-type-rect:hover {
+ background-color: var(--brand-sage-100, #E9F3ED);
+ border-color: var(--brand-sage, #6B8F71);
}
.item-type-name {
font-family: "Plus Jakarta Sans", sans-serif;
font-weight: 500;
font-style: normal;
- font-size: 14px;
+ font-size: 12px;
color: #333;
- width: calc(25vw - 30px);
+ width: auto;
text-align: center;
background-color: transparent;
- position: relative; /* Needed for positioning the button */
+ position: relative;
+ margin-top: 6px; /* keep label spacing constant; avoid jumping */
}
.item-type-image {
diff --git a/src/components/ItemTypeLister.css b/src/components/ItemTypeLister.css
index a0692e0..e4a47ce 100644
--- a/src/components/ItemTypeLister.css
+++ b/src/components/ItemTypeLister.css
@@ -1,11 +1,23 @@
+/* New clean, intuitive category bar */
.item-type-lister {
- width: 100vw;
+ width: 100%;
overflow-x: auto;
white-space: nowrap;
- padding: 3px 0px;
- margin-bottom: -5px;
+ padding: 2px 0px; /* tighter top/bottom padding */
}
+.category-bar {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ overflow-x: auto;
+ padding: 8px 12px 4px;
+ -ms-overflow-style: none; /* IE and Edge */
+ scrollbar-width: none; /* Firefox */
+}
+.category-bar::-webkit-scrollbar { display: none; }
+
+/* Legacy horizontal tile list container (used for tile UI) */
.item-type-list {
display: inline-flex;
-ms-overflow-style: none; /* IE and Edge */
@@ -13,11 +25,44 @@
overflow-y: hidden;
}
-.item-type {
- display: inline-block;
- margin-right: 20px;
- /* Space between items */
+.category-chip {
+ flex: 0 0 auto;
+ display: inline-flex;
+ align-items: center;
+ gap: 8px;
+ height: 36px;
+ padding: 0 14px;
+ border-radius: 999px;
+ border: 1px solid #e6e6e6;
+ background: #ffffff;
+ color: #2d2d2d;
+ font-family: "Plus Jakarta Sans", sans-serif;
+ font-weight: 500;
+ font-size: 14px;
+ cursor: pointer;
+ user-select: none;
}
+.category-chip:hover { border-color: #d0d0d0; }
+.category-chip.selected {
+ background: #73a585;
+ color: #ffffff;
+ border-color: #73a585;
+}
+
+.category-chip .chip-icon {
+ width: 18px;
+ height: 18px;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.add-item-chip {
+ background: #f4f7f5;
+ border-color: #dfe7e2;
+ color: #4a6b5a;
+}
+.add-item-chip:hover { background: #eaf1ed; }
.rect-creator {
width: 100vw;
height: 100vh;
@@ -55,13 +100,4 @@
bottom: 0;
align-self: center; /* Center the button horizontally */
}
-.item-type-name {
- font-family: "Plus Jakarta Sans", sans-serif;
- font-style: normal;
- height: 20vw;
- font-size: 1.5rem;
- font-weight: 500;
- color: black;
- text-transform: capitalize;
- z-index: 301;
-}
+/* Legacy styles kept for ItemType grid if needed elsewhere */
diff --git a/src/components/ItemTypeLister.js b/src/components/ItemTypeLister.js
index 996fc43..8ede325 100644
--- a/src/components/ItemTypeLister.js
+++ b/src/components/ItemTypeLister.js
@@ -2,7 +2,7 @@ import React, { useState, useRef, useEffect } from "react";
import smoothScroll from "smooth-scroll-into-view-if-needed";
import "./ItemTypeLister.css";
import ItemType from "./ItemType";
-import { createItem, createItemType } from "../helpers/itemHelper.js";
+import { createItem } from "../helpers/itemHelper.js";
import { getImageUrl } from "../helpers/itemHelper";
import ItemLister from "./ItemLister";
@@ -22,24 +22,6 @@ const ItemTypeLister = ({
const newItemDivRef = useRef(null);
const [items, setItems] = useState([]);
- const [itemTypeName, setItemTypeName] = useState("");
- const handleCreateItem = (name, price, selectedImage, previewUrl, description, promoPrice) => {
- console.log(previewUrl);
- const newItem = {
- itemId: items.length + 1,
- name,
- price,
- selectedImage,
- image: previewUrl,
- availability: true,
- description,
- promoPrice
- };
-
- // Update the items state with the new item
- setItems((prevItems) => [...prevItems, newItem]);
- };
-
// Effect to handle changes to isAddingNewItem
useEffect(() => {
if (isAddingNewItem && newItemDivRef.current) {
@@ -67,90 +49,63 @@ const ItemTypeLister = ({
document.body.style.overflow = !isAddingNewItem ? "hidden" : "auto";
};
- async function handleCreate(name, selectedImage) {
- createItemType(shopId, name, selectedImage);
- }
+ // Removed legacy image upload logic used by the old tile view
+
+ const canManage = user && (user.user_id == shopOwnerId || user.cafeId == shopId);
- const [selectedImage, setSelectedImage] = useState(null);
- const [previewUrl, setPreviewUrl] = useState("");
- const [imageUrl, setImaguUrl] = useState("");
-
- useEffect(() => {
- // if (selectedImage) {
- // const reader = new FileReader();
- // reader.onloadend = () => {
- // setPreviewUrl(reader.result);
- // };
- // reader.readAsDataURL(selectedImage);
- // } else {
- // setPreviewUrl(getImageUrl(imageUrl));
- setPreviewUrl(selectedImage);
- // }
- }, [selectedImage, imageUrl]);
- const handleImageChange = (e) => {
- setSelectedImage(e);
+ const formatName = (name) => {
+ if (!name) return name;
+ return name
+ .toLowerCase()
+ .replace(/\b\w/g, (c) => c.toUpperCase());
};
+
return (
-
-
- {isEditMode &&
- !isAddingNewItem &&
- user && (
- user.user_id == shopOwnerId || user.cafeId == shopId) && (
-
- )}
- {user &&(
- user.user_id == shopOwnerId || user.cafeId == shopId) &&
- isAddingNewItem && (
- <>
-
createItem(shopId, name, price, selectedImage, itemTypeId, description, promoPrice)}
- beingEditedType={beingEditedType}
- setBeingEditedType={setBeingEditedType}
- alwaysEdit={true}
- handleUnEdit={toggleAddNewItem}
- />
-
- )}
+
+
+ {isEditMode && !isAddingNewItem && canManage && (
+
+ )}
+
+ {canManage && isAddingNewItem && (
+ createItem(shopId, name, price, selectedImage, itemTypeId, description, promoPrice)}
+ beingEditedType={beingEditedType}
+ setBeingEditedType={setBeingEditedType}
+ alwaysEdit={true}
+ handleUnEdit={toggleAddNewItem}
+ />
+ )}
+
{itemTypes && itemTypes.length > 0 && (
onFilterChange(0)}
- imageUrl={"uploads/assets/All.png"}
+ imageUrl={"icon:all"}
+ selected={filterId === 0}
/>
)}
- {itemTypes &&
- itemTypes.map(
- (itemType) =>
- (
- itemType.itemList.length > 0 || (user && (user.user_id == shopOwnerId || user.cafeId == shopId))) && (
- onFilterChange(itemType.itemTypeId)}
- selected={filterId === itemType.itemTypeId}
- />
- )
- )}
+
+ {itemTypes && itemTypes.map((itemType) => (
+ onFilterChange(itemType.itemTypeId)}
+ selected={filterId === itemType.itemTypeId}
+ />
+ ))}
+
{(lastTransaction != null || cartItemsLength > 0) &&
{lastTransaction != null && '+'}{cartItemsLength} item
@@ -338,7 +339,7 @@ function CafePage({
}
{user.username &&
-
{
- currentTarget.onerror = null; // prevents looping
+ currentTarget.onerror = null;
currentTarget.src =
"https://png.pngtree.com/png-vector/20221125/ourmid/pngtree-no-image-available-icon-flatvector-illustration-pic-design-profile-vector-png-image_40966566.jpg";
}}
alt={itemName}
- style={{
- filter: !isAvailable ? "grayscale(100%)" : "none",
- }}
+ style={{ filter: !isAvailable ? "grayscale(100%)" : "none" }}
className={styles.imageContainer}
/>
- //
)}