kediritechnopark/kedaimaster
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ok

Browse Source
This commit is contained in:
karyamanswasta
2025-08-27 01:55:07 +07:00
parent b28c6ed0fe
commit 6127415e37
11 changed files with 733 additions and 389 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/App.css
View File

@@ -64,6 +64,11 @@ body {
/* removed two-column layout; reverted to single column */
/* Ensure sticky cart bar stays above item overlays */
.StickyCartBar {
z-index: 3000 !important;
}
.App-link {
color: #61dafb;
}

174
src/components/Item.js
View File

@@ -4,6 +4,7 @@ const Item = ({
blank,
forCart,
forInvoice,
portrait,
name: initialName,
description: initialDescription,
price: initialPrice,
@@ -53,10 +54,10 @@ const Item = ({
};
const handleCreate = () => {
handleCreateItem(itemName, itemPrice, selectedImage, previewUrl);
handleCreateItem(itemName, itemPrice, selectedImage, previewUrl, itemDescription, promoPrice);
};
const handleUpdate = () => {
handleUpdateItem(itemName, itemPrice, selectedImage, previewUrl);
handleUpdateItem(itemName, itemPrice, selectedImage, itemDescription, promoPrice);
};
const handleRemoveClick = () => {
@@ -94,21 +95,57 @@ const Item = ({
setItemName(event.target.value);
};
const toTitleCase = (str) => {
if (!str) return str;
return String(str)
.toLowerCase()
.replace(/(^|[\s\-/'])([a-zA-Z\u00C0-\u024F])/g, (m, p1, p2) => p1 + p2.toUpperCase());
};
const displayName = toTitleCase(itemName);
return (
<div className={`${!last && !forInvoice ? styles.notLast : ""}`}>
<div className={`${styles.item} ${forInvoice ? styles.itemInvoice : ""} `}>
<div className={`${(!portrait && !last && !forInvoice) ? styles.notLast : ""}`}>
<div className={`${styles.item} ${forInvoice ? styles.itemInvoice : ""} ${portrait ? styles.itemPortrait : ""} `}>
{!forInvoice && (
<img
src={previewUrl}
onError={({ currentTarget }) => {
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" }}
className={styles.imageContainer}
/>
<div className={styles.imageWrap}>
<img
src={previewUrl}
onError={({ currentTarget }) => {
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" }}
className={styles.imageContainer}
/>
{promoPrice && promoPrice != 0 && promoPrice != '' && (
<div className={styles.promoPill}>Promo</div>
)}
{portrait && (
<>
<div className={styles.overlayName}>{displayName}</div>
<div className={styles.bottomOverlay}>
<div className={styles.overlayPriceCol}>
{(promoPrice && promoPrice != 0 && promoPrice != '') ? (
<>
<span className={styles.overlayOriginal}>Rp {formatCurrency(initialPrice)}</span>
<span className={styles.overlayPromo}>Rp {formatCurrency(promoPrice)}</span>
</>
) : (
<span className={styles.overlayPromo}>Rp {formatCurrency(initialPrice)}</span>
)}
</div>
<div className={styles.qtyGroup}>
<button className={styles.qtyBtn} onClick={handleNegativeClick} aria-label="Kurangi">-</button>
<span className={styles.qtyVal}>{itemQty}</span>
<button className={styles.qtyBtn} onClick={handlePlusClick} aria-label="Tambah">+</button>
</div>
</div>
</>
)}
</div>
)}
<div className={styles.itemDetails}>
{forInvoice &&
@@ -129,37 +166,27 @@ const Item = ({
</svg>
}
{/* <input
className={`${
forInvoice ? styles.itemInvoiceName : styles.itemName
} ${isBeingEdit || blank ? styles.blank : styles.notblank} ${
!isAvailable ? styles.disabled : ""
}`}
value={itemName}
placeholder="Nama item"
onChange={handleNameChange}
disabled={!blank && !isBeingEdit}
/> */}
<div style={{ marginRight: forInvoice ? 10 : 0 }}>
<h3 className={styles.title} style={{ width: forInvoice ? 160 : 'auto' }}>{itemName}</h3>
{!forInvoice && (
<div className={styles.priceRow}>
{promoPrice && promoPrice != 0 && promoPrice != '' ? (
<>
<div className={styles.promoBadge} style={{ background: !isAvailable ? 'gray' : undefined }}>
Promo {(((initialPrice - promoPrice) / initialPrice) * 100).toFixed(0)}%
</div>
<div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
<span className={styles.priceNow}>Rp {formatCurrency(promoPrice)}</span>
<span className={styles.priceOld}>Rp {formatCurrency(initialPrice)}</span>
</div>
</>
) : (
<span className={styles.priceNow}>Rp {formatCurrency(initialPrice)}</span>
)}
</div>
)}
</div>
{/* Title under image for portrait, non-overlay */}
{portrait && null}
{!portrait && (
<div style={{ marginRight: forInvoice ? 10 : 0 }}>
<h3 className={styles.title} style={{ width: forInvoice ? 160 : 'auto' }}>{displayName}</h3>
{!forInvoice && (
<div className={styles.priceRow}>
{promoPrice && promoPrice != 0 && promoPrice != '' ? (
<>
<div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
<span className={`${styles.itemPriceList} ${styles.promo}`}>Rp {formatCurrency(promoPrice)}</span>
<span className={`${styles.itemPriceList} ${styles.original}`}>Rp {formatCurrency(initialPrice)}</span>
</div>
</>
) : (
<span className={styles.itemPriceList}>Rp {formatCurrency(initialPrice)}</span>
)}
</div>
)}
</div>
)}
{forInvoice && (
<>
<p className={styles.multiplySymbol}>x</p>
@@ -168,30 +195,30 @@ const Item = ({
)}
{!forInvoice && (
!isBeingEdit && itemQty > 0 ? (
<div className={styles.itemQty}>
<div className={styles.qtyGroup}>
<button className={styles.qtyBtn} onClick={handleNegativeClick} aria-label="Kurangi">-</button>
{!blank && !isBeingEdit ? (
<span className={styles.qtyVal}>{itemQty}</span>
) : (
<input className={styles.itemQtyInput} value={itemQty} onChange={handleQtyChange} disabled={!blank && !isBeingEdit} />
)}
<button className={styles.qtyBtn} onClick={handlePlusClick} aria-label="Tambah">+</button>
portrait ? (
(blank || isBeingEdit) ? (
<div className={styles.itemQty}>
<button className={styles.addButton} style={{ backgroundColor: '#ffffff', color: 'var(--brand-sage, #6B8F71)', borderColor: 'var(--brand-sage, #6B8F71)', minWidth: 90, height: 36, fontSize: 14 }} onClick={isBeingEdit ? handleUpdate : handleCreate}>
{isBeingEdit ? 'Simpan' : 'Buat'}
</button>
</div>
</div>
) : !blank && !isBeingEdit ? (
<div className={styles.itemQty}>
<button className={styles.addButton} onClick={handlePlusClick} disabled={!isAvailable}>
Pesan
</button>
</div>
) : null
) : (
<div className={styles.itemQty}>
<button className={styles.addButton} style={{ backgroundColor: '#ffffff', color: 'var(--brand-sage, #6B8F71)', borderColor: 'var(--brand-sage, #6B8F71)', width: 150 }} onClick={isBeingEdit ? handleUpdate : handleCreate}>
{isBeingEdit ? 'Simpan' : 'Buat'}
</button>
</div>
!isBeingEdit ? (
<div className={styles.itemQty}>
<div className={styles.qtyGroup}>
<button className={styles.qtyBtn} onClick={handleNegativeClick} aria-label="Kurangi" style={{ width: 32, height: 32, fontSize: 18 }}>-</button>
<span className={styles.qtyVal}>{itemQty}</span>
<button className={styles.qtyBtn} onClick={handlePlusClick} aria-label="Tambah" style={{ width: 32, height: 32, fontSize: 18 }}>+</button>
</div>
</div>
) : (
<div className={styles.itemQty}>
<button className={styles.addButton} style={{ backgroundColor: '#ffffff', color: 'var(--brand-sage, #6B8F71)', borderColor: 'var(--brand-sage, #6B8F71)', width: 130, height: 36, fontSize: 14 }} onClick={isBeingEdit ? handleUpdate : handleCreate}>
{isBeingEdit ? 'Simpan' : 'Buat'}
</button>
</div>
)
)
)}
@@ -204,17 +231,8 @@ const Item = ({
ⓧ
</div>
)}
{/* {blank && (
<button className={styles.createItem} onClick={handleCreate}>
Create Item
</button>
)} */}
</div>
{itemDescription && itemDescription != 'undefined' && itemDescription?.length ? (
<div>
<p className={styles.desc} style={{ padding: '4px 6px', margin: 0 }}>{itemDescription}</p>
</div>
) : null}
{null}
</div>
);
};

298
src/components/Item.module.css
View File

@@ -1,7 +1,6 @@
.itemContainer {
display: flex;
flex-direction: column;
/* gap: 10px; */
}
.item {
@@ -9,24 +8,40 @@
align-items: center;
justify-content: space-between;
width: 100%;
gap: 10px;
padding: 8px 10px;
margin: 6px 0;
gap: 8px; /* Increased gap for better spacing */
padding: 6px 8px; /* Increased padding for better touch targets */
margin: 8px 0; /* Increased margin for better separation */
border: 1px solid #e3ece6;
border-radius: 12px;
border-radius: 8px; /* Slightly increased border radius */
background: var(--brand-sage-50, #F0F6F2);
box-shadow: 0 1px 3px rgba(0,0,0,0.03);
box-sizing: border-box;
transition: box-shadow 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}
.item:hover { box-shadow: 0 4px 10px rgba(0,0,0,0.08); border-color: #d9e6de; }
.item:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.08); border-color: #d9e6de; }
.item:not(.itemInvoice) {
/* border-top: 2px solid #00000017; */
/* Portrait variant for cafe page grid */
.itemPortrait {
flex-direction: column;
align-items: stretch;
padding: 0;
margin: 0;
border: none;
background: transparent;
box-shadow: none;
}
.imageWrap { position: relative; border-radius: 8px; overflow: hidden; box-shadow: 0 6px 18px rgba(0,0,0,0.12); }
.imageContainer { display: block; width: 100%; height: 100%; object-fit: cover; }
.itemPortrait .imageWrap { width: 100%; height: auto; aspect-ratio: 1 / 1; }
.itemPortrait .imageContainer { border-radius: 6px; }
.itemPortrait .itemDetails { align-items: flex-start; text-align: left; gap: 8px; } /* Increased gap */
.itemPortrait .itemQty { justify-content: flex-start; }
.itemPortrait .title { font-size: 14px; } /* Increased font size */
.itemPortrait .priceNow { font-size: 13px; } /* Increased font size */
.notLast{
padding-bottom: 10px;
padding-bottom: 12px; /* Increased padding */
border-bottom: 2px solid #00000017;
}
@@ -34,14 +49,14 @@
flex-direction: row;
align-items: center;
justify-content: space-around;
font-size: 18px;
font-size: 20px; /* Increased font size */
margin-top: 0px;
margin-bottom: 0px;
padding-top: 0px;
}
.itemInvoice:last-child {
margin-bottom: 0; /* Remove margin-bottom for the last child */
margin-bottom: 0;
}
.itemImage {
@@ -49,29 +64,29 @@
height: 100%;
}
.imageContainer {
.item:not(.itemPortrait) .imageContainer {
position: relative;
width: clamp(68px, 18vw, 96px);
height: clamp(68px, 18vw, 96px);
border-radius: 10px;
width: clamp(80px, 20vw, 110px); /* Increased size */
height: clamp(80px, 20vw, 110px); /* Increased size */
border-radius: 12px; /* Increased border radius */
object-fit: cover;
}
.overlay {
position: absolute;
top: 15px;
left: 8px;
right: 8px;
bottom: 15px;
top: 18px; /* Increased top position */
left: 10px; /* Increased left position */
right: 10px; /* Increased right position */
bottom: 18px; /* Increased bottom position */
background-color: rgba(0, 0, 0, 0.5);
color: white;
display: flex;
justify-content: center;
align-items: center;
border-radius: 20px;
border-radius: 20px; /* Increased border radius */
cursor: pointer;
transition: background-color 0.3s ease;
font-size: 3.3vw;
font-size: 3.8vw; /* Increased font size */
}
.overlay:hover {
@@ -87,19 +102,19 @@
flex-direction: column;
justify-content: center;
align-items: stretch;
gap: 6px;
margin-left: 6px;
margin-right: 6px;
gap: 8px; /* Increased gap */
margin-left: 8px; /* Increased margin */
margin-right: 8px; /* Increased margin */
flex: 1;
min-width: 0;
}
.infoRow { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.infoRow { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; } /* Increased gap */
.itemInvoiceDetails {
display: flex;
flex-direction: column;
justify-content: space-between;
margin-left: 10px;
margin-left: 12px; /* Increased margin */
margin-top: -15px;
flex-grow: 1;
}
@@ -107,20 +122,20 @@
.itemName {
font-family: "Plus Jakarta Sans", sans-serif;
font-style: normal;
width: calc(100% - 15px); /* Adjust the width to prevent overflow */
font-size: 5vw;
width: calc(100% - 18px); /* Adjusted width */
font-size: 5.5vw; /* Increased font size */
font-weight: 500;
margin-top: 0;
margin: 0 5px;
margin: 0 6px; /* Increased margin */
color: rgba(88, 55, 50, 1);
background-color: transparent;
text-transform: capitalize;
}
.itemInvoiceName {
width: calc(260% - 15px);
width: calc(280% - 18px); /* Adjusted width */
background-color: transparent;
font-size: 1.3rem;
font-size: 1.4rem; /* Increased font size */
font-weight: 500;
}
@@ -138,8 +153,8 @@
font-family: "Plus Jakarta Sans", sans-serif;
font-style: normal;
font-weight: 600;
font-size: 0.9rem;
margin-left: 5px;
font-size: 1rem; /* Increased font size */
margin-left: 6px; /* Increased margin */
color: #d9c61c;
text-align: right;
margin-top: 22px;
@@ -149,18 +164,18 @@
display: flex;
align-items: center;
justify-content: flex-end;
gap: 8px;
min-height: 32px;
gap: 10px; /* Increased gap */
min-height: 36px; /* Increased height */
}
.itemQtyValue {
font-family: "Plus Jakarta Sans", sans-serif;
font-style: normal;
font-weight: 600;
margin-top: 19px;
margin-left: 1px;
margin-right: 1px;
width: 25px;
margin-top: 22px; /* Increased margin */
margin-left: 2px;
margin-right: 2px;
width: 30px; /* Increased width */
text-align: center;
}
@@ -168,9 +183,9 @@
font-family: "Plus Jakarta Sans", sans-serif;
font-style: normal;
font-weight: 600;
width: 30px; /* Adjust the width to prevent overflow */
font-size: 0.9rem;
margin-bottom: 10px;
width: 36px; /* Increased width */
font-size: 1rem; /* Increased font size */
margin-bottom: 12px; /* Increased margin */
text-align: center;
background-color: transparent;
}
@@ -180,14 +195,14 @@
border: 1px solid var(--brand-sage, #6B8F71);
color: #ffffff;
display: inline-block;
font-size: 13px;
font-size: 14px; /* Increased font size */
font-weight: 600;
cursor: pointer;
min-width: 84px;
height: 34px;
padding: 0 14px;
border-radius: 10px; /* square rounded corner */
box-shadow: 0 1px 2px rgba(0,0,0,0.08);
min-width: 85px; /* Increased width */
height: 36px; /* Increased height */
padding: 0 14px; /* Increased padding */
border-radius: 12px; /* Increased border radius */
box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.addButton:hover { background-color: var(--brand-sage-hover, #7FAE7D); border-color: var(--brand-sage-hover, #7FAE7D); }
.addButton:disabled { background-color: var(--brand-sage-muted, #CFD8D3); border-color: var(--brand-sage-muted, #CFD8D3); cursor: default; }
@@ -199,32 +214,32 @@
color: gray;
}
.plusNegative {
width: 30px;
height: 30px;
width: 36px; /* Increased width */
height: 36px; /* Increased height */
}
.plusNegative2 {
width: 84px;
height: 21px;
width: 90px; /* Increased width */
height: 24px; /* Increased height */
position: absolute;
transform: rotate(45deg);
left: -33px;
top: 21px;
left: -38px; /* Adjusted position */
top: 24px; /* Adjusted position */
}
.remove {
width: 25px;
height: 25px;
margin-top: -10px;
margin-right: 10px;
width: 30px; /* Increased width */
height: 30px; /* Increased height */
margin-top: -12px; /* Adjusted margin */
margin-right: 12px; /* Adjusted margin */
}
/* New elements for clean cafe item card */
.title {
font-family: "Plus Jakarta Sans", sans-serif;
font-weight: 600;
font-size: 16px;
font-size: 18px; /* Increased font size */
color: #2d2d2d;
margin: 0 0 2px 0;
margin: 0 0 3px 0; /* Increased margin */
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
@@ -236,71 +251,184 @@
/* Responsive type scale for title and price */
@media (min-width: 600px) {
.title { font-size: 17px; }
.priceNow { font-size: 15px; }
.title { font-size: 19px; }
.priceNow { font-size: 17px; }
}
@media (min-width: 992px) {
.title { font-size: 18px; }
.priceNow { font-size: 16px; }
.title { font-size: 20px; }
.priceNow { font-size: 18px; }
}
.desc {
color: #5f5f5f;
font-size: 12px;
line-height: 1.25;
font-size: 14px; /* Increased font size */
line-height: 1.3;
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
-webkit-line-clamp: 2;
}
.priceRow { display: inline-flex; align-items: center; gap: 8px; }
.priceRow { display: inline-flex; align-items: center; gap: 10px; } /* Increased gap */
/* Gaya harga baru untuk item list */
.itemPriceList {
font-family: "Plus Jakarta Sans", sans-serif;
font-weight: 700;
font-size: 14px;
color: #1c1d1d;
margin: 2px 0;
white-space: nowrap;
}
.itemPriceList.promo {
color: #e53935;
font-size: 13px;
}
.itemPriceList.original {
color: #727272;
font-size: 12px;
text-decoration: line-through;
}
.promoBadge {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 2px 8px;
height: 20px;
padding: 3px 10px; /* Increased padding */
height: 24px; /* Increased height */
border-radius: 999px;
background: linear-gradient(to right, #e52535, #fe6d78);
color: #fff;
font-size: 11px;
font-size: 13px; /* Increased font size */
font-weight: 700;
}
.priceNow {
color: #1c1d1d;
font-weight: 700;
font-size: 14px;
font-size: 16px; /* Increased font size */
white-space: nowrap;
}
.priceOld {
color: #727272;
font-size: 12px;
font-size: 14px; /* Increased font size */
text-decoration: line-through;
white-space: nowrap;
}
.qtyGroup {
display: inline-flex;
align-items: center;
border: 1px solid #e6e6e6;
border-radius: 10px; /* square rounded corners */
height: 32px;
border: 1px solid rgba(255,255,255,0.6);
border-radius: 10px; /* Increased border radius */
height: 30px; /* Increased height */
overflow: hidden;
background: transparent;
}
.qtyBtn {
width: 34px;
height: 32px;
width: 30px; /* Increased width */
height: 30px; /* Increased height */
display: flex;
align-items: center;
justify-content: center;
background: #fff;
color: var(--brand-sage, #6B8F71);
background: transparent;
color: #fff;
border: none;
font-size: 20px; /* Increased font size */
}
.qtyBtn:hover { background: var(--brand-sage-50, #F0F6F2); }
.qtyBtn:hover { background: rgba(255,255,255,0.15); }
.qtyVal {
min-width: 28px;
min-width: 26px; /* Increased width */
text-align: center;
font-weight: 700;
color: #2d2d2d;
color: #fff;
font-size: 15px; /* Increased font size */
}
.actionRow { display: flex; align-items: center; gap: 8px; justify-content: space-between; width: 100%; } /* Increased gap */
/* Promo pill overlay on image */
.promoPill {
position: absolute;
top: 14px; /* Increased top position */
right: 14px; /* Increased right position */
z-index: 2;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 5px 12px; /* Increased padding */
height: auto;
border-radius: 10px; /* Increased border radius */
background: #e53935;
color: #fff;
font-size: 13px; /* Increased font size */
font-weight: 700;
}
/* Info overlay on image (name + price) */
.overlayName {
position: absolute;
top: 14px; /* Increased top position */
left: 14px; /* Increased left position */
z-index: 2;
font-family: "Plus Jakarta Sans", sans-serif;
font-weight: 800;
font-size: 16px; /* Increased font size */
line-height: 1.3;
color: #fff;
mix-blend-mode: difference;
margin: 0;
max-width: 75%; /* Increased width */
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
-webkit-line-clamp: 2;
pointer-events: none;
text-transform: capitalize;
}
@media (min-width: 600px) { .overlayName { font-size: 17px; } }
.overlayPrice { display: flex; align-items: center; gap: 8px; } /* Increased gap */
.overlayNow { color: #fff; font-weight: 800; font-size: 14px; } /* Increased font size */
.overlayOld { color: rgba(255,255,255,0.8); font-size: 13px; text-decoration: line-through; } /* Increased font size */
/* Bottom overlay bar: price left, qty right */
.bottomOverlay {
position: absolute;
left: 0;
right: 0;
bottom: 0;
z-index: 2;
display: flex;
align-items: center;
justify-content: space-between;
padding: 6px 12px; /* Increased padding */
background: rgba(0,0,0,0.55);
color: #fff;
}
/* New stacked price for clarity */
.overlayPriceCol { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.2; } /* Increased line height */
.overlayOriginal { color: rgba(255,255,255,0.85); font-weight: 700; font-size: 12px; text-decoration: line-through; } /* Increased font size */
@media (min-width: 600px) { .overlayOriginal { font-size: 13px; } }
.overlayPromo { color: #fff; font-weight: 900; font-size: 18px; } /* Increased font size */
@media (min-width: 600px) {
.overlayOriginal { font-size: 16px; } /* Increased font size */
.overlayPromo { font-size: 20px; } /* Increased font size */
}
/* Title text below image for portrait mode */
.title {
font-family: "Plus Jakarta Sans", sans-serif;
font-weight: 700;
font-size: 16px; /* Increased font size */
color: #1c1d1d;
margin: 8px 3px 6px 3px; /* Increased margin */
text-transform: capitalize;
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
-webkit-line-clamp: 2;
}
@media (min-width: 600px) {
.title { font-size: 17px; } /* Increased font size */
}
.itemInvoice .itemDetails {
@@ -312,7 +440,7 @@
.itemInvoice .itemName,
.itemInvoice .itemPrice,
.itemInvoice .itemQty .qtyInvoice .multiplySymbol {
font-size: 0.9rem;
font-size: 1.1rem; /* Increased font size */
}
.blank {
@@ -325,6 +453,6 @@
.createItem {
position: absolute;
left: 15px;
right: 15px;
left: 18px; /* Increased position */
right: 18px; /* Increased position */
}

62
src/components/ItemConfig.js
View File

@@ -93,10 +93,10 @@ const ItemConfig = ({
return (
<div onClick={handleOverlayClick} style={{ position: 'fixed', width: '100vw', height: '100vh', left: 0, bottom: 0, display: 'flex', flexDirection: 'column-reverse', zIndex: 301, backgroundColor: '#00000061' }}>
<div onClick={handleContentClick} style={{ display: 'flex', flexDirection: 'column', padding: '15px', backgroundColor: 'white', borderRadius: '20px 20px 0 0', overflowY: 'auto' }}>
<div onClick={handleContentClick} style={{ display: 'flex', flexDirection: 'column', padding: '18px', backgroundColor: 'white', borderRadius: '24px 24px 0 0', overflowY: 'auto' }}> {/* Increased padding and border radius */}
<div style={{ display: 'flex' }}>
<div style={{ width: '26vw', height: '26vw', marginRight: '10px' }}>
<img style={{ width: '100%', height: '100%', borderRadius: '10px', objectFit: 'cover' }} src={previewUrl} />
<div style={{ width: '30vw', height: '30vw', marginRight: '12px' }}> {/* Increased size and margin */}
<img style={{ width: '100%', height: '100%', borderRadius: '12px', objectFit: 'cover' }} src={previewUrl} /> {/* Increased border radius */}
<input
type="file"
ref={fileInputRef}
@@ -106,30 +106,30 @@ const ItemConfig = ({
style={{ display: "none" }}
/>
</div>
<div style={{ width: '72%', height: '26vw', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
<div onClick={() => handleChangeImage()} style={{ width: '140px', marginRight: '10px', height: '40px', alignContent: 'center', textAlign: 'center', borderRadius: '10px', border: '1px solid #60d37e', color: '#60d37e', backgroundColor: 'white', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
<div style={{ width: '68%', height: '30vw', display: 'flex', justifyContent: 'center', alignItems: 'center' }}> {/* Increased size */}
<div onClick={() => handleChangeImage()} style={{ width: '160px', marginRight: '12px', height: '48px', alignContent: 'center', textAlign: 'center', borderRadius: '12px', border: '1px solid #60d37e', color: '#60d37e', backgroundColor: 'white', display: 'flex', justifyContent: 'center', alignItems: 'center', fontSize: '16px' }}> {/* Increased size and font */}
{isBeingEdit ? 'Ganti gambar' : 'Tambah gambar'}
</div>
<div onClick={handleDelete} style={{ width: '76px', height: '40px', alignContent: 'center', textAlign: 'center', borderRadius: '10px', border: '1px solid rgb(211 96 96)', color: 'rgb(211 96 96)', backgroundColor: 'white', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
<div onClick={handleDelete} style={{ width: '84px', height: '48px', alignContent: 'center', textAlign: 'center', borderRadius: '12px', border: '1px solid rgb(211 96 96)', color: 'rgb(211 96 96)', backgroundColor: 'white', display: 'flex', justifyContent: 'center', alignItems: 'center', fontSize: '16px' }}> {/* Increased size and font */}
Hapus
</div>
</div>
</div>
<div style={{ display: 'flex', flexDirection: 'column', color: 'black', marginTop: '10px' }}>
<p style={{ marginBottom: '5px', fontWeight: '500' }}>Nama item</p>
<div style={{ display: 'flex', flexDirection: 'column', color: 'black', marginTop: '12px' }}> {/* Increased margin */}
<p style={{ marginBottom: '6px', fontWeight: '500', fontSize: '18px' }}>Nama item</p> {/* Increased margin and font size */}
<input
value={itemName}
style={{
padding: '10px',
borderRadius: '8px',
padding: '12px', // Increased padding
borderRadius: '8px', // Increased border radius
border: '1px solid #ccc',
fontSize: '14px',
fontSize: '16px', // Increased font size
width: '100%',
marginBottom: '15px',
marginBottom: '18px', // Increased margin
outline: 'none',
transition: 'all 0.3s ease',
boxSizing: 'border-box', // Make sure the padding doesn't cause overflow
boxSizing: 'border-box',
}}
onChange={(e)=>setItemName(e.target.value)}
onFocus={(e) => e.target.style.borderColor = '#60d37e'}
@@ -139,16 +139,16 @@ const ItemConfig = ({
<div style={{ display: 'flex', color: 'black', justifyContent: 'space-between' }}>
<div style={{ width: '48%' }}>
<p style={{ marginBottom: '5px', fontWeight: '500', marginTop: 0 }}>Harga</p>
<p style={{ marginBottom: '6px', fontWeight: '500', marginTop: 0, fontSize: '18px' }}>Harga</p> {/* Increased margin and font size */}
<input
value={itemPrice}
style={{
padding: '10px',
borderRadius: '8px',
padding: '12px', // Increased padding
borderRadius: '8px', // Increased border radius
border: '1px solid #ccc',
fontSize: '14px',
fontSize: '16px', // Increased font size
width: '100%',
marginBottom: '15px',
marginBottom: '18px', // Increased margin
outline: 'none',
transition: 'all 0.3s ease',
boxSizing: 'border-box',
@@ -159,17 +159,17 @@ const ItemConfig = ({
/>
</div>
<div style={{ width: '48%' }}>
<p style={{ marginBottom: '5px', fontWeight: '500', marginTop: 0 }}>Harga promo</p>
<p style={{ marginBottom: '6px', fontWeight: '500', marginTop: 0, fontSize: '18px' }}>Harga promo</p> {/* Increased margin and font size */}
<input
value={itemPromoPrice}
placeholder="Opsional"
style={{
padding: '10px',
borderRadius: '8px',
padding: '12px', // Increased padding
borderRadius: '8px', // Increased border radius
border: '1px solid #ccc',
fontSize: '14px',
fontSize: '16px', // Increased font size
width: '100%',
marginBottom: '15px',
marginBottom: '18px', // Increased margin
outline: 'none',
transition: 'all 0.3s ease',
boxSizing: 'border-box',
@@ -182,21 +182,21 @@ const ItemConfig = ({
</div>
<div style={{ display: 'flex', flexDirection: 'column', color: 'black' }}>
<p style={{ marginBottom: '5px', fontWeight: '500', marginTop: 0 }}>Deskripsi</p>
<p style={{ marginBottom: '6px', fontWeight: '500', marginTop: 0, fontSize: '18px' }}>Deskripsi</p> {/* Increased margin and font size */}
<textarea
ref={textareaRef}
style={{
padding: '10px',
borderRadius: '8px',
padding: '12px', // Increased padding
borderRadius: '8px', // Increased border radius
border: '1px solid #ccc',
fontSize: '14px',
fontSize: '16px', // Increased font size
width: '100%',
marginBottom: '15px',
marginBottom: '18px', // Increased margin
outline: 'none',
transition: 'all 0.3s ease',
boxSizing: 'border-box',
resize: 'none', // Prevent manual resize that could cause overflow
resize: 'none',
}}
placeholder="Tambah deskripsi..."
value={itemDescription}
@@ -206,8 +206,8 @@ const ItemConfig = ({
/>
</div>
<div style={{ width: '100%', height: '35px', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
<div onClick={() => {isBeingEdit ? handleUpdate() : handleCreate()} } style={{ width: '100%', height: '40px', alignContent: 'center', textAlign: 'center', borderRadius: '10px', border: '1px solid #60d37e', color: '#60d37e', backgroundColor: 'white', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
<div style={{ width: '100%', height: '42px', display: 'flex', justifyContent: 'center', alignItems: 'center' }}> {/* Increased height */}
<div onClick={() => {isBeingEdit ? handleUpdate() : handleCreate()} } style={{ width: '100%', height: '48px', alignContent: 'center', textAlign: 'center', borderRadius: '12px', border: '1px solid #60d37e', color: '#60d37e', backgroundColor: 'white', display: 'flex', justifyContent: 'center', alignItems: 'center', fontSize: '18px' }}> {/* Increased height and font size */}
{isBeingEdit? 'Simpan' : 'Buat Item'}
</div>
</div>

56
src/components/ItemLister.js
View File

@@ -74,6 +74,22 @@ const ItemLister = ({
const [randomKey, setRandomKey] = useState(0);
// Dummy items for style preview on cafe page (non-invoice, non-edit)
const showGrid = !isEdit && !forInvoice;
const dummyCount = showGrid ? Math.max(0, 6 - items.length) : 0;
const dummyItems = Array.from({ length: dummyCount }, (_, i) => ({
itemId: `dummy-${itemTypeId}-${i}`,
name: `Sample ${i + 1}`,
price: 25000 + i * 5000,
promoPrice: i % 2 === 1 ? 20000 + i * 3000 : 0,
qty: 0,
description: 'Contoh deskripsi singkat item.',
image: getImageUrl(`uploads/samples/sample (${(i % 16) + 1}).png`),
availability: true,
selectedImage: null,
}));
const displayItems = showGrid ? [...items, ...dummyItems] : items;
const handlePlusClick = (itemId) => {
const updatedItems = items.map((item) => {
if (item.itemId === itemId) {
@@ -609,7 +625,7 @@ const ItemLister = ({
{(isEdit && isFirstStep || !isEdit) &&
<div className={styles["title-container"]}>
{isEdit && <ItemType blank={true} imageUrl={previewUrl} />}
{isEdit && <ItemType blank={true} imageUrl={previewUrl} compact={true} />}
<input
className={`${styles.title} ${isEdit ? styles.border : styles.noborder
}`}
@@ -626,7 +642,7 @@ const ItemLister = ({
disabled={index === 0}
aria-label="Naikkan kategori"
>
<ArrowUp size={18} />
<ArrowUp size={16} /> {/* Reduced icon size for compact design */}
</button>
<button
className={styles.iconBtn}
@@ -634,14 +650,14 @@ const ItemLister = ({
disabled={index === indexTotal - 1}
aria-label="Turunkan kategori"
>
<ArrowDown size={18} />
<ArrowDown size={16} /> {/* Reduced icon size for compact design */}
</button>
<button
className={styles.iconBtn}
onClick={toggleEditTypeItem}
aria-label="Edit kategori"
>
<Pencil size={18} />
<Pencil size={16} /> {/* Reduced icon size for compact design */}
</button>
</div>
)}
@@ -657,6 +673,7 @@ const ItemLister = ({
handleImageChange(previewUrl, selectedImage)
}
imageUrl={getImageUrl("uploads/assets/addnew.png")}
compact={true}
/>
{/* {typeImage != null && !previewUrl.includes(typeImage) && (
<ItemType
@@ -674,6 +691,7 @@ const ItemLister = ({
handleImageChange(previewUrl, selectedImage)
}
imageUrl={getImageUrl("uploads/assets/beverage4.jpg")}
compact={true}
/>
<ItemType
rectangular={true}
@@ -681,6 +699,7 @@ const ItemLister = ({
handleImageChange(previewUrl, selectedImage)
}
imageUrl={getImageUrl("uploads/assets/beverage1.png")}
compact={true}
/>
<ItemType
rectangular={true}
@@ -688,6 +707,7 @@ const ItemLister = ({
handleImageChange(previewUrl, selectedImage)
}
imageUrl={getImageUrl("uploads/assets/beverage2.png")}
compact={true}
/>
<ItemType
rectangular={true}
@@ -695,6 +715,7 @@ const ItemLister = ({
handleImageChange(previewUrl, selectedImage)
}
imageUrl={getImageUrl("uploads/assets/beverage3.png")}
compact={true}
/>
<ItemType
rectangular={true}
@@ -702,6 +723,7 @@ const ItemLister = ({
handleImageChange(previewUrl, selectedImage)
}
imageUrl={getImageUrl("uploads/assets/snack5.png")}
compact={true}
/>
<ItemType
rectangular={true}
@@ -709,6 +731,7 @@ const ItemLister = ({
handleImageChange(previewUrl, selectedImage)
}
imageUrl={getImageUrl("uploads/assets/dessert1.png")}
compact={true}
/>
<ItemType
rectangular={true}
@@ -716,6 +739,7 @@ const ItemLister = ({
handleImageChange(previewUrl, selectedImage)
}
imageUrl={getImageUrl("uploads/assets/dessert2.jpg")}
compact={true}
/>
<ItemType
rectangular={true}
@@ -723,6 +747,7 @@ const ItemLister = ({
handleImageChange(previewUrl, selectedImage)
}
imageUrl={getImageUrl("uploads/assets/food4.jpg")}
compact={true}
/>
<ItemType
rectangular={true}
@@ -730,6 +755,7 @@ const ItemLister = ({
handleImageChange(previewUrl, selectedImage)
}
imageUrl={getImageUrl("uploads/assets/food1.png")}
compact={true}
/>
<ItemType
rectangular={true}
@@ -737,6 +763,7 @@ const ItemLister = ({
handleImageChange(previewUrl, selectedImage)
}
imageUrl={getImageUrl("uploads/assets/food2.jpg")}
compact={true}
/>
<ItemType
@@ -745,6 +772,7 @@ const ItemLister = ({
handleImageChange(previewUrl, selectedImage)
}
imageUrl={getImageUrl("uploads/assets/food3.png")}
compact={true}
/>
<ItemType
rectangular={true}
@@ -752,6 +780,7 @@ const ItemLister = ({
handleImageChange(previewUrl, selectedImage)
}
imageUrl={getImageUrl("uploads/assets/packet1.png")}
compact={true}
/>
<ItemType
rectangular={true}
@@ -759,6 +788,7 @@ const ItemLister = ({
handleImageChange(previewUrl, selectedImage)
}
imageUrl={getImageUrl("uploads/assets/packet2.png")}
compact={true}
/>
<ItemType
rectangular={true}
@@ -766,6 +796,7 @@ const ItemLister = ({
handleImageChange(previewUrl, selectedImage)
}
imageUrl={getImageUrl("uploads/assets/snack1.png")}
compact={true}
/>
<ItemType
rectangular={true}
@@ -773,6 +804,7 @@ const ItemLister = ({
handleImageChange(previewUrl, selectedImage)
}
imageUrl={getImageUrl("uploads/assets/snack2.png")}
compact={true}
/>
<ItemType
rectangular={true}
@@ -780,6 +812,7 @@ const ItemLister = ({
handleImageChange(previewUrl, selectedImage)
}
imageUrl={getImageUrl("uploads/assets/snack3.png")}
compact={true}
/>
<ItemType
rectangular={true}
@@ -787,6 +820,7 @@ const ItemLister = ({
handleImageChange(previewUrl, selectedImage)
}
imageUrl={getImageUrl("uploads/assets/snack4.png")}
compact={true}
/>
{Array.from({ length: 16 }, (_, index) => {
const sampleNumber = index + 1; // To get numbers from 1 to 16
@@ -798,6 +832,7 @@ const ItemLister = ({
handleImageChange(previewUrl, selectedImage)
}
imageUrl={getImageUrl(`uploads/samples/sample (${sampleNumber}).png`)}
compact={true}
/>
);
})}
@@ -809,7 +844,7 @@ const ItemLister = ({
<div key={randomKey}>
{isEdit && <div style={{ display: 'flex', justifyContent: 'flex-start' }}><div style={{ marginTop: '49px', marginRight: '10px', marginLeft: '10px' }} onClick={() => setIsFirstStep(true)}><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 512 512"><path d="M48,256c0,114.87,93.13,208,208,208s208-93.13,208-208S370.87,48,256,48,48,141.13,48,256Zm212.65-91.36a16,16,0,0,1,.09,22.63L208.42,240H342a16,16,0,0,1,0,32H208.42l52.32,52.73A16,16,0,1,1,238,347.27l-79.39-80a16,16,0,0,1,0-22.54l79.39-80A16,16,0,0,1,260.65,164.64Z" /></svg></div>
<h2 className={styles["item-list-title"]}>{items && items.length < 1 ? 'Buat item' : 'Daftar item'}</h2></div>}
<div className={styles["item-list"]}>
<div className={`${styles["item-list"]} ${(!isEdit && !forInvoice) ? styles["item-grid"] : ""}`}>
{user && (
user.user_id == shopOwnerId || user.cafeId == shopId) &&
isEditMode && (
@@ -930,7 +965,7 @@ const ItemLister = ({
) : null;
})}
{items.map((item, indexx) => {
{(showGrid ? [...items, ...dummyItems] : items).map((item, indexx) => {
return !forCart || (forCart && item.qty > 0) ? (
<div
key={item.itemId}>
@@ -1030,9 +1065,10 @@ const ItemLister = ({
<Item
key={item.itemId}
last={index === indexTotal - 1 && indexx === items.length - 1}
last={index === indexTotal - 1 && indexx === (showGrid ? (items.length + dummyItems.length) : items.length) - 1}
forCart={forCart}
forInvoice={forInvoice}
portrait={showGrid}
name={item.name}
price={item.price}
promoPrice={item.promoPrice}
@@ -1042,9 +1078,9 @@ const ItemLister = ({
itemTypeId ? getImageUrl(item.image) : item.image
}
imageFile={item.selectedImage}
onPlusClick={() => handlePlusClick(item.itemId)}
onNegativeClick={() => handleNegativeClick(item.itemId)}
onRemoveClick={() => handleRemoveClick(item.itemId)}
onPlusClick={() => (String(item.itemId).startsWith('dummy-') ? undefined : handlePlusClick(item.itemId))}
onNegativeClick={() => (String(item.itemId).startsWith('dummy-') ? undefined : handleNegativeClick(item.itemId))}
onRemoveClick={() => (String(item.itemId).startsWith('dummy-') ? undefined : handleRemoveClick(item.itemId))}
isBeingEdit={isEditItem == item.itemId}
isAvailable={item.availability}
handleUpdateItem={(name, price, image, description, promoPrice) =>

125
src/components/ItemLister.module.css
View File

@@ -2,80 +2,78 @@
.item-lister {
width: 100%;
padding: 10px; /* Adjust padding as needed */
box-sizing: border-box; /* Ensure padding doesn't affect width */
padding: 10px; /* Slightly reduced padding */
box-sizing: border-box;
white-space: break-spaces;
}
.fullscreen {
position: fixed; /* Keep the container fixed */
top: 0; /* Adjust the top position as needed */
bottom: 0; /* Occupy the full height of the viewport */
left: 0; /* Align to the left */
right: 0; /* Align to the right */
background-color: white; /* Background color */
z-index: 1000; /* Layering */
overflow-y: auto; /* Allow vertical scrolling */
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: white;
z-index: 1000;
overflow-y: auto;
}
.grid-container {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
/* padding: 10px; */
/* max-height: calc(3 * (25vw - 20px) + 20px); */
overflow-y: auto;
height: calc(49vw - 20px);
height: calc(50vw - 20px);
}
@media (min-height: 0px) {
.grid-container {
height: 27vh;
height: 28vh;
}
}
@media (min-height: 630px) {
.grid-container {
height: 27vh;
height: 28vh;
}
}
@media (min-height: 636px) {
.grid-container {
height: 29vh;
height: 30vh;
}
}
@media (min-height: 650px) {
.grid-container {
height: 34vh;
height: 36vh;
}
}
@media (min-height: 705px) {
.grid-container {
height: 37vh;
height: 39vh;
}
}
@media (min-height: 735px) {
.grid-container {
height: 38vh;
height: 40vh;
}
}
@media (min-height: 759px) {
.grid-container {
height: 40vh;
height: 42vh;
}
}
@media (min-height: 819px) {
.grid-container {
height: 44vh;
height: 46vh;
}
}
@media (min-height: 830px) {
.grid-container {
height: 47vh;
height: 49vh;
}
}
@media (min-height: 892px) {
.grid-container {
height: 49vh;
height: 51vh;
}
}
@@ -83,6 +81,11 @@
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 16px; /* Added padding for better spacing */
background-color: #f8f9fa; /* Light background for better visual separation */
border-radius: 12px; /* Rounded corners */
margin-bottom: 16px; /* Space below the title container */
box-shadow: 0 1px 3px rgba(0,0,0,0.05); /* Subtle shadow */
}
.titleActions {
@@ -100,7 +103,7 @@
border: 1px solid #e6e6e6;
background: #ffffff;
color: #2d2d2d;
border-radius: 8px; /* square rounded */
border-radius: 8px;
cursor: pointer;
}
.iconBtn:disabled {
@@ -114,21 +117,21 @@
.title {
background-color: transparent;
font-family: "Plus Jakarta Sans", sans-serif;
font-weight: 500;
font-style: normal;
font-size: 20px;
color: rgba(88, 55, 50, 1);
text-align: left;
width: calc(70% - 10px);
padding-left: 10px;
text-transform: capitalize;
font-family: "Plus Jakarta Sans", sans-serif;
font-weight: 600; /* Increased font weight for better visibility */
font-style: normal;
font-size: 20px;
color: rgba(88, 55, 50, 1);
text-align: left;
width: calc(70% - 10px);
padding-left: 10px;
text-transform: capitalize;
}
.edit-typeItem-button {
margin-left: auto; /* Push the button to the right */
padding: 8px 16px; /* Adjust padding as needed */
font-size: 14px;
margin-left: auto;
padding: 6px 12px;
font-size: 13px;
background-color: #007bff;
color: #fff;
border: none;
@@ -138,8 +141,8 @@
.add-item-button {
margin-top: 10px;
padding: 8px 16px; /* Adjust padding as needed */
font-size: 14px;
padding: 6px 12px;
font-size: 13px;
background-color: #359d42d1;
color: #fff;
border: none;
@@ -149,7 +152,24 @@
.item-list {
display: flex;
flex-direction: column; /* Display items in a column */
flex-direction: column;
}
/* Grid layout for portrait cards on cafe page */
.item-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 8px;
}
@media (min-width: 600px) {
.item-grid {
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}
}
@media (min-width: 992px) {
.item-grid {
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
}
.border {
@@ -168,13 +188,13 @@
z-index: 100;
background-color: #0000008c;
width: 100%;
top: 7px;
top: 6px;
bottom: -4px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
font-size: 14px;
font-size: 13px;
}
.PaymentOption {
@@ -252,3 +272,24 @@
color: black;
text-align: left;
}
/* Harga dalam item list - dikurangi ukurannya agar proporsional */
.itemPriceList {
font-family: "Plus Jakarta Sans", sans-serif;
font-weight: 700;
font-size: 14px;
color: #1c1d1d;
margin: 2px 0;
white-space: nowrap;
}
.itemPriceList.promo {
color: #e53935;
font-size: 13px;
}
.itemPriceList.original {
color: #727272;
font-size: 12px;
text-decoration: line-through;
}

65
src/components/ItemType.js
View File

@@ -10,6 +10,8 @@ export default function ItemType({
imageUrl,
selected,
rectangular,
compact,
noIcon, // New prop to remove icons
}) {
const inputRef = useRef(null);
const [namee, setName] = useState(name);
@@ -67,29 +69,44 @@ export default function ItemType({
const iconImageUrl = imageUrl === 'uploads/assets/All.png' ? 'icon:all' : imageUrl;
// If noIcon is true, we render a button-like element without icons
if (noIcon) {
return (
<div
className={`${styles["item-type"]} ${compact ? styles["item-type-compact"] : ""}`}
style={{ zIndex: blank ? 301 : "inherit" }}
>
<div
onClick={onClick}
className={`${styles["item-type-rect"]} ${compact ? styles["item-type-rect-compact"] : ""} ${selected ? styles["selected"] : ""}`}
style={{
backgroundColor: selected ? 'var(--brand-sage, #6B8F71)' : '#ffffff',
borderColor: selected ? 'var(--brand-sage, #6B8F71)' : '#e6e6e6',
color: selected ? '#ffffff' : '#2d2d2d',
}}
>
<span>
{formatName(namee)}
</span>
</div>
</div>
);
}
return (
<div
className={
styles[
namee
? "item-type"
: rectangular
? "item-type-rectangular"
: "item-type-nomargin"
]
}
className={`${styles["item-type"]} ${compact ? styles["item-type-compact"] : ""}`}
style={{ zIndex: blank ? 301 : "inherit" }}
>
<div
onClick={
rectangular ? (blank ? null : () => onClick(iconImageUrl)) : onClick
}
className={styles["item-type-rect"]}
className={`${styles["item-type-rect"]} ${compact ? styles["item-type-rect-compact"] : ""} ${selected ? styles["selected"] : ""}`}
style={{
// 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'
borderColor: selected ? 'var(--brand-sage, #6B8F71)' : '#e6e6e6',
color: selected ? '#ffffff' : '#2d2d2d',
}}
>
{iconImageUrl === 'uploads/assets/All.png' ? (
@@ -148,7 +165,7 @@ c261 0 329 -3 352 -14z m1237 -2 c52 -35 54 -49 54 -379 0 -348 -2 -360 -69
</svg>
) : (iconImageUrl && typeof iconImageUrl === 'string' && iconImageUrl.startsWith('icon:')) ? (
<div style={{width:'100%',height:'100%',display:'flex',alignItems:'center',justifyContent:'center'}}>
<LucideCategoryIcon name={namee} iconKey={(iconImageUrl || '').split(':')[1]} />
<LucideCategoryIcon name={namee} iconKey={(iconImageUrl || '').split(':')[1]} compact={compact} />
</div>
) : (
<img
@@ -170,27 +187,17 @@ c261 0 329 -3 352 -14z m1237 -2 c52 -35 54 -49 54 -379 0 -348 -2 -360 -69
)}
</div>
{!rectangular && !blank && (
<input
ref={inputRef}
className={`${styles["item-type-name"]} ${styles.noborder}`}
value={formatName(namee)}
onChange={handleNameChange}
disabled={true}
style={{
top: 'initial',
borderBottom: 'none',
color: selected ? '#2d2d2d' : '#333',
textTransform: 'capitalize'
}}
/>
<div className={`${styles["item-type-name"]} ${compact ? styles["item-type-name-compact"] : ""}`} style={{ color: selected ? '#2d2d2d' : '#333' }}>
{formatName(namee)}
</div>
)}
</div>
);
}
function LucideCategoryIcon({ name, iconKey }) {
function LucideCategoryIcon({ name, iconKey, compact }) {
const key = pickIconKey(name, iconKey);
const size = '56%';
const size = compact ? '65%' : '56%';
switch (key) {
case 'coffee':
return <Coffee color={'currentColor'} size={size} strokeWidth={2} />;

112
src/components/ItemType.module.css
View File

@@ -1,7 +1,7 @@
.item-type {
width: auto;
height: auto;
margin: 0 4px; /* tighter spacing between tiles */
margin: 0 6px;
overflow: visible;
text-align: center;
align-items: center;
@@ -10,64 +10,107 @@
justify-content: center;
position: relative;
}
.item-type-rectangular {
width: calc(25vw - 20px);
height: calc(25vw - 20px);
overflow: visible;
text-align: center;
align-items: center;
display: flex;
flex-direction: column;
justify-content: start;
position: relative; /* Ensure absolute positioning inside works */
/* Compact version of item-type */
.item-type-compact {
margin: 0 4px;
}
.item-type-nomargin {
width: calc(25vw - 20px);
height: calc(39vw - 20px);
.item-type-rectangular {
width: calc(30vw - 24px);
height: calc(30vw - 24px);
overflow: visible;
text-align: center;
align-items: center;
display: flex;
flex-direction: column;
justify-content: center;
position: relative; /* Ensure absolute positioning inside works */
position: relative;
}
.item-type-nomargin {
width: calc(30vw - 24px);
height: calc(45vw - 24px);
overflow: visible;
text-align: center;
align-items: center;
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
}
.item-type-rect {
position: relative;
height: clamp(48px, 9vw, 80px);
width: clamp(48px, 9vw, 80px);
height: 48px; /* Fixed height for better touch targets */
min-width: 100px; /* Minimum width */
padding: 0 20px; /* Horizontal padding */
object-fit: cover;
border-radius: 12px;
border-radius: 12px; /* Square rounded corners */
background-color: #fff;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
border: 1px solid #e6e6e6;
font-family: "Plus Jakarta Sans", sans-serif;
font-weight: 500;
font-size: 16px;
color: #2d2d2d;
cursor: pointer;
}
/* Compact version of item-type-rect */
.item-type-rect-compact {
height: 42px; /* Slightly smaller for compact version */
min-width: 90px;
padding: 0 18px;
border-radius: 10px;
font-size: 14px;
}
.item-type-rect:hover {
background-color: var(--brand-sage-100, #E9F3ED);
border-color: var(--brand-sage, #6B8F71);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}
.item-type-rect.selected {
background-color: var(--brand-sage, #6B8F71);
color: #ffffff;
border-color: var(--brand-sage, #6B8F71);
box-shadow: 0 2px 6px rgba(107, 143, 113, 0.2);
}
.item-type-name {
font-family: "Plus Jakarta Sans", sans-serif;
font-weight: 500;
font-style: normal;
font-size: 12px;
color: #333;
font-size: 16px;
color: #2d2d2d;
width: auto;
text-align: center;
background-color: transparent;
position: relative;
margin-top: 6px; /* keep label spacing constant; avoid jumping */
margin-top: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 160px;
}
/* Compact version of item-type-name */
.item-type-name-compact {
font-size: 14px;
max-width: 140px;
}
.item-type-image {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 15px;
border-radius: 12px;
}
.item-type-image-container {
@@ -77,6 +120,7 @@
width: 100%;
height: 100%;
}
.item-type-image-input {
opacity: 0;
position: absolute;
@@ -88,12 +132,12 @@
.item-type-create {
position: absolute;
top: 76%; /* Position below the input */
top: 76%;
left: 50%;
transform: translateX(-50%);
margin-top: 10px; /* Space between input and button */
width: 20vw;
text-align: center; /* Center button text */
margin-top: 12px;
width: 24vw;
text-align: center;
}
.border {
@@ -103,3 +147,17 @@
.noborder {
border: 1px solid #ffffff00;
}
/* No icon styles */
.no-icon {
height: 48px;
min-width: 100px;
padding: 0 20px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
font-weight: 500;
font-family: "Plus Jakarta Sans", sans-serif;
}

103
src/components/ItemTypeLister.css
View File

@@ -3,55 +3,83 @@
width: 100%;
overflow-x: auto;
white-space: nowrap;
padding: 2px 0px; /* tighter top/bottom padding */
padding: 12px 0;
margin-bottom: 12px;
scrollbar-width: thin;
display: flex;
justify-content: center;
align-items: center;
}
.item-type-lister::-webkit-scrollbar {
height: 8px;
}
.item-type-lister::-webkit-scrollbar-thumb {
background-color: #c5c5c5;
border-radius: 4px;
}
.category-bar {
display: flex;
align-items: center;
gap: 8px;
gap: 10px;
overflow-x: auto;
padding: 8px 12px 4px;
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
padding: 10px 15px;
-ms-overflow-style: none;
scrollbar-width: none;
justify-content: center;
width: 100%;
}
.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 */
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none;
scrollbar-width: none;
overflow-y: hidden;
gap: 10px;
justify-content: center;
align-items: center;
width: 100%;
}
.category-chip {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
gap: 8px;
height: 36px;
padding: 0 14px;
border-radius: 999px;
gap: 10px;
height: 42px;
padding: 0 18px;
border-radius: 12px; /* Square rounded corners */
border: 1px solid #e6e6e6;
background: #ffffff;
color: #2d2d2d;
font-family: "Plus Jakarta Sans", sans-serif;
font-weight: 500;
font-size: 14px;
font-size: 16px;
cursor: pointer;
user-select: none;
transition: all 0.2s ease;
justify-content: center;
box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.category-chip:hover {
border-color: #d0d0d0;
background-color: #f8f8f8;
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
.category-chip:hover { border-color: #d0d0d0; }
.category-chip.selected {
background: #73a585;
color: #ffffff;
border-color: #73a585;
box-shadow: 0 2px 6px rgba(115, 165, 133, 0.2);
}
.category-chip .chip-icon {
width: 18px;
height: 18px;
width: 22px;
height: 22px;
display: inline-flex;
align-items: center;
justify-content: center;
@@ -77,27 +105,40 @@
.inline-container {
display: grid;
grid-template-columns: repeat(4, 1fr); /* Always 4 columns */
gap: 10px; /* Spacing between grid items */
padding: 10px; /* Padding inside grid */
overflow-y: auto; /* Allow scrolling if items overflow */
grid-template-columns: repeat(4, 1fr);
gap: 12px;
padding: 12px;
overflow-y: auto;
}
.grid-container {
display: grid;
grid-template-columns: repeat(4, 1fr); /* Always 4 columns */
gap: 10px; /* Spacing between grid items */
padding: 10px; /* Padding inside grid */
max-height: calc(3 * (25vw - 20px) + 20px); /* 3 items + gaps */
overflow-y: auto; /* Allow scrolling if items overflow */
padding-top: 15px;
height: calc(43vw - 20px);
grid-template-columns: repeat(4, 1fr);
gap: 12px;
padding: 12px;
max-height: calc(3 * (30vw - 24px) + 24px);
overflow-y: auto;
padding-top: 18px;
height: calc(48vw - 24px);
}
.add-button {
margin: 10px; /* Margin around the button */
padding: 10px 20px; /* Padding for the button */
position: absolute; /* Optional, for styling */
margin: 12px;
padding: 12px 24px;
position: absolute;
bottom: 0;
align-self: center; /* Center the button horizontally */
align-self: center;
}
/* Centered container for item type list */
.centered-item-type-list {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
padding: 12px 0;
}
/* No icon styles */
.no-icon {
padding: 0 20px; /* Increased padding for better touch targets */
}
/* Legacy styles kept for ItemType grid if needed elsewhere */

93
src/components/ItemTypeLister.js
View File

@@ -28,7 +28,7 @@ const ItemTypeLister = ({
// Use smooth-scroll-into-view-if-needed to scroll to the target div
smoothScroll(newItemDivRef.current, {
behavior: "smooth",
block: "start", // Adjust this based on your needs
block: "start",
inline: "nearest",
});
} else {
@@ -36,11 +36,11 @@ const ItemTypeLister = ({
smoothScroll(node, {
behavior: "smooth",
block: "start", // Adjust this based on your needs
block: "start",
inline: "nearest",
});
}
}, [isAddingNewItem]); // Dependency array includes isAddingNewItem
}, [isAddingNewItem]);
const toggleAddNewItem = () => {
setIsAddingNewItem((prev) => !prev);
@@ -62,50 +62,55 @@ const ItemTypeLister = ({
return (
<div className="item-type-lister" style={{ overflowX: isAddingNewItem ? 'hidden' : 'auto' }}>
<div ref={newItemDivRef} className="item-type-list" style={{ display: 'inline-flex' }}>
{isEditMode && !isAddingNewItem && canManage && (
<ItemType
onClick={toggleAddNewItem}
name={"buat baru"}
imageUrl={"icon:plus"}
/>
)}
<div className="centered-item-type-list">
<div ref={newItemDivRef} className="item-type-list" style={{ display: 'inline-flex' }}>
{isEditMode && !isAddingNewItem && canManage && (
<ItemType
onClick={toggleAddNewItem}
name={"buat baru"}
noIcon={true}
compact={false} // Make it larger for better touch targets
/>
)}
{canManage && isAddingNewItem && (
<ItemLister
shopId={shopId}
shopOwnerId={shopOwnerId}
user={user}
typeName={""}
setShopItems={setShopItems}
itemList={items}
isEditMode={true}
handleCreateItem={(itemTypeId, name, price, selectedImage, description, promoPrice) => createItem(shopId, name, price, selectedImage, itemTypeId, description, promoPrice)}
beingEditedType={beingEditedType}
setBeingEditedType={setBeingEditedType}
alwaysEdit={true}
handleUnEdit={toggleAddNewItem}
/>
)}
{canManage && isAddingNewItem && (
<ItemLister
shopId={shopId}
shopOwnerId={shopOwnerId}
user={user}
typeName={""}
setShopItems={setShopItems}
itemList={items}
isEditMode={true}
handleCreateItem={(itemTypeId, name, price, selectedImage, description, promoPrice) => createItem(shopId, name, price, selectedImage, itemTypeId, description, promoPrice)}
beingEditedType={beingEditedType}
setBeingEditedType={setBeingEditedType}
alwaysEdit={true}
handleUnEdit={toggleAddNewItem}
/>
)}
{itemTypes && itemTypes.length > 0 && (
<ItemType
name={"semua"}
onClick={() => onFilterChange(0)}
imageUrl={"icon:all"}
selected={filterId === 0}
/>
)}
{itemTypes && itemTypes.length > 0 && (
<ItemType
name={"semua"}
onClick={() => onFilterChange(0)}
selected={filterId === 0}
noIcon={true}
compact={false} // Make it larger for better touch targets
/>
)}
{itemTypes && itemTypes.map((itemType) => (
<ItemType
key={itemType.itemTypeId}
name={itemType.name}
imageUrl={"icon:category"}
onClick={() => onFilterChange(itemType.itemTypeId)}
selected={filterId === itemType.itemTypeId}
/>
))}
{itemTypes && itemTypes.map((itemType) => (
<ItemType
key={itemType.itemTypeId}
name={itemType.name}
onClick={() => onFilterChange(itemType.itemTypeId)}
selected={filterId === itemType.itemTypeId}
noIcon={true}
compact={false} // Make it larger for better touch targets
/>
))}
</div>
</div>
</div>
);

15
src/components/Modal.module.css
View File

@@ -15,7 +15,7 @@
width: 80vw;
max-height: 80vh;
position: relative;
overflow: visible; /* Add this line to enable scrolling */
overflow: visible;
display: flex;
align-items: center;
justify-content: center;
@@ -23,16 +23,21 @@
.closeButton {
position: absolute;
top: 10px;
right: 10px;
top: 12px; /* Increased top position */
right: 12px; /* Increased right position */
background: none;
border: none;
font-size: 24px;
font-size: 28px; /* Increased font size */
cursor: pointer;
color: #333;
padding: 0;
width: 30px; /* Increased width */
height: 30px; /* Increased height */
display: flex;
align-items: center;
justify-content: center;
}
.closeButton:hover {
color: #f44336; /* Change color on hover for better UX */
color: #f44336;
}