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 03:20:49 +07:00
parent 6127415e37
commit f58b40c70d
14 changed files with 2127 additions and 1071 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
src/App.css
View File

@@ -1,8 +1,9 @@
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Aboreto&family=Rubik+Doodle+Shadow&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Aboreto&family=Rubik+Doodle+Shadow&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@200;300;400;500;600;700;800&ital,wght@0,200..800;1,200..800&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@200;300;400;500;600;700;800&display");
:root { :root {
--brand-primary: #73a585; /* general brand (e.g., music player) */ --brand-primary: #73a585; /* general brand (e. g., music player) */
--brand-sage: #6B8F71; /* sage green for active category */ --brand-sage: #6B8F71; /* sage green for active category */
--brand-sage-50: #F0F6F2; /* very light hover bg */ --brand-sage-50: #F0F6F2; /* very light hover bg */
--brand-sage-100: #E9F3ED; /* light hover bg */ --brand-sage-100: #E9F3ED; /* light hover bg */
@@ -66,7 +67,15 @@ body {
/* Ensure sticky cart bar stays above item overlays */ /* Ensure sticky cart bar stays above item overlays */
.StickyCartBar { .StickyCartBar {
z-index: 3000 !important; z-index: 100 !important; /* Menurunkan z-index agar tidak menutupi material list */
position: fixed;
bottom: 0;
left: 0;
right: 0;
background-color: white;
box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
padding: 15px 20px;
border-radius: 20px 20px 0 0;
} }
.App-link { .App-link {

52
src/components/Carousel.js
View File

@@ -1,52 +0,0 @@
import React, { useState } from "react";
import styles from "./Carousel.module.css"; // Import CSS module
const Carousel = ({ selectedIndex, items, onSelect }) => {
const moveToNext = () => {
console.log('aa')
if (selectedIndex < items.length - 1) {
console.log('bb')
onSelect(selectedIndex + 1); // Send the next index to the parent
}
};
const moveToPrev = () => {
if (selectedIndex > -1) {
onSelect(selectedIndex - 1); // Send the previous index to the parent
}
};
return (
<div className={styles.carouselContainer}>
<div className={styles.carousel}>
{/* Previous Item */}
<div
className={`${styles.carouselItem} ${styles.prev}`}
onClick={moveToPrev}
style={{ visibility: selectedIndex === -1 && items.length > 0 ? "hidden" : "visible" , backgroundColor: items.length < 1 ? '#919191':'#007bff'}}
>
{selectedIndex === -1 ? (items.length > 0 ? "+" : "") : items[selectedIndex - 1]?.name || "+"}
</div>
{/* Current Item */}
<div className={`${styles.carouselItem} ${styles.center}`}>
{selectedIndex >= 0 ? items[selectedIndex]?.name : "+"}
</div>
{/* Next Item */}
<div
className={`${styles.carouselItem} ${styles.next}`}
onClick={moveToNext}
style={{
visibility: selectedIndex === items.length -1 && items.length > 0 ? "hidden" : "visible", backgroundColor: items.length < 1 ? '#919191':'#007bff'
}}
>
{selectedIndex < items.length - 1 && items[selectedIndex + 1]?.name}
</div>
</div>
</div>
);
};
export default Carousel;

74
src/components/Carousel.module.css
View File

@@ -1,74 +0,0 @@
/* Carousel.module.css */
.carouselContainer {
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.carousel {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
max-width: 600px;
overflow: hidden;
position: relative;
}
.carouselItem {
display: flex;
justify-content: center;
align-items: center;
transition: transform 0.3s ease-in-out;
height: 200px;
background-color: #007bff;
color: white;
font-size: 24px;
width: 100%;
border-radius: 8px;
}
.carouselItem.prev,
.carouselItem.next {
transform: scale(0.8);
}
.carouselItem.center {
transform: scale(1);
width: 134%;
}
.prevBtn,
.nextBtn {
position: absolute;
top: 50%;
transform: translateY(-50%);
color: white;
border: none;
padding: 10px 20px;
font-size: 16px;
border-radius: 8px;
cursor: pointer;
}
.prevBtn {
left: 10px;
}
.nextBtn {
right: 10px;
}
@media (max-width: 600px) {
.carouselItem {
font-size: 18px;
height: 110px;
}
.prevBtn,
.nextBtn {
padding: 8px 15px;
font-size: 14px;
}
}

26
src/components/Item.js
View File

@@ -149,28 +149,18 @@ const Item = ({
)} )}
<div className={styles.itemDetails}> <div className={styles.itemDetails}>
{forInvoice && {forInvoice &&
<svg <div className={styles.plusNegative2} onClick={onRemoveClick}>
className={styles.plusNegative2} ⌧
onClick={onRemoveClick} </div>
clipRule="evenodd"
fillRule="evenodd"
strokeLinejoin="round"
strokeMiterlimit="2"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="m12.002 2c5.518 0 9.998 4.48 9.998 9.998 0 5.517-4.48 9.997-9.998 9.997-5.517 0-9.997-4.48-9.997-9.997 0-5.518 4.48-9.998 9.997-9.998zm0 1.5c-4.69 0-8.497 3.808-8.497 8.498s3.807 8.497 8.497 8.497 8.498-3.807 8.498-8.497-3.808-8.498-8.498-8.498zm-.747 7.75h-3.5c-.414 0-.75.336-.75.75s.336.75.75.75h3.5v3.5c0 .414.336.75.75.75s.75-.336.75-.75v-3.5h3.5c.414 0 .75-.336.75-.75s-.336-.75-.75-.75h-3.5v-3.5c0-.414-.336-.75-.75-.75s-.75.336-.75.75z"
fillRule="nonzero"
/>
</svg>
} }
{/* Title under image for portrait, non-overlay */} {/* Title under image for portrait, non-overlay */}
{portrait && null} {portrait && null}
{!portrait && ( {!portrait && (
<div style={{ marginRight: forInvoice ? 10 : 0 }}> <div style={{ marginRight: forInvoice ? 10 : 0 }}>
<h3 className={styles.title} style={{ width: forInvoice ? 160 : 'auto' }}>{displayName}</h3> <h3 className={styles.title} style={{ width: forInvoice ? 160 : 'auto' }}>{displayName}</h3>
{initialDescription && !forInvoice && (
<p className={styles.desc}>{initialDescription}</p>
)}
{!forInvoice && ( {!forInvoice && (
<div className={styles.priceRow}> <div className={styles.priceRow}>
{promoPrice && promoPrice != 0 && promoPrice != '' ? ( {promoPrice && promoPrice != 0 && promoPrice != '' ? (
@@ -207,9 +197,9 @@ const Item = ({
!isBeingEdit ? ( !isBeingEdit ? (
<div className={styles.itemQty}> <div className={styles.itemQty}>
<div className={styles.qtyGroup}> <div className={styles.qtyGroup}>
<button className={styles.qtyBtn} onClick={handleNegativeClick} aria-label="Kurangi" style={{ width: 32, height: 32, fontSize: 18 }}>-</button> <button className={styles.qtyBtn} onClick={handleNegativeClick} aria-label="Kurangi" style={{ width: 36, height: 36, fontSize: 18 }}>-</button>
<span className={styles.qtyVal}>{itemQty}</span> <span className={styles.qtyVal}>{itemQty}</span>
<button className={styles.qtyBtn} onClick={handlePlusClick} aria-label="Tambah" style={{ width: 32, height: 32, fontSize: 18 }}>+</button> <button className={styles.qtyBtn} onClick={handlePlusClick} aria-label="Tambah" style={{ width: 36, height: 36, fontSize: 18 }}>+</button>
</div> </div>
</div> </div>
) : ( ) : (

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

@@ -8,17 +8,22 @@
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
width: 100%; width: 100%;
gap: 8px; /* Increased gap for better spacing */ gap: 12px;
padding: 6px 8px; /* Increased padding for better touch targets */ padding: 16px;
margin: 8px 0; /* Increased margin for better separation */ margin: 0;
border: 1px solid #e3ece6; border: none;
border-radius: 8px; /* Slightly increased border radius */ border-radius: 12px;
background: var(--brand-sage-50, #F0F6F2); background: #ffffff;
box-shadow: 0 1px 3px rgba(0,0,0,0.03); box-shadow: 0 1px 5px rgba(0,0,0,0.08);
box-sizing: border-box; box-sizing: border-box;
transition: box-shadow 0.2s ease, border-color 0.2s ease, background-color 0.2s ease; transition: all 0.2s ease;
position: relative;
}
.item:hover {
box-shadow: 0 4px 12px rgba(0,0,0,0.12);
transform: translateY(-2px);
} }
.item:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.08); border-color: #d9e6de; }
/* Portrait variant for cafe page grid */ /* Portrait variant for cafe page grid */
.itemPortrait { .itemPortrait {
@@ -29,30 +34,84 @@
border: none; border: none;
background: transparent; background: transparent;
box-shadow: none; box-shadow: none;
border-radius: 12px;
overflow: hidden;
} }
.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 */ .imageWrap {
.itemPortrait .priceNow { font-size: 13px; } /* Increased font size */ position: relative;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
width: 80px;
height: 80px;
flex-shrink: 0;
}
.notLast{ .itemPortrait .imageWrap {
padding-bottom: 12px; /* Increased padding */ width: 100%;
border-bottom: 2px solid #00000017; height: auto;
aspect-ratio: 1 / 1;
border-radius: 12px;
}
.imageContainer {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.itemPortrait .imageContainer {
border-radius: 12px;
}
.itemDetails {
display: flex;
flex-direction: column;
justify-content: center;
align-items: stretch;
gap: 8px;
flex: 1;
min-width: 0;
}
.itemPortrait .itemDetails {
align-items: flex-start;
text-align: left;
gap: 8px;
padding: 12px 0;
}
.itemPortrait .itemQty {
justify-content: flex-start;
}
.itemPortrait .title {
font-size: 15px;
}
.itemPortrait .priceNow {
font-size: 14px;
}
.notLast {
border-bottom: none;
padding-bottom: 16px;
} }
.itemInvoice { .itemInvoice {
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
justify-content: space-around; justify-content: space-around;
font-size: 20px; /* Increased font size */ font-size: 18px;
margin-top: 0px; margin-top: 0px;
margin-bottom: 0px; margin-bottom: 0px;
padding-top: 0px; padding-top: 0px;
padding: 16px;
background: #ffffff;
border-radius: 12px;
box-shadow: 0 1px 5px rgba(0,0,0,0.08);
} }
.itemInvoice:last-child { .itemInvoice:last-child {
@@ -66,27 +125,28 @@
.item:not(.itemPortrait) .imageContainer { .item:not(.itemPortrait) .imageContainer {
position: relative; position: relative;
width: clamp(80px, 20vw, 110px); /* Increased size */ width: 80px;
height: clamp(80px, 20vw, 110px); /* Increased size */ height: 80px;
border-radius: 12px; /* Increased border radius */ border-radius: 10px;
object-fit: cover; object-fit: cover;
} }
.overlay { .overlay {
position: absolute; position: absolute;
top: 18px; /* Increased top position */ top: 16px;
left: 10px; /* Increased left position */ left: 12px;
right: 10px; /* Increased right position */ right: 12px;
bottom: 18px; /* Increased bottom position */ bottom: 16px;
background-color: rgba(0, 0, 0, 0.5); background-color: rgba(0, 0, 0, 0.5);
color: white; color: white;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
border-radius: 20px; /* Increased border radius */ border-radius: 16px;
cursor: pointer; cursor: pointer;
transition: background-color 0.3s ease; transition: background-color 0.3s ease;
font-size: 3.8vw; /* Increased font size */ font-size: 16px;
font-weight: 500;
} }
.overlay:hover { .overlay:hover {
@@ -97,24 +157,18 @@
display: none; display: none;
} }
.itemDetails { .infoRow {
display: flex; display: flex;
flex-direction: column; align-items: baseline;
justify-content: center; justify-content: space-between;
align-items: stretch; gap: 12px;
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: 10px; } /* Increased gap */
.itemInvoiceDetails { .itemInvoiceDetails {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;
margin-left: 12px; /* Increased margin */ margin-left: 12px;
margin-top: -15px; margin-top: -15px;
flex-grow: 1; flex-grow: 1;
} }
@@ -122,40 +176,47 @@
.itemName { .itemName {
font-family: "Plus Jakarta Sans", sans-serif; font-family: "Plus Jakarta Sans", sans-serif;
font-style: normal; font-style: normal;
width: calc(100% - 18px); /* Adjusted width */ width: calc(100% - 20px);
font-size: 5.5vw; /* Increased font size */ font-size: 16px;
font-weight: 500; font-weight: 600;
margin-top: 0; margin-top: 0;
margin: 0 6px; /* Increased margin */ margin: 0 6px;
color: rgba(88, 55, 50, 1); color: #333;
background-color: transparent; background-color: transparent;
text-transform: capitalize; text-transform: capitalize;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
} }
.itemInvoiceName { .itemInvoiceName {
width: calc(280% - 18px); /* Adjusted width */ width: calc(260% - 20px);
background-color: transparent; background-color: transparent;
font-size: 1.4rem; /* Increased font size */ font-size: 1.2rem;
font-weight: 500; font-weight: 600;
} }
.multiplySymbol { .multiplySymbol {
font-weight: 600; font-weight: 600;
color: #555;
} }
.qtyInvoice { .qtyInvoice {
font-weight: 500; font-weight: 500;
color: #555;
} }
.itemPrice { display: none; } .itemPrice {
display: none;
}
.itemPriceInvoice { .itemPriceInvoice {
font-family: "Plus Jakarta Sans", sans-serif; font-family: "Plus Jakarta Sans", sans-serif;
font-style: normal; font-style: normal;
font-weight: 600; font-weight: 700;
font-size: 1rem; /* Increased font size */ font-size: 1rem;
margin-left: 6px; /* Increased margin */ margin-left: 6px;
color: #d9c61c; color: #6B8F71;
text-align: right; text-align: right;
margin-top: 22px; margin-top: 22px;
} }
@@ -164,30 +225,34 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: flex-end; justify-content: flex-end;
gap: 10px; /* Increased gap */ gap: 12px;
min-height: 36px; /* Increased height */ min-height: 40px;
} }
.itemQtyValue { .itemQtyValue {
font-family: "Plus Jakarta Sans", sans-serif; font-family: "Plus Jakarta Sans", sans-serif;
font-style: normal; font-style: normal;
font-weight: 600; font-weight: 700;
margin-top: 22px; /* Increased margin */ margin-top: 22px;
margin-left: 2px; margin-left: 2px;
margin-right: 2px; margin-right: 2px;
width: 30px; /* Increased width */ width: 32px;
text-align: center; text-align: center;
color: #333;
} }
.itemQtyInput { .itemQtyInput {
font-family: "Plus Jakarta Sans", sans-serif; font-family: "Plus Jakarta Sans", sans-serif;
font-style: normal; font-style: normal;
font-weight: 600; font-weight: 700;
width: 36px; /* Increased width */ width: 40px;
font-size: 1rem; /* Increased font size */ font-size: 1rem;
margin-bottom: 12px; /* Increased margin */ margin-bottom: 12px;
text-align: center; text-align: center;
background-color: transparent; background-color: transparent;
border: 1px solid #ddd;
border-radius: 8px;
padding: 8px;
} }
.addButton { .addButton {
@@ -195,188 +260,266 @@
border: 1px solid var(--brand-sage, #6B8F71); border: 1px solid var(--brand-sage, #6B8F71);
color: #ffffff; color: #ffffff;
display: inline-block; display: inline-block;
font-size: 14px; /* Increased font size */ font-size: 14px;
font-weight: 600; font-weight: 600;
cursor: pointer; cursor: pointer;
min-width: 85px; /* Increased width */ min-width: 90px;
height: 36px; /* Increased height */ height: 40px;
padding: 0 14px; /* Increased padding */ padding: 0 16px;
border-radius: 12px; /* Increased border radius */ border-radius: 10px;
box-shadow: 0 1px 3px rgba(0,0,0,0.08); box-shadow: 0 2px 6px rgba(107, 143, 113, 0.2);
transition: all 0.2s ease;
} }
.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; } .addButton:hover {
background-color: var(--brand-sage-hover, #5a7a60);
border-color: var(--brand-sage-hover, #5a7a60);
box-shadow: 0 4px 10px rgba(107, 143, 113, 0.3);
}
.addButton:disabled {
background-color: var(--brand-sage-muted, #CFD8D3);
border-color: var(--brand-sage-muted, #CFD8D3);
cursor: default;
box-shadow: none;
}
.grayscale { .grayscale {
filter: grayscale(100%); filter: grayscale(100%);
} }
.disabled { .disabled {
color: gray; color: #999;
} }
.plusNegative { .plusNegative {
width: 36px; /* Increased width */ width: 40px;
height: 36px; /* Increased height */ height: 40px;
border-radius: 10px;
border: 1px solid #ddd;
background: #f8f9fa;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
font-weight: 700;
color: #666;
cursor: pointer;
transition: all 0.2s ease;
}
.plusNegative:hover {
background: #e9ecef;
border-color: #ccc;
} }
.plusNegative2 { .plusNegative2 {
width: 90px; /* Increased width */ width: 40px;
height: 24px; /* Increased height */ height: 40px;
position: absolute; position: absolute;
transform: rotate(45deg); right: 16px;
left: -38px; /* Adjusted position */ top: 50%;
top: 24px; /* Adjusted position */ transform: translateY(-50%);
border-radius: 10px;
border: 1px solid #ddd;
background: #f8f9fa;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
font-weight: 700;
color: #666;
cursor: pointer;
transition: all 0.2s ease;
} }
.plusNegative2:hover {
background: #e9ecef;
border-color: #ccc;
}
.remove { .remove {
width: 30px; /* Increased width */ width: 32px;
height: 30px; /* Increased height */ height: 32px;
margin-top: -12px; /* Adjusted margin */ position: absolute;
margin-right: 12px; /* Adjusted margin */ top: 12px;
right: 12px;
border-radius: 50%;
background: #ff4d4d;
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
font-weight: 700;
cursor: pointer;
transition: all 0.2s ease;
box-shadow: 0 2px 6px rgba(255, 77, 77, 0.3);
}
.remove:hover {
background: #ff1a1a;
transform: scale(1.1);
} }
/* New elements for clean cafe item card */ /* New elements for clean cafe item card */
.title { .title {
font-family: "Plus Jakarta Sans", sans-serif; font-family: "Plus Jakarta Sans", sans-serif;
font-weight: 600; font-weight: 600;
font-size: 18px; /* Increased font size */ font-size: 17px;
color: #2d2d2d; color: #333;
margin: 0 0 3px 0; /* Increased margin */ margin: 0 0 4px 0;
display: -webkit-box; display: -webkit-box;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
overflow: hidden; overflow: hidden;
-webkit-line-clamp: 2; -webkit-line-clamp: 2;
text-transform: capitalize; text-transform: capitalize;
text-align: left; text-align: left;
flex: 1; min-width: 0; flex: 1;
min-width: 0;
} }
/* Responsive type scale for title and price */ /* Responsive type scale for title and price */
@media (min-width: 600px) { @media (min-width: 600px) {
.title { font-size: 19px; } .title {
.priceNow { font-size: 17px; } font-size: 18px;
}
.priceNow {
font-size: 16px;
}
} }
@media (min-width: 992px) { @media (min-width: 992px) {
.title { font-size: 20px; } .title {
.priceNow { font-size: 18px; } font-size: 19px;
}
.priceNow {
font-size: 17px;
}
} }
.desc { .desc {
color: #5f5f5f; color: #666;
font-size: 14px; /* Increased font size */ font-size: 13px;
line-height: 1.3; line-height: 1.4;
display: -webkit-box; display: -webkit-box;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
overflow: hidden; overflow: hidden;
-webkit-line-clamp: 2; -webkit-line-clamp: 2;
} }
.priceRow { display: inline-flex; align-items: center; gap: 10px; } /* Increased gap */
/* Gaya harga baru untuk item list */ .priceRow {
.itemPriceList { display: inline-flex;
font-family: "Plus Jakarta Sans", sans-serif; align-items: center;
font-weight: 700; gap: 10px;
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 { .promoBadge {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding: 3px 10px; /* Increased padding */ padding: 4px 10px;
height: 24px; /* Increased height */ height: 24px;
border-radius: 999px; border-radius: 999px;
background: linear-gradient(to right, #e52535, #fe6d78); background: linear-gradient(to right, #e52535, #fe6d78);
color: #fff; color: #fff;
font-size: 13px; /* Increased font size */ font-size: 12px;
font-weight: 700; font-weight: 700;
} }
.priceNow { .priceNow {
color: #1c1d1d; color: #1c1d1d;
font-weight: 700; font-weight: 700;
font-size: 16px; /* Increased font size */ font-size: 15px;
white-space: nowrap; white-space: nowrap;
} }
.priceOld { .priceOld {
color: #727272; color: #727272;
font-size: 14px; /* Increased font size */ font-size: 13px;
text-decoration: line-through; text-decoration: line-through;
white-space: nowrap; white-space: nowrap;
} }
.qtyGroup { .qtyGroup {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
border: 1px solid rgba(255,255,255,0.6); border: 1px solid #ddd;
border-radius: 10px; /* Increased border radius */ border-radius: 10px;
height: 30px; /* Increased height */ height: 36px;
overflow: hidden; overflow: hidden;
background: transparent; background: #ffffff;
box-shadow: 0 1px 3px rgba(0,0,0,0.05);
} }
.qtyBtn { .qtyBtn {
width: 30px; /* Increased width */ width: 36px;
height: 30px; /* Increased height */ height: 36px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background: transparent; background: #f8f9fa;
color: #fff; color: #333;
border: none; border: none;
font-size: 20px; /* Increased font size */ font-size: 18px;
}
.qtyBtn:hover { background: rgba(255,255,255,0.15); }
.qtyVal {
min-width: 26px; /* Increased width */
text-align: center;
font-weight: 700; font-weight: 700;
color: #fff; cursor: pointer;
font-size: 15px; /* Increased font size */ transition: all 0.2s ease;
} }
.actionRow { display: flex; align-items: center; gap: 8px; justify-content: space-between; width: 100%; } /* Increased gap */ .qtyBtn:hover {
background: #e9ecef;
}
.qtyVal {
min-width: 30px;
text-align: center;
font-weight: 700;
color: #333;
font-size: 16px;
}
.actionRow {
display: flex;
align-items: center;
gap: 10px;
justify-content: space-between;
width: 100%;
}
/* Promo pill overlay on image */ /* Promo pill overlay on image */
.promoPill { .promoPill {
position: absolute; position: absolute;
top: 14px; /* Increased top position */ top: 10px;
right: 14px; /* Increased right position */ right: 10px;
z-index: 2; z-index: 2;
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding: 5px 12px; /* Increased padding */ padding: 6px 12px;
height: auto; height: auto;
border-radius: 10px; /* Increased border radius */ border-radius: 8px;
background: #e53935; background: #e53935;
color: #fff; color: #fff;
font-size: 13px; /* Increased font size */ font-size: 12px;
font-weight: 700; font-weight: 700;
box-shadow: 0 2px 6px rgba(229, 57, 53, 0.3);
} }
/* Info overlay on image (name + price) */ /* Info overlay on image (name + price) */
.overlayName { .overlayName {
position: absolute; position: absolute;
top: 14px; /* Increased top position */ top: 12px;
left: 14px; /* Increased left position */ left: 12px;
z-index: 2; z-index: 2;
font-family: "Plus Jakarta Sans", sans-serif; font-family: "Plus Jakarta Sans", sans-serif;
font-weight: 800; font-weight: 700;
font-size: 16px; /* Increased font size */ font-size: 15px;
line-height: 1.3; line-height: 1.3;
color: #fff; color: #fff;
mix-blend-mode: difference; mix-blend-mode: difference;
margin: 0; margin: 0;
max-width: 75%; /* Increased width */ max-width: 70%;
display: -webkit-box; display: -webkit-box;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
overflow: hidden; overflow: hidden;
@@ -384,10 +527,30 @@
pointer-events: none; pointer-events: none;
text-transform: capitalize; text-transform: capitalize;
} }
@media (min-width: 600px) { .overlayName { font-size: 17px; } }
.overlayPrice { display: flex; align-items: center; gap: 8px; } /* Increased gap */ @media (min-width: 600px) {
.overlayNow { color: #fff; font-weight: 800; font-size: 14px; } /* Increased font size */ .overlayName {
.overlayOld { color: rgba(255,255,255,0.8); font-size: 13px; text-decoration: line-through; } /* Increased font size */ font-size: 16px;
}
}
.overlayPrice {
display: flex;
align-items: center;
gap: 8px;
}
.overlayNow {
color: #fff;
font-weight: 800;
font-size: 13px;
}
.overlayOld {
color: rgba(255,255,255,0.8);
font-size: 12px;
text-decoration: line-through;
}
/* Bottom overlay bar: price left, qty right */ /* Bottom overlay bar: price left, qty right */
.bottomOverlay { .bottomOverlay {
@@ -399,36 +562,66 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding: 6px 12px; /* Increased padding */ padding: 10px 12px;
background: rgba(0,0,0,0.55); background: rgba(0,0,0,0.6);
color: #fff; color: #fff;
border-radius: 0 0 12px 12px;
} }
/* New stacked price for clarity */ /* New stacked price for clarity */
.overlayPriceCol { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.2; } /* Increased line height */ .overlayPriceCol {
.overlayOriginal { color: rgba(255,255,255,0.85); font-weight: 700; font-size: 12px; text-decoration: line-through; } /* Increased font size */ display: flex;
@media (min-width: 600px) { .overlayOriginal { font-size: 13px; } } flex-direction: column;
.overlayPromo { color: #fff; font-weight: 900; font-size: 18px; } /* Increased font size */ align-items: flex-start;
line-height: 1.2;
}
.overlayOriginal {
color: rgba(255,255,255,0.85);
font-weight: 700;
font-size: 12px;
text-decoration: line-through;
}
@media (min-width: 600px) { @media (min-width: 600px) {
.overlayOriginal { font-size: 16px; } /* Increased font size */ .overlayOriginal {
.overlayPromo { font-size: 20px; } /* Increased font size */ font-size: 13px;
}
}
.overlayPromo {
color: #fff;
font-weight: 800;
font-size: 17px;
}
@media (min-width: 600px) {
.overlayOriginal {
font-size: 15px;
}
.overlayPromo {
font-size: 19px;
}
} }
/* Title text below image for portrait mode */ /* Title text below image for portrait mode */
.title { .title {
font-family: "Plus Jakarta Sans", sans-serif; font-family: "Plus Jakarta Sans", sans-serif;
font-weight: 700; font-weight: 700;
font-size: 16px; /* Increased font size */ font-size: 16px;
color: #1c1d1d; color: #333;
margin: 8px 3px 6px 3px; /* Increased margin */ margin: 10px 4px 6px 4px;
text-transform: capitalize; text-transform: capitalize;
display: -webkit-box; display: -webkit-box;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
overflow: hidden; overflow: hidden;
-webkit-line-clamp: 2; -webkit-line-clamp: 2;
} }
@media (min-width: 600px) { @media (min-width: 600px) {
.title { font-size: 17px; } /* Increased font size */ .title {
font-size: 17px;
}
} }
.itemInvoice .itemDetails { .itemInvoice .itemDetails {
@@ -440,7 +633,7 @@
.itemInvoice .itemName, .itemInvoice .itemName,
.itemInvoice .itemPrice, .itemInvoice .itemPrice,
.itemInvoice .itemQty .qtyInvoice .multiplySymbol { .itemInvoice .itemQty .qtyInvoice .multiplySymbol {
font-size: 1.1rem; /* Increased font size */ font-size: 1rem;
} }
.blank { .blank {
@@ -453,6 +646,103 @@
.createItem { .createItem {
position: absolute; position: absolute;
left: 18px; /* Increased position */ left: 20px;
right: 18px; /* Increased position */ right: 20px;
bottom: 20px;
}
/* Item list container */
.item-list-container {
display: flex;
flex-direction: column;
gap: 16px;
padding: 16px 0;
}
/* Section header */
.section-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 0;
border-bottom: 1px solid #e6e6e6;
margin-bottom: 16px;
}
.section-title {
font-family: "Plus Jakarta Sans", sans-serif;
font-weight: 700;
font-size: 20px;
color: #333;
margin: 0;
}
.section-actions {
display: flex;
gap: 12px;
}
/* Empty state */
.empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 40px 20px;
text-align: center;
background: #f8f9fa;
border-radius: 12px;
margin: 20px 0;
}
.empty-state-icon {
font-size: 48px;
color: #ccc;
margin-bottom: 16px;
}
.empty-state-title {
font-family: "Plus Jakarta Sans", sans-serif;
font-weight: 600;
font-size: 18px;
color: #666;
margin-bottom: 8px;
}
.empty-state-description {
font-family: "Plus Jakarta Sans", sans-serif;
font-size: 14px;
color: #999;
margin-bottom: 20px;
max-width: 300px;
}
/* Card variant */
.item-card {
background: #ffffff;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
padding: 16px;
transition: all 0.2s ease;
}
.item-card:hover {
box-shadow: 0 4px 16px rgba(0,0,0,0.12);
transform: translateY(-2px);
}
/* List variant */
.item-list-item {
background: #ffffff;
border-radius: 12px;
box-shadow: 0 1px 3px rgba(0,0,0,0.05);
padding: 16px;
display: flex;
align-items: center;
gap: 16px;
transition: all 0.2s ease;
}
.item-list-item:hover {
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
} }

136
src/components/ItemConfig.js
View File

@@ -25,7 +25,6 @@ const ItemConfig = ({
const textareaRef = useRef(null); const textareaRef = useRef(null);
useEffect(() => { useEffect(() => {
// Prevent scrolling when modal is open // Prevent scrolling when modal is open
document.body.style.overflow = "hidden"; document.body.style.overflow = "hidden";
if(selectedImage){ if(selectedImage){
@@ -92,11 +91,28 @@ const ItemConfig = ({
}; };
return ( 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={handleOverlayClick} className={styles.modalOverlay}>
<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 onClick={handleContentClick} className={styles.modalContent}>
<div style={{ display: 'flex' }}> <div className={styles.imageSection}>
<div style={{ width: '30vw', height: '30vw', marginRight: '12px' }}> {/* Increased size and margin */} <div className={styles.imagePreview}>
<img style={{ width: '100%', height: '100%', borderRadius: '12px', objectFit: 'cover' }} src={previewUrl} /> {/* Increased border radius */} <img src={previewUrl} alt="Preview" className={styles.previewImage} />
</div>
<div className={styles.imageActions}>
<button
onClick={handleChangeImage}
className={styles.actionButton}
>
{isBeingEdit ? 'Ganti Gambar' : 'Tambah Gambar'}
</button>
{isBeingEdit && (
<button
onClick={handleDelete}
className={`${styles.actionButton} ${styles.deleteButton}`}
>
Hapus
</button>
)}
</div>
<input <input
type="file" type="file"
ref={fileInputRef} ref={fileInputRef}
@@ -106,109 +122,63 @@ const ItemConfig = ({
style={{ display: "none" }} style={{ display: "none" }}
/> />
</div> </div>
<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: '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: '12px' }}> {/* Increased margin */} <div className={styles.formSection}>
<p style={{ marginBottom: '6px', fontWeight: '500', fontSize: '18px' }}>Nama item</p> {/* Increased margin and font size */} <div className={styles.formGroup}>
<label className={styles.formLabel}>Nama Item</label>
<input <input
value={itemName} value={itemName}
style={{ className={styles.formInput}
padding: '12px', // Increased padding
borderRadius: '8px', // Increased border radius
border: '1px solid #ccc',
fontSize: '16px', // Increased font size
width: '100%',
marginBottom: '18px', // Increased margin
outline: 'none',
transition: 'all 0.3s ease',
boxSizing: 'border-box',
}}
onChange={(e)=>setItemName(e.target.value)} onChange={(e)=>setItemName(e.target.value)}
onFocus={(e) => e.target.style.borderColor = '#60d37e'} placeholder="Masukkan nama item"
onBlur={(e) => e.target.style.borderColor = '#ccc'}
/> />
</div> </div>
<div style={{ display: 'flex', color: 'black', justifyContent: 'space-between' }}> <div className={styles.formRow}>
<div style={{ width: '48%' }}> <div className={styles.formGroup}>
<p style={{ marginBottom: '6px', fontWeight: '500', marginTop: 0, fontSize: '18px' }}>Harga</p> {/* Increased margin and font size */} <label className={styles.formLabel}>Harga</label>
<input <input
value={itemPrice} value={itemPrice}
style={{ className={styles.formInput}
padding: '12px', // Increased padding
borderRadius: '8px', // Increased border radius
border: '1px solid #ccc',
fontSize: '16px', // Increased font size
width: '100%',
marginBottom: '18px', // Increased margin
outline: 'none',
transition: 'all 0.3s ease',
boxSizing: 'border-box',
}}
onChange={(e)=>setItemPrice(e.target.value)} onChange={(e)=>setItemPrice(e.target.value)}
onFocus={(e) => e.target.style.borderColor = '#60d37e'} placeholder="Rp 0"
onBlur={(e) => e.target.style.borderColor = '#ccc'}
/> />
</div> </div>
<div style={{ width: '48%' }}> <div className={styles.formGroup}>
<p style={{ marginBottom: '6px', fontWeight: '500', marginTop: 0, fontSize: '18px' }}>Harga promo</p> {/* Increased margin and font size */} <label className={styles.formLabel}>Harga Promo</label>
<input <input
value={itemPromoPrice} value={itemPromoPrice}
placeholder="Opsional" className={styles.formInput}
style={{
padding: '12px', // Increased padding
borderRadius: '8px', // Increased border radius
border: '1px solid #ccc',
fontSize: '16px', // Increased font size
width: '100%',
marginBottom: '18px', // Increased margin
outline: 'none',
transition: 'all 0.3s ease',
boxSizing: 'border-box',
}}
onChange={(e)=>setItemPromoPrice(e.target.value)} onChange={(e)=>setItemPromoPrice(e.target.value)}
onFocus={(e) => e.target.style.borderColor = '#60d37e'} placeholder="Opsional"
onBlur={(e) => e.target.style.borderColor = '#ccc'}
/> />
</div> </div>
</div> </div>
<div style={{ display: 'flex', flexDirection: 'column', color: 'black' }}> <div className={styles.formGroup}>
<p style={{ marginBottom: '6px', fontWeight: '500', marginTop: 0, fontSize: '18px' }}>Deskripsi</p> {/* Increased margin and font size */} <label className={styles.formLabel}>Deskripsi</label>
<textarea <textarea
ref={textareaRef} ref={textareaRef}
style={{ className={styles.formTextarea}
padding: '12px', // Increased padding placeholder="Tambahkan deskripsi item..."
borderRadius: '8px', // Increased border radius
border: '1px solid #ccc',
fontSize: '16px', // Increased font size
width: '100%',
marginBottom: '18px', // Increased margin
outline: 'none',
transition: 'all 0.3s ease',
boxSizing: 'border-box',
resize: 'none',
}}
placeholder="Tambah deskripsi..."
value={itemDescription} value={itemDescription}
onChange={(e)=>setItemDescription(e.target.value)} onChange={(e)=>setItemDescription(e.target.value)}
onFocus={(e) => e.target.style.borderColor = '#60d37e'}
onBlur={(e) => e.target.style.borderColor = '#ccc'}
/> />
</div> </div>
<div style={{ width: '100%', height: '42px', display: 'flex', justifyContent: 'center', alignItems: 'center' }}> {/* Increased height */} <div className={styles.formActions}>
<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 */} <button
{isBeingEdit? 'Simpan' : 'Buat Item'} onClick={cancelEdit}
className={`${styles.formButton} ${styles.cancelButton}`}
>
Batal
</button>
<button
onClick={() => {isBeingEdit ? handleUpdate() : handleCreate()}}
className={`${styles.formButton} ${styles.saveButton}`}
>
{isBeingEdit ? 'Simpan Perubahan' : 'Buat Item'}
</button>
</div> </div>
</div> </div>
</div> </div>

255
src/components/ItemLister.js
View File

@@ -17,7 +17,7 @@ import {
import ItemType from "./ItemType.js"; import ItemType from "./ItemType.js";
import { createItemType, updateItemDeletionStatus } from "../helpers/itemHelper.js"; import { createItemType, updateItemDeletionStatus } from "../helpers/itemHelper.js";
import ItemConfig from "./ItemConfig.js" import ItemConfig from "./ItemConfig.js"
import { ArrowUp, ArrowDown, Pencil } from 'lucide-react'; import { ArrowUp, ArrowDown, Pencil, Save, X } from 'lucide-react';
const ItemLister = ({ const ItemLister = ({
index, index,
@@ -625,7 +625,15 @@ const ItemLister = ({
{(isEdit && isFirstStep || !isEdit) && {(isEdit && isFirstStep || !isEdit) &&
<div className={styles["title-container"]}> <div className={styles["title-container"]}>
{isEdit && <ItemType blank={true} imageUrl={previewUrl} compact={true} />} {isEdit && (
<div className={styles["image-preview"]}>
<img
src={previewUrl}
alt="Category Preview"
className={styles["preview-image"]}
/>
</div>
)}
<input <input
className={`${styles.title} ${isEdit ? styles.border : styles.noborder className={`${styles.title} ${isEdit ? styles.border : styles.noborder
}`} }`}
@@ -642,7 +650,7 @@ const ItemLister = ({
disabled={index === 0} disabled={index === 0}
aria-label="Naikkan kategori" aria-label="Naikkan kategori"
> >
<ArrowUp size={16} /> {/* Reduced icon size for compact design */} <ArrowUp size={20} />
</button> </button>
<button <button
className={styles.iconBtn} className={styles.iconBtn}
@@ -650,14 +658,32 @@ const ItemLister = ({
disabled={index === indexTotal - 1} disabled={index === indexTotal - 1}
aria-label="Turunkan kategori" aria-label="Turunkan kategori"
> >
<ArrowDown size={16} /> {/* Reduced icon size for compact design */} <ArrowDown size={20} />
</button> </button>
<button <button
className={styles.iconBtn} className={styles.iconBtn}
onClick={toggleEditTypeItem} onClick={toggleEditTypeItem}
aria-label="Edit kategori" aria-label="Edit kategori"
> >
<Pencil size={16} /> {/* Reduced icon size for compact design */} <Pencil size={20} />
</button>
</div>
)}
{isEditMode && isEdit && (
<div className={styles.titleActions}>
<button
className={styles.iconBtn}
onClick={handleSaveType}
aria-label="Simpan"
>
<Save size={20} />
</button>
<button
className={styles.iconBtn}
onClick={resetItems}
aria-label="Batal"
>
<X size={20} />
</button> </button>
</div> </div>
)} )}
@@ -673,7 +699,7 @@ const ItemLister = ({
handleImageChange(previewUrl, selectedImage) handleImageChange(previewUrl, selectedImage)
} }
imageUrl={getImageUrl("uploads/assets/addnew.png")} imageUrl={getImageUrl("uploads/assets/addnew.png")}
compact={true} compact={false}
/> />
{/* {typeImage != null && !previewUrl.includes(typeImage) && ( {/* {typeImage != null && !previewUrl.includes(typeImage) && (
<ItemType <ItemType
@@ -691,7 +717,7 @@ const ItemLister = ({
handleImageChange(previewUrl, selectedImage) handleImageChange(previewUrl, selectedImage)
} }
imageUrl={getImageUrl("uploads/assets/beverage4.jpg")} imageUrl={getImageUrl("uploads/assets/beverage4.jpg")}
compact={true} compact={false}
/> />
<ItemType <ItemType
rectangular={true} rectangular={true}
@@ -699,7 +725,7 @@ const ItemLister = ({
handleImageChange(previewUrl, selectedImage) handleImageChange(previewUrl, selectedImage)
} }
imageUrl={getImageUrl("uploads/assets/beverage1.png")} imageUrl={getImageUrl("uploads/assets/beverage1.png")}
compact={true} compact={false}
/> />
<ItemType <ItemType
rectangular={true} rectangular={true}
@@ -707,7 +733,7 @@ const ItemLister = ({
handleImageChange(previewUrl, selectedImage) handleImageChange(previewUrl, selectedImage)
} }
imageUrl={getImageUrl("uploads/assets/beverage2.png")} imageUrl={getImageUrl("uploads/assets/beverage2.png")}
compact={true} compact={false}
/> />
<ItemType <ItemType
rectangular={true} rectangular={true}
@@ -715,7 +741,7 @@ const ItemLister = ({
handleImageChange(previewUrl, selectedImage) handleImageChange(previewUrl, selectedImage)
} }
imageUrl={getImageUrl("uploads/assets/beverage3.png")} imageUrl={getImageUrl("uploads/assets/beverage3.png")}
compact={true} compact={false}
/> />
<ItemType <ItemType
rectangular={true} rectangular={true}
@@ -723,7 +749,7 @@ const ItemLister = ({
handleImageChange(previewUrl, selectedImage) handleImageChange(previewUrl, selectedImage)
} }
imageUrl={getImageUrl("uploads/assets/snack5.png")} imageUrl={getImageUrl("uploads/assets/snack5.png")}
compact={true} compact={false}
/> />
<ItemType <ItemType
rectangular={true} rectangular={true}
@@ -731,7 +757,7 @@ const ItemLister = ({
handleImageChange(previewUrl, selectedImage) handleImageChange(previewUrl, selectedImage)
} }
imageUrl={getImageUrl("uploads/assets/dessert1.png")} imageUrl={getImageUrl("uploads/assets/dessert1.png")}
compact={true} compact={false}
/> />
<ItemType <ItemType
rectangular={true} rectangular={true}
@@ -739,7 +765,7 @@ const ItemLister = ({
handleImageChange(previewUrl, selectedImage) handleImageChange(previewUrl, selectedImage)
} }
imageUrl={getImageUrl("uploads/assets/dessert2.jpg")} imageUrl={getImageUrl("uploads/assets/dessert2.jpg")}
compact={true} compact={false}
/> />
<ItemType <ItemType
rectangular={true} rectangular={true}
@@ -747,7 +773,7 @@ const ItemLister = ({
handleImageChange(previewUrl, selectedImage) handleImageChange(previewUrl, selectedImage)
} }
imageUrl={getImageUrl("uploads/assets/food4.jpg")} imageUrl={getImageUrl("uploads/assets/food4.jpg")}
compact={true} compact={false}
/> />
<ItemType <ItemType
rectangular={true} rectangular={true}
@@ -755,7 +781,7 @@ const ItemLister = ({
handleImageChange(previewUrl, selectedImage) handleImageChange(previewUrl, selectedImage)
} }
imageUrl={getImageUrl("uploads/assets/food1.png")} imageUrl={getImageUrl("uploads/assets/food1.png")}
compact={true} compact={false}
/> />
<ItemType <ItemType
rectangular={true} rectangular={true}
@@ -763,7 +789,7 @@ const ItemLister = ({
handleImageChange(previewUrl, selectedImage) handleImageChange(previewUrl, selectedImage)
} }
imageUrl={getImageUrl("uploads/assets/food2.jpg")} imageUrl={getImageUrl("uploads/assets/food2.jpg")}
compact={true} compact={false}
/> />
<ItemType <ItemType
@@ -772,7 +798,7 @@ const ItemLister = ({
handleImageChange(previewUrl, selectedImage) handleImageChange(previewUrl, selectedImage)
} }
imageUrl={getImageUrl("uploads/assets/food3.png")} imageUrl={getImageUrl("uploads/assets/food3.png")}
compact={true} compact={false}
/> />
<ItemType <ItemType
rectangular={true} rectangular={true}
@@ -780,7 +806,7 @@ const ItemLister = ({
handleImageChange(previewUrl, selectedImage) handleImageChange(previewUrl, selectedImage)
} }
imageUrl={getImageUrl("uploads/assets/packet1.png")} imageUrl={getImageUrl("uploads/assets/packet1.png")}
compact={true} compact={false}
/> />
<ItemType <ItemType
rectangular={true} rectangular={true}
@@ -788,7 +814,7 @@ const ItemLister = ({
handleImageChange(previewUrl, selectedImage) handleImageChange(previewUrl, selectedImage)
} }
imageUrl={getImageUrl("uploads/assets/packet2.png")} imageUrl={getImageUrl("uploads/assets/packet2.png")}
compact={true} compact={false}
/> />
<ItemType <ItemType
rectangular={true} rectangular={true}
@@ -796,7 +822,7 @@ const ItemLister = ({
handleImageChange(previewUrl, selectedImage) handleImageChange(previewUrl, selectedImage)
} }
imageUrl={getImageUrl("uploads/assets/snack1.png")} imageUrl={getImageUrl("uploads/assets/snack1.png")}
compact={true} compact={false}
/> />
<ItemType <ItemType
rectangular={true} rectangular={true}
@@ -804,7 +830,7 @@ const ItemLister = ({
handleImageChange(previewUrl, selectedImage) handleImageChange(previewUrl, selectedImage)
} }
imageUrl={getImageUrl("uploads/assets/snack2.png")} imageUrl={getImageUrl("uploads/assets/snack2.png")}
compact={true} compact={false}
/> />
<ItemType <ItemType
rectangular={true} rectangular={true}
@@ -812,7 +838,7 @@ const ItemLister = ({
handleImageChange(previewUrl, selectedImage) handleImageChange(previewUrl, selectedImage)
} }
imageUrl={getImageUrl("uploads/assets/snack3.png")} imageUrl={getImageUrl("uploads/assets/snack3.png")}
compact={true} compact={false}
/> />
<ItemType <ItemType
rectangular={true} rectangular={true}
@@ -820,7 +846,7 @@ const ItemLister = ({
handleImageChange(previewUrl, selectedImage) handleImageChange(previewUrl, selectedImage)
} }
imageUrl={getImageUrl("uploads/assets/snack4.png")} imageUrl={getImageUrl("uploads/assets/snack4.png")}
compact={true} compact={false}
/> />
{Array.from({ length: 16 }, (_, index) => { {Array.from({ length: 16 }, (_, index) => {
const sampleNumber = index + 1; // To get numbers from 1 to 16 const sampleNumber = index + 1; // To get numbers from 1 to 16
@@ -832,18 +858,42 @@ const ItemLister = ({
handleImageChange(previewUrl, selectedImage) handleImageChange(previewUrl, selectedImage)
} }
imageUrl={getImageUrl(`uploads/samples/sample (${sampleNumber}).png`)} imageUrl={getImageUrl(`uploads/samples/sample (${sampleNumber}).png`)}
compact={true} compact={false}
/> />
); );
})} })}
</div> </div>
<button onClick={() => setIsFirstStep(false)} style={{ width: '100%', height: '40px', borderRadius: '20px' }}>selanjutnya</button> <button onClick={() => setIsFirstStep(false)} className={styles["add-item-button"]}>
Selanjutnya
</button>
</> </>
)} )}
{(isEdit && !isFirstStep || !isEdit) && {(isEdit && !isFirstStep || !isEdit) &&
<div key={randomKey}> <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> {isEdit && (
<h2 className={styles["item-list-title"]}>{items && items.length < 1 ? 'Buat item' : 'Daftar item'}</h2></div>} <div className={styles["settings-section"]}>
<h3 className={styles["settings-title"]}>Pengaturan Kategori</h3>
<div className={styles["setting-row"]}>
<span className={styles["setting-label"]}>Visibilitas Kategori</span>
<div className={styles["switch-container"]}>
<span className={styles["switch-label"]}>
{isVisible ? "Tampil" : "Tersembunyi"}
</span>
<Switch
onChange={() => setIsVisible(!isVisible)}
checked={isVisible}
offColor="#cccccc"
onColor="#6B8F71"
uncheckedIcon={false}
checkedIcon={false}
height={24}
width={48}
handleDiameter={20}
/>
</div>
</div>
</div>
)}
<div className={`${styles["item-list"]} ${(!isEdit && !forInvoice) ? styles["item-grid"] : ""}`}> <div className={`${styles["item-list"]} ${(!isEdit && !forInvoice) ? styles["item-grid"] : ""}`}>
{user && ( {user && (
user.user_id == shopOwnerId || user.cafeId == shopId) && user.user_id == shopOwnerId || user.cafeId == shopId) &&
@@ -853,13 +903,8 @@ const ItemLister = ({
<button <button
className={styles["add-item-button"]} className={styles["add-item-button"]}
onClick={toggleAddNewItem} onClick={toggleAddNewItem}
style={{
display: "inline-block",
height: "120px",
fontSize: "20px",
}}
> >
Tambah item + + Tambah Item Baru
</button> </button>
)} )}
{isAddingNewItem && ( {isAddingNewItem && (
@@ -895,48 +940,29 @@ const ItemLister = ({
{isEditMode && isEditItem != item.itemId && ( {isEditMode && isEditItem != item.itemId && (
<div className={styles["editModeLayout"]}> <div className={styles["editModeLayout"]}>
<div style={{ display: 'flex', alignItems: 'center', height: '40px', marginLeft: '7.5vw' }}> <div>
{isEditMode && ( {isEditMode && (
<div className={styles["switch-container"]}>
<span className={styles["switch-label"]}>
{item.availability ? "Tersedia" : "Tidak Tersedia"}
</span>
<Switch <Switch
onChange={() => handleChange(item.itemId)} onChange={() => handleChange(item.itemId)}
checked={item.availability} checked={item.availability}
offColor="#cccccc"
onColor="#6B8F71"
uncheckedIcon={false}
checkedIcon={false}
height={20}
width={40}
handleDiameter={16}
/> />
</div>
)} )}
<h3>
&nbsp;{item.availability ? "Tersedia" : "Tidak tersedia"}
</h3>
</div> </div>
<div onClick={() => editItem(item.itemId)} style={{ display: 'flex', alignItems: 'center', height: '40px', marginRight: '7.5vw' }}> <div onClick={() => editItem(item.itemId)}>
<div <Pencil size={18} />
style={{
width: '32px',
height: '32px', // Add a height to the div
display: 'flex', // Use flexbox
justifyContent: 'center', // Center horizontally
alignItems: 'center', // Center vertically
cursor: 'pointer'
}}
>
<svg
fill="white"
viewBox="0 0 32 32"
style={{ fillRule: 'evenodd', clipRule: 'evenodd', strokeLinejoin: 'round', strokeMiterlimit: 2 }}
version="1.1"
xmlSpace="preserve"
xmlns="http://www.w3.org/2000/svg"
xmlnsSerif="http://www.serif.com/"
xmlnsXlink="http://www.w3.org/1999/xlink"
>
<g id="SVGRepo_bgCarrier" strokeWidth="0"></g>
<g id="SVGRepo_tracerCarrier" strokeLinecap="round" strokeLinejoin="round"></g>
<g id="SVGRepo_iconCarrier">
<path d="M12.965,5.462c0,-0 -2.584,0.004 -4.979,0.008c-3.034,0.006 -5.49,2.467 -5.49,5.5l0,13.03c0,1.459 0.579,2.858 1.611,3.889c1.031,1.032 2.43,1.611 3.889,1.611l13.003,0c3.038,-0 5.5,-2.462 5.5,-5.5c0,-2.405 0,-5.004 0,-5.004c0,-0.828 -0.672,-1.5 -1.5,-1.5c-0.827,-0 -1.5,0.672 -1.5,1.5l0,5.004c0,1.381 -1.119,2.5 -2.5,2.5l-13.003,0c-0.663,-0 -1.299,-0.263 -1.768,-0.732c-0.469,-0.469 -0.732,-1.105 -0.732,-1.768l0,-13.03c0,-1.379 1.117,-2.497 2.496,-2.5c2.394,-0.004 4.979,-0.008 4.979,-0.008c0.828,-0.002 1.498,-0.675 1.497,-1.503c-0.001,-0.828 -0.675,-1.499 -1.503,-1.497Z"></path>
<path d="M20.046,6.411l-6.845,6.846c-0.137,0.137 -0.232,0.311 -0.271,0.501l-1.081,5.152c-0.069,0.329 0.032,0.671 0.268,0.909c0.237,0.239 0.577,0.343 0.907,0.277l5.194,-1.038c0.193,-0.039 0.371,-0.134 0.511,-0.274l6.845,-6.845l-5.528,-5.528Zm1.415,-1.414l5.527,5.528l1.112,-1.111c1.526,-1.527 1.526,-4.001 -0,-5.527c-0.001,-0 -0.001,-0.001 -0.001,-0.001c-1.527,-1.526 -4.001,-1.526 -5.527,-0l-1.111,1.111Z"></path>
</g>
</svg>
</div>
<h3>Edit item</h3>
</div> </div>
</div> </div>
)} )}
@@ -970,13 +996,6 @@ const ItemLister = ({
<div <div
key={item.itemId}> key={item.itemId}>
{isEditItem == item.itemId && ( {isEditItem == item.itemId && (
// <button
// className={styles["add-item-button"]}
// onClick={() => editItem(0)}
// style={{ display: "inline-block" }}
// >
// batal
// </button>
<ItemConfig <ItemConfig
isBeingEdit={true} isBeingEdit={true}
name={item.name} name={item.name}
@@ -1002,23 +1021,30 @@ const ItemLister = ({
<div className={styles["itemWrapper"]}> <div className={styles["itemWrapper"]}>
{(isEditMode && isEditItem != item.itemId || item.willBeDeleted) && ( {(isEditMode && isEditItem != item.itemId || item.willBeDeleted) && (
<div className={styles["editModeLayout"]}> <div className={styles["editModeLayout"]}>
<div style={{ display: 'flex', alignItems: 'center', height: '40px', marginLeft: '7.5vw' }}> <div>
{!item.willBeDeleted && isEditMode && ( {!item.willBeDeleted && isEditMode && (
<div className={styles["switch-container"]}>
<span className={styles["switch-label"]}>
{item.availability ? "Tersedia" : "Tidak Tersedia"}
</span>
<Switch <Switch
onChange={() => handleChange(item.itemId)} onChange={() => handleChange(item.itemId)}
checked={item.availability} checked={item.availability}
offColor="#cccccc"
onColor="#6B8F71"
uncheckedIcon={false}
checkedIcon={false}
height={20}
width={40}
handleDiameter={16}
/> />
</div>
)} )}
{item.willBeDeleted ? {item.willBeDeleted && (
<span style={{ backgroundColor: 'black', padding: '6px 12px', borderRadius: '20px' }}>
<h3 style={{ backgroundColor: 'black', padding: '13px 26px' }}>
Ditandai untuk dihapus Ditandai untuk dihapus
</h3> </span>
: )}
<h3>
&nbsp;{item.availability ? "Tersedia" : "Tidak tersedia"}
</h3>
}
</div> </div>
<div onClick={() => { <div onClick={() => {
@@ -1027,38 +1053,8 @@ const ItemLister = ({
} else { } else {
handleItemDeletionToggle(item.itemId, false); handleItemDeletionToggle(item.itemId, false);
} }
}} }}>
style={{ display: 'flex', alignItems: 'center', height: '40px', marginRight: '7.5vw' }}> <Pencil size={18} />
{!item.willBeDeleted && <div
style={{
width: '32px',
height: '32px', // Add a height to the div
display: 'flex', // Use flexbox
justifyContent: 'center', // Center horizontally
alignItems: 'center', // Center vertically
cursor: 'pointer'
}}
>
<svg
fill="white"
viewBox="0 0 32 32"
style={{ fillRule: 'evenodd', clipRule: 'evenodd', strokeLinejoin: 'round', strokeMiterlimit: 2 }}
version="1.1"
xmlSpace="preserve"
xmlns="http://www.w3.org/2000/svg"
xmlnsSerif="http://www.serif.com/"
xmlnsXlink="http://www.w3.org/1999/xlink"
>
<g id="SVGRepo_bgCarrier" strokeWidth="0"></g>
<g id="SVGRepo_tracerCarrier" strokeLinecap="round" strokeLinejoin="round"></g>
<g id="SVGRepo_iconCarrier">
<path d="M12.965,5.462c0,-0 -2.584,0.004 -4.979,0.008c-3.034,0.006 -5.49,2.467 -5.49,5.5l0,13.03c0,1.459 0.579,2.858 1.611,3.889c1.031,1.032 2.43,1.611 3.889,1.611l13.003,0c3.038,-0 5.5,-2.462 5.5,-5.5c0,-2.405 0,-5.004 0,-5.004c0,-0.828 -0.672,-1.5 -1.5,-1.5c-0.827,-0 -1.5,0.672 -1.5,1.5l0,5.004c0,1.381 -1.119,2.5 -2.5,2.5l-13.003,0c-0.663,-0 -1.299,-0.263 -1.768,-0.732c-0.469,-0.469 -0.732,-1.105 -0.732,-1.768l0,-13.03c0,-1.379 1.117,-2.497 2.496,-2.5c2.394,-0.004 4.979,-0.008 4.979,-0.008c0.828,-0.002 1.498,-0.675 1.497,-1.503c-0.001,-0.828 -0.675,-1.499 -1.503,-1.497Z"></path>
<path d="M20.046,6.411l-6.845,6.846c-0.137,0.137 -0.232,0.311 -0.271,0.501l-1.081,5.152c-0.069,0.329 0.032,0.671 0.268,0.909c0.237,0.239 0.577,0.343 0.907,0.277l5.194,-1.038c0.193,-0.039 0.371,-0.134 0.511,-0.274l6.845,-6.845l-5.528,-5.528Zm1.415,-1.414l5.527,5.528l1.112,-1.111c1.526,-1.527 1.526,-4.001 -0,-5.527c-0.001,-0 -0.001,-0.001 -0.001,-0.001c-1.527,-1.526 -4.001,-1.526 -5.527,-0l-1.111,1.111Z"></path>
</g>
</svg>
</div>
}
<h3>{item.willBeDeleted ? 'Batalkan' : 'Edit item'}</h3>
</div> </div>
</div> </div>
)} )}
@@ -1109,33 +1105,6 @@ const ItemLister = ({
</div> </div>
</div> </div>
} }
{isEdit && (
<div className={styles.PaymentOption}>
<div className={styles.TotalContainer}>
<span>Pengaturan</span>
<span></span>
</div>
<div className={styles.OptionContainer}>
<span>sembunyikan semua</span>
<span>
<Switch
onChange={() => setIsVisible(!isVisible)}
checked={!isVisible}
/>
</span>
</div>
<button onClick={handleSaveType} className={styles.PayButton}>
{false ? (
<ColorRing height="50" width="50" color="white" />
) : (
"Simpan"
)}
</button>
<div className={styles.Pay2Button} onClick={resetItems}>
Kembali
</div>
</div>
)}
</div> </div>
)} )}
</> </>

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

@@ -2,9 +2,15 @@
.item-lister { .item-lister {
width: 100%; width: 100%;
padding: 10px; /* Slightly reduced padding */ padding: 16px;
box-sizing: border-box; box-sizing: border-box;
white-space: break-spaces; white-space: break-spaces;
background-color: #ffffff;
border-radius: 16px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
margin-bottom: 20px;
position: relative;
z-index: 150; /* Memastikan berada di bawah material list */
} }
.fullscreen { .fullscreen {
@@ -21,59 +27,63 @@
.grid-container { .grid-container {
display: grid; display: grid;
grid-template-columns: repeat(4, 1fr); grid-template-columns: repeat(4, 1fr);
gap: 10px; gap: 16px;
height: calc(50vw - 20px); height: calc(52vw - 20px);
padding: 16px;
background-color: #f8f9fa;
border-radius: 12px;
margin-bottom: 24px;
} }
@media (min-height: 0px) { @media (min-height: 0px) {
.grid-container { .grid-container {
height: 28vh; height: 30vh;
} }
} }
@media (min-height: 630px) { @media (min-height: 630px) {
.grid-container { .grid-container {
height: 28vh; height: 30vh;
} }
} }
@media (min-height: 636px) { @media (min-height: 636px) {
.grid-container { .grid-container {
height: 30vh; height: 32vh;
} }
} }
@media (min-height: 650px) { @media (min-height: 650px) {
.grid-container { .grid-container {
height: 36vh; height: 38vh;
} }
} }
@media (min-height: 705px) { @media (min-height: 705px) {
.grid-container { .grid-container {
height: 39vh; height: 41vh;
} }
} }
@media (min-height: 735px) { @media (min-height: 735px) {
.grid-container { .grid-container {
height: 40vh; height: 42vh;
} }
} }
@media (min-height: 759px) { @media (min-height: 759px) {
.grid-container { .grid-container {
height: 42vh; height: 44vh;
} }
} }
@media (min-height: 819px) { @media (min-height: 819px) {
.grid-container { .grid-container {
height: 46vh; height: 48vh;
} }
} }
@media (min-height: 830px) { @media (min-height: 830px) {
.grid-container { .grid-container {
height: 49vh; height: 51vh;
} }
} }
@media (min-height: 892px) { @media (min-height: 892px) {
.grid-container { .grid-container {
height: 51vh; height: 53vh;
} }
} }
@@ -81,30 +91,36 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding: 12px 16px; /* Added padding for better spacing */ padding: 16px 20px;
background-color: #f8f9fa; /* Light background for better visual separation */ background-color: #f8f9fa;
border-radius: 12px; /* Rounded corners */ border-radius: 12px;
margin-bottom: 16px; /* Space below the title container */ margin-bottom: 20px;
box-shadow: 0 1px 3px rgba(0,0,0,0.05); /* Subtle shadow */ box-shadow: 0 1px 3px rgba(0,0,0,0.05);
position: relative;
z-index: 151;
} }
.titleActions { .titleActions {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
gap: 6px; gap: 10px;
} }
.iconBtn { .iconBtn {
width: 32px; width: 40px;
height: 32px; height: 40px;
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
border: 1px solid #e6e6e6; border: 1px solid #e6e6e6;
background: #ffffff; background: #ffffff;
color: #2d2d2d; color: #2d2d2d;
border-radius: 8px; border-radius: 10px;
cursor: pointer; cursor: pointer;
transition: all 0.2s ease;
box-shadow: 0 1px 3px rgba(0,0,0,0.05);
position: relative;
z-index: 152;
} }
.iconBtn:disabled { .iconBtn:disabled {
opacity: 0.5; opacity: 0.5;
@@ -113,62 +129,90 @@
.iconBtn:hover:not(:disabled) { .iconBtn:hover:not(:disabled) {
background: var(--brand-sage-50, #F0F6F2); background: var(--brand-sage-50, #F0F6F2);
border-color: var(--brand-sage, #6B8F71); border-color: var(--brand-sage, #6B8F71);
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
} }
.title { .title {
background-color: transparent; background-color: transparent;
font-family: "Plus Jakarta Sans", sans-serif; font-family: "Plus Jakarta Sans", sans-serif;
font-weight: 600; /* Increased font weight for better visibility */ font-weight: 600;
font-style: normal; font-style: normal;
font-size: 20px; font-size: 22px;
color: rgba(88, 55, 50, 1); color: rgba(88, 55, 50, 1);
text-align: left; text-align: left;
width: calc(70% - 10px); width: calc(70% - 12px);
padding-left: 10px; padding-left: 12px;
text-transform: capitalize; text-transform: capitalize;
border: none;
outline: none;
position: relative;
z-index: 151;
} }
.edit-typeItem-button { .edit-typeItem-button {
margin-left: auto; margin-left: auto;
padding: 6px 12px; padding: 10px 16px;
font-size: 13px; font-size: 14px;
background-color: #007bff; background-color: #007bff;
color: #fff; color: #fff;
border: none; border: none;
border-radius: 4px; border-radius: 8px;
cursor: pointer; cursor: pointer;
transition: all 0.2s ease;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
position: relative;
z-index: 152;
}
.edit-typeItem-button:hover {
background-color: #0069d9;
box-shadow: 0 4px 8px rgba(0,0,0,0.15);
} }
.add-item-button { .add-item-button {
margin-top: 10px; margin-top: 16px;
padding: 6px 12px; padding: 12px 20px;
font-size: 13px; font-size: 16px;
background-color: #359d42d1; background-color: #359d42d1;
color: #fff; color: #fff;
border: none; border: none;
border-radius: 4px; border-radius: 10px;
cursor: pointer; cursor: pointer;
transition: all 0.2s ease;
box-shadow: 0 2px 6px rgba(53, 157, 66, 0.2);
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
position: relative;
z-index: 151;
}
.add-item-button:hover {
background-color: #2d8a39;
box-shadow: 0 4px 10px rgba(53, 157, 66, 0.3);
} }
.item-list { .item-list {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 16px;
position: relative;
z-index: 150;
} }
/* Grid layout for portrait cards on cafe page */ /* Grid layout for portrait cards on cafe page */
.item-grid { .item-grid {
display: grid; display: grid;
grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr);
gap: 8px; gap: 16px;
} }
@media (min-width: 600px) { @media (min-width: 600px) {
.item-grid { .item-grid {
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
} }
} }
@media (min-width: 992px) { @media (min-width: 992px) {
.item-grid { .item-grid {
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
} }
} }
@@ -179,40 +223,62 @@
.noborder { .noborder {
border: 1px solid #ffffff00; border: 1px solid #ffffff00;
} }
.itemWrapper { .itemWrapper {
position: relative; position: relative;
background-color: #ffffff;
border-radius: 12px;
box-shadow: 0 1px 5px rgba(0,0,0,0.08);
transition: all 0.2s ease;
overflow: hidden;
position: relative;
z-index: 150;
} }
.itemWrapper:hover {
box-shadow: 0 4px 12px rgba(0,0,0,0.12);
transform: translateY(-2px);
}
.editModeLayout { .editModeLayout {
border-radius: 4px; border-radius: 12px 12px 0 0;
position: absolute; position: absolute;
z-index: 100; z-index: 155; /* Memastikan berada di atas itemWrapper */
background-color: #0000008c; background-color: #000000cc;
width: 100%; width: 100%;
top: 6px; top: 0;
bottom: -4px; left: 0;
right: 0;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
font-size: 13px; font-size: 14px;
padding: 12px 16px;
color: white;
}
.editModeLayout h3 {
margin: 0;
font-weight: 500;
font-size: 14px;
} }
.PaymentOption { .PaymentOption {
overflow-x: hidden; overflow-x: hidden;
background-color: #e9e9e9; background-color: #ffffff;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
font-size: calc(10px + 2vmin); font-size: calc(12px + 2vmin);
color: rgba(88, 55, 50, 1); color: rgba(88, 55, 50, 1);
border-radius: 15px 15px 0 0; border-radius: 20px 20px 0 0;
position: fixed; position: fixed;
bottom: 0; bottom: 0;
right: 0; right: 0;
left: 0; left: 0;
z-index: 300; /* Menurunkan z-index agar tidak menutupi material list */
z-index: 300; box-shadow: 0 -2px 20px rgba(0, 0, 0, 0.1);
padding: 20px;
} }
.TotalContainer { .TotalContainer {
@@ -223,20 +289,28 @@
font-family: "Plus Jakarta Sans", sans-serif; font-family: "Plus Jakarta Sans", sans-serif;
font-weight: 600; font-weight: 600;
font-style: normal; font-style: normal;
font-size: 1.5em; font-size: 1.8em;
padding: 10px 0; padding: 15px 0;
border-bottom: 1px solid #e6e6e6;
} }
.OptionContainer { .OptionContainer {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
width: 80vw; width: 80vw;
margin: 0 auto; margin: 0 auto;
font-family: "Plus Jakarta Sans", sans-serif; font-family: "Plus Jakarta Sans", sans-serif;
font-weight: 600; font-weight: 500;
font-style: normal; font-style: normal;
font-size: 0.9em; font-size: 1.1em;
padding: 10px 0; padding: 15px 0;
align-items: center;
} }
.OptionContainer span:first-child {
color: #555;
}
.PayButton { .PayButton {
font-family: "Plus Jakarta Sans", sans-serif; font-family: "Plus Jakarta Sans", sans-serif;
font-weight: 500; font-weight: 500;
@@ -244,7 +318,7 @@
font-size: 32px; font-size: 32px;
width: 80vw; width: 80vw;
height: 70px; height: 56px;
border-radius: 50px; border-radius: 50px;
background-color: rgba(88, 55, 50, 1); background-color: rgba(88, 55, 50, 1);
color: white; color: white;
@@ -252,14 +326,32 @@
margin: 0px auto; margin: 0px auto;
cursor: pointer; cursor: pointer;
margin-bottom: 23px; margin-bottom: 23px;
transition: all 0.2s ease;
box-shadow: 0 4px 12px rgba(88, 55, 50, 0.2);
position: relative;
z-index: 301;
}
.PayButton:hover {
background-color: rgba(70, 45, 40, 1);
box-shadow: 0 6px 16px rgba(88, 55, 50, 0.3);
} }
.Pay2Button { .Pay2Button {
text-align: center; text-align: center;
color: rgba(88, 55, 50, 1); color: rgba(88, 55, 50, 1);
font-size: 1em; font-size: 1.2em;
margin-bottom: 25px; font-weight: 500;
margin-bottom: 10px;
cursor: pointer; cursor: pointer;
padding: 12px;
border-radius: 8px;
transition: all 0.2s ease;
position: relative;
z-index: 301;
}
.Pay2Button:hover {
background-color: #f0f0f0;
} }
.item-list-title { .item-list-title {

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

@@ -2,42 +2,264 @@
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
right: -1px; right: 0;
bottom: 0; bottom: 0;
background: rgba(0, 0, 0, 0.5); background: rgba(0, 0, 0, 0.7);
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
z-index: 1000; z-index: 1000;
padding: 20px;
} }
.modalContent { .modalContent {
width: 80vw; width: 100%;
max-height: 80vh; max-width: 500px;
position: relative; max-height: 90vh;
overflow: visible; background: #ffffff;
border-radius: 16px;
overflow: hidden;
display: flex;
flex-direction: column;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
animation: modalAppear 0.3s ease-out;
}
@keyframes modalAppear {
from {
opacity: 0;
transform: translateY(-20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.imageSection {
padding: 24px 24px 16px 24px;
background: #f8f9fa;
border-bottom: 1px solid #e6e6e6;
}
.imagePreview {
width: 100%;
height: 200px;
border-radius: 12px;
overflow: hidden;
margin-bottom: 20px;
background: #e9ecef;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
.previewImage {
width: 100%;
height: 100%;
object-fit: cover;
}
.imageActions {
display: flex;
gap: 12px;
}
.actionButton {
flex: 1;
padding: 12px 16px;
border-radius: 10px;
border: none;
font-family: "Plus Jakarta Sans", sans-serif;
font-weight: 500;
font-size: 14px;
cursor: pointer;
transition: all 0.2s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.actionButton:not(.deleteButton) {
background-color: var(--brand-sage, #6B8F71);
color: white;
box-shadow: 0 2px 6px rgba(107, 143, 113, 0.2);
}
.actionButton:not(.deleteButton):hover {
background-color: #5a7a60;
box-shadow: 0 4px 10px rgba(107, 143, 113, 0.3);
}
.deleteButton {
background-color: #ff4d4d;
color: white;
box-shadow: 0 2px 6px rgba(255, 77, 77, 0.2);
}
.deleteButton:hover {
background-color: #ff1a1a;
box-shadow: 0 4px 10px rgba(255, 77, 77, 0.3);
}
.formSection {
padding: 24px;
overflow-y: auto;
flex: 1;
}
.formGroup {
margin-bottom: 20px;
}
.formRow {
display: flex;
gap: 16px;
}
.formRow .formGroup {
flex: 1;
margin-bottom: 0;
}
.formLabel {
display: block;
font-family: "Plus Jakarta Sans", sans-serif;
font-weight: 600;
font-size: 14px;
color: #333;
margin-bottom: 8px;
}
.formInput {
width: 100%;
padding: 12px 16px;
border-radius: 10px;
border: 1px solid #ddd;
background: #ffffff;
font-family: "Plus Jakarta Sans", sans-serif;
font-size: 15px;
color: #333;
transition: all 0.2s ease;
box-sizing: border-box;
}
.formInput:focus {
outline: none;
border-color: var(--brand-sage, #6B8F71);
box-shadow: 0 0 0 3px rgba(107, 143, 113, 0.1);
}
.formTextarea {
width: 100%;
padding: 12px 16px;
border-radius: 10px;
border: 1px solid #ddd;
background: #ffffff;
font-family: "Plus Jakarta Sans", sans-serif;
font-size: 15px;
color: #333;
transition: all 0.2s ease;
box-sizing: border-box;
min-height: 100px;
resize: vertical;
}
.formTextarea:focus {
outline: none;
border-color: var(--brand-sage, #6B8F71);
box-shadow: 0 0 0 3px rgba(107, 143, 113, 0.1);
}
.formActions {
display: flex;
gap: 12px;
margin-top: 10px;
}
.formButton {
flex: 1;
padding: 14px 16px;
border-radius: 10px;
border: none;
font-family: "Plus Jakarta Sans", sans-serif;
font-weight: 600;
font-size: 15px;
cursor: pointer;
transition: all 0.2s ease;
display: flex;
align-items: center;
justify-content: center;
}
.cancelButton {
background-color: #f0f0f0;
color: #333;
box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}
.cancelButton:hover {
background-color: #e0e0e0;
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.saveButton {
background-color: var(--brand-sage, #6B8F71);
color: white;
box-shadow: 0 2px 6px rgba(107, 143, 113, 0.2);
}
.saveButton:hover {
background-color: #5a7a60;
box-shadow: 0 4px 10px rgba(107, 143, 113, 0.3);
}
.closeButton { .closeButton {
position: absolute; position: absolute;
top: 12px; /* Increased top position */ top: 16px;
right: 12px; /* Increased right position */ right: 16px;
background: none; background: none;
border: none; border: none;
font-size: 28px; /* Increased font size */ font-size: 24px;
cursor: pointer; cursor: pointer;
color: #333; color: #999;
padding: 0; width: 36px;
width: 30px; /* Increased width */ height: 36px;
height: 30px; /* Increased height */
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
border-radius: 50%;
transition: all 0.2s ease;
z-index: 1001; /* Menambah z-index agar selalu di atas modal */
} }
.closeButton:hover { .closeButton:hover {
color: #f44336; background: #f0f0f0;
color: #333;
}
/* Responsive design */
@media (max-width: 600px) {
.modalContent {
margin: 10px;
max-height: 95vh;
}
.imageSection {
padding: 20px;
}
.formSection {
padding: 20px;
}
.formRow {
flex-direction: column;
gap: 0;
}
.formActions {
flex-direction: column;
}
} }

85
src/index.css
View File

@@ -5,9 +5,94 @@ body {
sans-serif; sans-serif;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
background-color: #e9e9e9;
position: relative;
} }
code { code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace; monospace;
} }
/* Ensure proper scrolling behavior */
html, body {
height: 100%;
width: 100%;
overflow: hidden;
}
#root {
height: 100%;
width: 100%;
overflow: hidden;
}
/* Custom scrollbar */
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
background: #c1c1c1;
border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
background: #a8a8a8;
}
/* Ensure proper z-index stacking */
* {
z-index: auto;
}
/* Responsive design adjustments */
@media (max-width: 768px) {
body {
font-size: 14px;
}
.container {
max-height: 75vh; /* Menaikkan tinggi maksimum pada mobile */
}
.materialCard {
margin-bottom: 12px;
}
.materialSummary {
padding: 14px 16px;
}
.materialName {
font-size: 15px;
}
.materialStock {
font-size: 13px;
margin-right: 12px;
}
.detailGrid {
grid-template-columns: 1fr;
gap: 12px;
}
.formGrid {
grid-template-columns: 1fr;
gap: 16px;
}
/* Memastikan MaterialList tetap dapat di-scroll */
.MaterialList-module__container {
max-height: 80vh;
overflow-y: auto;
}
}

1
src/pages/Cart.module.css
View File

@@ -22,6 +22,7 @@
.CheckoutContainer { .CheckoutContainer {
bottom: 0px; bottom: 0px;
position: fixed; position: fixed;
z-index: 100; /* Menurunkan z-index agar tidak menutupi material list */
} }
.EmailContainer { .EmailContainer {

5
src/pages/Invoice.module.css
View File

@@ -7,6 +7,8 @@
font-size: calc(10px + 2vmin); font-size: calc(10px + 2vmin);
color: rgba(88, 55, 50, 1); color: rgba(88, 55, 50, 1);
background-color: #e9e9e9; background-color: #e9e9e9;
position: relative;
z-index: 50; /* Memastikan berada di bawah material list */
} }
.Invoice-title { .Invoice-title {
@@ -45,6 +47,8 @@
bottom: 0; bottom: 0;
right: 0; right: 0;
left: 0; left: 0;
z-index: 100; /* Menurunkan z-index lebih jauh agar tidak menutupi material list */
box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
} }
.PaymentOptionMargin { .PaymentOptionMargin {
@@ -159,6 +163,7 @@
padding: 10px 0; padding: 10px 0;
margin-bottom: 7px; margin-bottom: 7px;
} }
.OrderTypeContainer { .OrderTypeContainer {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;

704
src/pages/MaterialList.js
View File

@@ -1,12 +1,4 @@
import React, { useState, useRef, useEffect } from "react"; import React, { useState, useEffect } from "react";
import jsQR from "jsqr";
import { getImageUrl } from "../helpers/itemHelper";
import {
getCafe,
saveCafeDetails,
setConfirmationStatus,
} from "../helpers/cafeHelpers";
import { import {
getMaterials, getMaterials,
createMaterial, createMaterial,
@@ -17,347 +9,497 @@ import {
getMaterialMutations, getMaterialMutations,
} from "../helpers/materialMutationHelpers"; } from "../helpers/materialMutationHelpers";
import Switch from "react-switch"; // Import the Switch component import styles from './MaterialList.module.css';
import Carousel from '../components/Carousel'
import styles from './MaterialList.module.css'; // Import the CSS Module
const SetPaymentQr = ({ cafeId }) => { const MaterialList = ({ cafeId }) => {
// All your state and logic goes here (unchanged) // State declarations
const [materials, setMaterials] = useState([]); const [materials, setMaterials] = useState([]);
const [mutations, setMutations] = useState([]); const [mutations, setMutations] = useState([]);
const [newMaterialName, setNewMaterialName] = useState("");
const [newMaterialUnit, setNewMaterialUnit] = useState("kilogram");
const [newMaterialImage, setNewMaterialImage] = useState(null);
const [deleting, setDeleting] = useState(null);
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
const [error, setError] = useState(null); const [error, setError] = useState(null);
const [showForm, setShowForm] = useState(false);
const [selectedMaterialIndex, setSelectedMaterialIndex] = useState(-1); // Add material form state
const [latestMutation, setLatestMutation] = useState([]); const [showAddForm, setShowAddForm] = useState(false);
const [currentQuantity, setCurrentQuantity] = useState(-1); const [newMaterialName, setNewMaterialName] = useState("");
const [currentPrice, setCurrentPrice] = useState(0); const [newMaterialUnit, setNewMaterialUnit] = useState("kilogram");
const [newPrice, setNewPrice] = useState(0);
const [quantityChange, setQuantityChange] = useState(0); // Edit material state
const [editingMaterialId, setEditingMaterialId] = useState(null);
const [newQuantity, setNewQuantity] = useState(0);
const [newPrice, setNewPrice] = useState("");
// Expand state for each material
const [expandedMaterials, setExpandedMaterials] = useState({});
// View state
const [sortOrder, setSortOrder] = useState("desc"); const [sortOrder, setSortOrder] = useState("desc");
const [isEditCurrentPrice, setIsEditCurrentPrice] = useState(false); const [isViewingHistory, setIsViewingHistory] = useState({});
const [isViewingHistory, setIsViewingHistory] = useState(false);
// Format currency helper
const formatCurrency = (value) => {
if (!value) return "0";
return parseInt(value.toString().replace(/\./g, "")).toLocaleString('id-ID');
};
const convertToInteger = (formattedValue) => { const convertToInteger = (formattedValue) => {
// Remove dots and convert to integer return parseInt(formattedValue.replace(/\./g, ""), 10) || 0;
return parseInt(formattedValue.replace(/\./g, ""), 10);
}; };
const formatCurrency = (value) => { // Handle price input change
if (!value) return ""; const handlePriceChange = (e) => {
// Remove existing formatting (dots) and format again
const numericValue = value.toString().replace(/\D/g, ""); // Keep only digits
return numericValue.replace(/\B(?=(\d{3})+(?!\d))/g, "."); // Add dot as thousands separator
};
const handleChange = (e) => {
const formattedValue = formatCurrency(e.target.value); const formattedValue = formatCurrency(e.target.value);
setNewPrice(formattedValue); setNewPrice(formattedValue);
}; };
// Fetch materials and mutations
useEffect(() => { useEffect(() => {
const fetchMaterials = async () => { const fetchData = async () => {
try { try {
const data = await getMaterials(cafeId); const [materialsData, mutationsData] = await Promise.all([
setMaterials(data); getMaterials(cafeId),
console.log(data) getMaterialMutations(cafeId)
setError(null); ]);
if (data.length > 0) {
setSelectedMaterialIndex(0);
}
} catch (error) {
console.error("Error fetching materials:", error);
setError("Failed to fetch materials.");
}
};
const fetchMutations = async () => { setMaterials(materialsData);
try { setMutations(mutationsData);
const data = await getMaterialMutations(cafeId); setError(null);
setMutations(data);
} catch (err) { } catch (err) {
setError(err.message); console.error("Error fetching data:", err);
setError("Gagal memuat data bahan baku.");
} finally { } finally {
setLoading(false); setLoading(false);
} }
}; };
fetchMaterials(); if (cafeId) {
fetchMutations(); fetchData();
}
}, [cafeId]); }, [cafeId]);
const filteredMutations = mutations.filter((mutation) => mutation.materialId === materials[selectedMaterialIndex]?.materialId) || []; // Handle create material
const handleCreateMaterial = async (e) => {
e.preventDefault();
if (!newMaterialName.trim()) return;
const sortedMutations = filteredMutations setLoading(true);
.filter((mutation) => mutation.materialId === materials[selectedMaterialIndex].materialId) try {
.sort((a, b) => { const formData = new FormData();
formData.append("name", newMaterialName);
formData.append("unit", newMaterialUnit);
await createMaterial(cafeId, formData);
// Reset form
setNewMaterialName("");
setNewMaterialUnit("kilogram");
setShowAddForm(false);
// Refresh materials list
const data = await getMaterials(cafeId);
setMaterials(data);
setError(null);
} catch (err) {
console.error("Error creating material:", err);
setError("Gagal menambah bahan baku.");
} finally {
setLoading(false);
}
};
// Handle delete material
const handleDeleteMaterial = async (materialId) => {
if (!window.confirm("Apakah Anda yakin ingin menghapus bahan baku ini?")) return;
setLoading(true);
try {
await deleteMaterial(materialId);
// Refresh materials list
const data = await getMaterials(cafeId);
setMaterials(data);
// Close expanded view if deleted material was expanded
setExpandedMaterials(prevState => {
const newState = { ...prevState };
delete newState[materialId];
return newState;
});
setError(null);
} catch (err) {
console.error("Error deleting material:", err);
setError("Gagal menghapus bahan baku.");
} finally {
setLoading(false);
}
};
// Handle update stock
const handleUpdateStock = async (materialId) => {
if (newQuantity === 0 && !convertToInteger(newPrice)) return;
setLoading(true);
try {
const material = materials.find(m => m.materialId === materialId);
const currentQuantity = material ? material.currentStock : 0;
const finalQuantity = currentQuantity + newQuantity;
const formData = new FormData();
formData.append("newStock", finalQuantity);
formData.append("priceAtp", convertToInteger(newPrice));
formData.append("reason", `Update stok: ${newQuantity > 0 ? '+' : ''}${newQuantity}`);
await createMaterialMutation(materialId, formData);
// Refresh data
const [materialsData, mutationsData] = await Promise.all([
getMaterials(cafeId),
getMaterialMutations(cafeId)
]);
setMaterials(materialsData);
setMutations(mutationsData);
// Reset form
setNewQuantity(0);
setNewPrice("");
setEditingMaterialId(null);
setError(null);
} catch (err) {
console.error("Error updating stock:", err);
setError("Gagal memperbarui stok.");
} finally {
setLoading(false);
}
};
// Get filtered and sorted mutations for a material
const getFilteredMutations = (materialId) => {
const filtered = mutations.filter(m => m.materialId === materialId);
return filtered.sort((a, b) => {
if (sortOrder === "asc") { if (sortOrder === "asc") {
return new Date(a.createdAt) - new Date(b.createdAt); return new Date(a.createdAt) - new Date(b.createdAt);
} else { } else {
return new Date(b.createdAt) - new Date(a.createdAt); return new Date(b.createdAt) - new Date(a.createdAt);
} }
}); });
const handleCreateMaterial = async (e) => {
e.preventDefault();
setLoading(true);
const formData = new FormData();
formData.append("name", newMaterialName);
formData.append("unit", newMaterialUnit);
if (newMaterialImage) {
formData.append("image", newMaterialImage);
}
try {
await createMaterial(cafeId, formData);
setNewMaterialName("");
setNewMaterialUnit("kilogram");
setNewMaterialImage(null);
setShowForm(false);
const data = await getMaterials(cafeId);
setMaterials(data);
setError(null);
if (data.length > 0) {
setSelectedMaterialIndex(0);
}
} catch (error) {
console.error("Error creating material:", error);
setError("Failed to create material.");
} finally {
setLoading(false);
}
}; };
const handleDeleteMaterial = async (materialId) => { // Format date for display
setDeleting(materialId);
try {
await deleteMaterial(materialId);
const updatedMaterials = materials.filter(
(material) => material.materialId !== materialId
);
setMaterials(updatedMaterials);
setError(null);
if (selectedMaterialIndex === materialId) {
setSelectedMaterialIndex(
updatedMaterials.length > 0 ? updatedMaterials[0].materialId : null
);
}
} catch (error) {
console.error("Error deleting material:", error);
setError("Failed to delete material.");
} finally {
setDeleting(null);
}
};
const handleQuantityChange = (change) => {
setQuantityChange((prev) => prev + change);
if (quantityChange + change < 1) setNewPrice(currentPrice);
setIsEditCurrentPrice(false);
};
useEffect(() => {
setQuantityChange(0);
if (materials.length > 0 || selectedMaterialIndex > -1) {
const materialMutations = mutations.filter(
(mutation) => mutation.materialId === materials[selectedMaterialIndex]?.materialId
);
console.log(materialMutations)
if (materialMutations.length > 0) {
const latestMutation = materialMutations.reduce(
(latest, current) =>
new Date(current.createdAt) > new Date(latest.createdAt)
? current
: latest,
materialMutations[0]
);
setLatestMutation(latestMutation);
setCurrentQuantity(latestMutation.newStock);
setCurrentPrice(formatCurrency(latestMutation.priceAtp));
setNewPrice(formatCurrency(latestMutation.priceAtp));
} else {
setCurrentQuantity(0); // Default value if no mutations exist
setLatestMutation({ newStock: 0 });
setCurrentPrice(0);
setNewPrice(0);
}
}
setIsViewingHistory(false);
}, [materials, mutations, selectedMaterialIndex]);
const handleUpdateStock = async () => {
setLoading(true);
try {
const newprice = convertToInteger(newPrice)
const newStock = currentQuantity + quantityChange;
const formData = new FormData();
formData.append("newStock", newStock);
formData.append("priceAtp", newprice);
formData.append("reason", "Stock update");
await createMaterialMutation(materials[selectedMaterialIndex].materialId, formData);
setQuantityChange(0);
const updatedMutations = await getMaterialMutations(cafeId);
setMutations(updatedMutations);
setCurrentQuantity(newStock);
setError(null);
} catch (error) {
console.error("Error updating stock:", error);
setError("Failed to update stock.");
} finally {
setLoading(false);
}
};
const currentMaterial = materials.find(
(material) => material.materialId === selectedMaterialIndex
);
const formatDate = (timestamp) => { const formatDate = (timestamp) => {
const date = new Date(timestamp); const date = new Date(timestamp);
return date.toLocaleString(); return date.toLocaleString('id-ID', {
day: '2-digit',
month: 'short',
year: 'numeric',
hour: '2-digit',
minute: '2-digit'
});
}; };
// Toggle material expansion
const toggleExpand = (materialId) => {
setExpandedMaterials(prevState => {
const newState = {
...prevState,
[materialId]: !prevState[materialId]
};
// Reset form when expanding/collapsing
if (!prevState[materialId]) {
setNewQuantity(0);
setNewPrice("");
setEditingMaterialId(null);
}
return newState;
});
};
// Toggle history view for a material
const toggleHistoryView = (materialId) => {
setIsViewingHistory(prevState => ({
...prevState,
[materialId]: !prevState[materialId]
}));
};
// Handle quantity change
const handleQuantityChange = (change) => {
setNewQuantity(prev => Math.max(0, prev + change));
};
if (loading && materials.length === 0) {
return (
<div className={styles.container}>
<div className={styles.loading}>
<div className={styles.loadingSpinner}>↻</div>
<div>Memuat data bahan baku...</div>
</div>
</div>
);
}
return ( return (
<div className={styles.container}> <div className={styles.container}>
{loading ? ( <div className={styles.header}>
<></> <h2 className={styles.title}>Manajemen Bahan Baku</h2>
) : ( <button
<> className={styles.addButton}
<h3 className={styles.title}>Bahan baku</h3> onClick={() => setShowAddForm(!showAddForm)}
<Carousel items={materials} onSelect={(e) => setSelectedMaterialIndex(e)} selectedIndex={selectedMaterialIndex} /> >
{selectedMaterialIndex !== -1 ? ( {showAddForm ? 'Batal' : '+ Tambah Bahan Baku'}
<> </button>
<div className={styles.switchContainer}>
<h3>Stok sekarang {currentQuantity}</h3>
</div> </div>
<div className={styles.stokContainer}> <div className={styles.content}>
<button onClick={() => handleQuantityChange(currentQuantity + quantityChange > 0 ? -1 : 0)} className={styles.stockButton}> {error && (
<div className={styles.error} style={{
padding: '12px',
backgroundColor: '#fff0f0',
color: '#dc3545',
borderRadius: '8px',
marginBottom: '20px'
}}>
{error}
</div>
)}
{/* Add Material Form */}
{showAddForm && (
<div className={styles.addMaterialForm}>
<h3 className={styles.sectionTitle}>Tambah Bahan Baku Baru</h3>
<form onSubmit={handleCreateMaterial}>
<div className={styles.formGrid}>
<div className={styles.formGroup}>
<label className={styles.formLabel}>Nama Bahan Baku</label>
<input
type="text"
className={styles.formInput}
value={newMaterialName}
onChange={(e) => setNewMaterialName(e.target.value)}
placeholder="Masukkan nama bahan baku"
required
/>
</div>
<div className={styles.formGroup}>
<label className={styles.formLabel}>Satuan</label>
<select
className={styles.formInput}
value={newMaterialUnit}
onChange={(e) => setNewMaterialUnit(e.target.value)}
>
<option value="gram">gram</option>
<option value="ons">ons</option>
<option value="kilogram">kilogram</option>
<option value="kuintal">kuintal</option>
<option value="liter">liter</option>
<option value="piece">piece</option>
<option value="meter">meter</option>
<option value="pack">pack</option>
<option value="sachet">sachet</option>
<option value="box">box</option>
</select>
</div>
</div>
<div className={styles.formActions}>
<button
type="button"
className={styles.cancelButton}
onClick={() => {
setShowAddForm(false);
setNewMaterialName("");
setNewMaterialUnit("kilogram");
}}
>
Batal
</button>
<button
type="submit"
className={styles.saveButton}
disabled={!newMaterialName.trim()}
>
Tambah Bahan Baku
</button>
</div>
</form>
</div>
)}
{/* Materials List */}
{materials.length === 0 ? (
<div className={styles.emptyState}>
<div className={styles.emptyStateIcon}>📭</div>
<div className={styles.emptyStateText}>Belum ada bahan baku yang terdaftar</div>
<button
className={styles.addButton}
onClick={() => setShowAddForm(true)}
>
+ Tambah Bahan Baku Pertama
</button>
</div>
) : (
<div className={styles.materialsList}>
{materials.map((material) => (
<div key={material.materialId} className={styles.materialCard}>
{/* Material Summary (Always Visible) */}
<div
className={styles.materialSummary}
onClick={() => toggleExpand(material.materialId)}
>
<h3 className={styles.materialName}>{material.name}</h3>
<div className={styles.materialStock}>
{material.currentStock} {material.unit}
</div>
<div className={`${styles.expandIcon} ${expandedMaterials[material.materialId] ? styles.expanded : ''}`}>
▼
</div>
</div>
{/* Material Detail (Expandable) */}
{expandedMaterials[material.materialId] && (
<div className={styles.materialDetail}>
<div className={styles.detailGrid}>
<div className={styles.detailItem}>
<span className={styles.detailLabel}>Stok Saat Ini</span>
<span className={styles.detailValue}>{material.currentStock} {material.unit}</span>
</div>
<div className={styles.detailItem}>
<span className={styles.detailLabel}>Harga per {material.unit}</span>
<span className={styles.detailValue}>Rp {formatCurrency(material.currentPrice || 0)}</span>
</div>
</div>
<div className={styles.detailActions}>
<button
className={styles.detailButton}
onClick={() => {
setEditingMaterialId(material.materialId);
}}
>
✏️ Update Stok
</button>
<button
className={styles.detailButton}
onClick={() => handleDeleteMaterial(material.materialId)}
>
🗑️ Hapus
</button>
</div>
{/* Stock Update Form */}
{editingMaterialId === material.materialId && (
<div className={styles.stockUpdateForm}>
<h4 className={styles.formTitle}>Update Stok</h4>
<div className={styles.quantityControls}>
<button
className={styles.quantityButton}
onClick={() => handleQuantityChange(-1)}
disabled={newQuantity <= 0}
>
- -
</button> </button>
<p>{currentQuantity + quantityChange}</p> <div className={styles.quantityDisplay}>
<button onClick={() => handleQuantityChange(1)} className={styles.stockButton}> {newQuantity > 0 ? `+${newQuantity}` : newQuantity}
</div>
<button
className={styles.quantityButton}
onClick={() => handleQuantityChange(1)}
>
+ +
</button> </button>
</div> </div>
<div className={styles.uploadMessage}>
<p>harga per {materials && materials[selectedMaterialIndex]?.unit} sekarang</p> <div className={styles.formGroup}>
</div> <label className={styles.formLabel}>Harga per {material.unit}</label>
<div className={styles.resultMessage}>
<input <input
className={styles.resultMessageInput} // Replace inline style with CSS module class type="text"
disabled={!isEditCurrentPrice || quantityChange < 1} className={styles.formInput}
value={newPrice} value={newPrice}
onChange={handleChange} onChange={handlePriceChange}
placeholder="Enter amount" placeholder="Masukkan harga"
/> />
<div onClick={() => quantityChange < 1 ? null : setIsEditCurrentPrice(!isEditCurrentPrice)} className={quantityChange < 1 ? styles.changeButtonDisabled : styles.changeButtonEnabled}>
{isEditCurrentPrice ? 'Terapkan' : 'Ganti'}
</div> </div>
</div>
<div className={styles.buttonContainer}> <div className={styles.formActions}>
<button onClick={handleUpdateStock} className={styles.saveButton}> <button
Laporkan {quantityChange > 0 ? 'penambahan' : 'stok sekarang'} {quantityChange < 1 ? currentQuantity + quantityChange : quantityChange} {materials[selectedMaterialIndex]?.unit} className={styles.cancelButton}
onClick={() => {
setEditingMaterialId(null);
setNewQuantity(0);
setNewPrice("");
}}
>
Batal
</button>
<button
className={styles.saveButton}
onClick={() => handleUpdateStock(material.materialId)}
disabled={newQuantity === 0 && !convertToInteger(newPrice)}
>
Simpan Perubahan
</button> </button>
</div> </div>
<div className={styles.historyTab}> </div>
<h3 onClick={() => setIsViewingHistory(!isViewingHistory)}> {isViewingHistory ? '˅' : '˃'} Riwayat stok</h3> )}
{selectedMaterialIndex !== -1 && isViewingHistory && !loading && (
{/* History Section */}
<div className={styles.historySection}>
<h4
className={styles.historyTitle}
onClick={() => toggleHistoryView(material.materialId)}
>
{isViewingHistory[material.materialId] ? '▲' : '▼'} Riwayat Stok
</h4>
{isViewingHistory[material.materialId] && (
<> <>
<div className={styles.sorter} onClick={() => setSortOrder(sortOrder == 'asc' ? 'desc' : 'asc')}> <div className={styles.sortControls}>
Urutkan: {sortOrder === 'asc' ? "terlama" : "terbaru"} <div style={{ transform: 'rotate(90deg)' }}>&lt;&gt;</div> <button
className={styles.sortButton}
onClick={() => setSortOrder(sortOrder === 'asc' ? 'desc' : 'asc')}
>
Urutkan: {sortOrder === 'asc' ? 'Terlama' : 'Terbaru'}
</button>
</div> </div>
<div className={styles.historyContainer}>
<div className={styles.mutationContainer}> <div className={styles.historyItems}>
{sortedMutations.length > 0 ? ( {getFilteredMutations(material.materialId).length > 0 ? (
sortedMutations.map((mutation) => ( getFilteredMutations(material.materialId).map((mutation) => (
<div key={mutation.id} className={styles.mutationCard}> <div key={mutation.id} className={styles.historyItem}>
<div style={{ width: '42px', backgroundColor: '#b9b9b9', borderRadius: '10px', padding: '3px', paddingBottom: '0' }}> <div className={styles.historyIcon}>📊</div>
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <div className={styles.historyContent}>
<g id="SVGRepo_bgCarrier" stroke-width="0"></g> <div className={styles.historyDate}>{formatDate(mutation.createdAt)}</div>
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g> <div className={styles.historyDetails}>
<g id="SVGRepo_iconCarrier"> Stok: {mutation.newStock} {material.unit} |
<g id="Interface / Book"> Perubahan: {mutation.newStock - mutation.oldStock > 0 ? '+' : ''}{mutation.newStock - mutation.oldStock} |
<path id="Vector" d="M5 19.5002V6.2002C5 5.08009 5 4.51962 5.21799 4.0918C5.40973 3.71547 5.71547 3.40973 6.0918 3.21799C6.51962 3 7.08009 3 8.2002 3H17.4002C17.9602 3 18.2407 3 18.4546 3.10899C18.6427 3.20487 18.7948 3.35774 18.8906 3.5459C18.9996 3.75981 19 4.04005 19 4.6001V16.4001C19 16.9601 18.9996 17.2398 18.8906 17.4537C18.7948 17.6419 18.6429 17.7952 18.4548 17.8911C18.2411 18 17.961 18 17.402 18H7.25C6.00736 18 5 19.0074 5 20.25C5 20.6642 5.33579 21 5.75 21H16.402C16.961 21 17.2411 21 17.4548 20.8911C17.6429 20.7952 17.7948 20.642 17.8906 20.4538C17.9996 20.2399 18 19.9601 18 19.4V18" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> Harga: Rp {formatCurrency(mutation.priceAtp)}
</g>
</g>
</svg>
</div> </div>
<div className={styles.mutationTitle}>
<h4>{formatDate(mutation.createdAt)}</h4>
<p>Total stok: {mutation.newStock} || +{mutation.newStock - mutation.oldStock} || {formatCurrency((mutation.newStock - mutation.oldStock) * mutation.priceAtp)}</p>
</div> </div>
</div> </div>
)) ))
) : ( ) : (
<p>Tidak ada laporan perubahan stok.</p> <div className={styles.emptyState} style={{ padding: '20px' }}>
)} <div>Belum ada riwayat perubahan stok</div>
</div> </div>
)}
</div> </div>
</> </>
)} )}
</div> </div>
</>
) : (
<>
<div className={styles.description}>
<div style={{ marginRight: "5px", fontSize: "1.2em" }}>ⓘ</div>
<h6 style={{ margin: 0, textAlign: "left", fontSize: '12px' }}>
Fitur ini mempermudah mengelola biaya dan memantau pengeluaran bahan.
</h6>
</div> </div>
<div className={styles.switchContainer}>
<h3>Buat bahan baru</h3>
</div>
<div className={styles.resultMessage}>
<input
className={styles.resultMessageInput}
value={newMaterialName}
onChange={(event) => setNewMaterialName(event.target.value)}
placeholder="Masukkan nama barang"
style={{width: '100%', height: '31px'}}
/>
</div>
<select
id="materialUnit"
value={newMaterialUnit}
onChange={(e) => setNewMaterialUnit(e.target.value)}
className={styles.unit}
style={{height: '37px'}}
>
<option value="gram">Satuan: gram</option>
<option value="ons">Satuan: ons</option>
<option value="kilogram">Satuan: kilogram</option>
<option value="kuintal">Satuan: kuintal</option>
<option value="liter">Satuan: liter</option>
<option value="piece">Satuan: piece</option>
<option value="meter">Satuan: meter</option>
<option value="pack">Satuan: pack</option>
<option value="sachet">Satuan: sachet</option>
<option value="box">Satuan: box</option>
</select>
<div className={styles.buttonContainer}>
<button className={styles.saveButton} onClick={handleCreateMaterial}>
Buat bahan baku
</button>
</div>
</>
)} )}
</> </div>
))}
</div>
)} )}
</div> </div>
</div>
); );
}; };
export default SetPaymentQr; export default MaterialList;

651
src/pages/MaterialList.module.css
View File

@@ -1,149 +1,556 @@
/* SetPaymentQr.module.css */ /* MaterialList.module.css */
.container { .container {
width: 100%; width: 100%;
min-height: 47vh; background-color: #ffffff;
background-color: white; border-radius: 16px;
padding: 20px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
border-radius: 8px; padding: 0;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); margin-bottom: 24px;
text-align: center; transition: all 0.3s ease;
} position: relative;
z-index: 200; /* Menaikkan z-index agar berada di atas cartbar */
max-height: 70vh; /* Membatasi tinggi maksimum */
overflow-y: auto; /* Memungkinkan scrolling vertikal */
}
.title { .container:hover {
margin-bottom: 20px; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
font-weight: bold; }
}
.uploadMessage { .header {
font-weight: 600; padding: 24px;
text-align: left; border-bottom: 1px solid #e6e6e6;
}
.changeButtonEnabled {
padding-right: 10px;
background-color: green;
border-radius: 30px;
color: white;
font-weight: 700;
height: 36px;
line-height: 36px;
padding-left: 10px;
padding-height: 10px;
}
.changeButtonDisabled {
padding-right: 10px;
background-color: #a1a1a1;
border-radius: 30px;
color: white;
font-weight: 700;
height: 36px;
line-height: 36px;
padding-left: 10px;
padding-height: 10px;
}
.resultMessage {
margin-top: -13px;
text-align: left;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
}
.resultMessage input {
padding-left: 8px;
width: 180px;
}
.stokContainer {
display: flex;
justify-content: space-evenly;
align-items: center; align-items: center;
margin-top: -20px; position: sticky;
margin-bottom: -15px; top: 0;
text-align: left; background-color: #ffffff;
} z-index: 201; /* Memastikan header berada di atas container */
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
}
.buttonContainer { .title {
margin-top: 11px; margin: 0;
text-align: left; font-weight: 700;
} font-size: 24px;
color: #333;
}
.stockButton { .addButton {
padding: 10px 20px;
font-size: 3.5vw;
background-color: #28a745; background-color: #28a745;
color: #fff; color: white;
border: none; border: none;
border-radius: 30px; border-radius: 12px;
padding: 12px 24px;
font-size: 16px;
font-weight: 600;
cursor: pointer; cursor: pointer;
transition: background-color 0.3s; transition: all 0.2s ease;
}
.saveButton {
width: 100%;
padding: 10px 20px;
font-size: 3.5vw;
background-color: #28a745;
color: #fff;
border: none;
border-radius: 30px;
cursor: pointer;
transition: background-color 0.3s;
}
.switchContainer {
margin-top: 20px;
text-align: left;
}
.historyTab {
text-align: left;
}
.historyContainer {
text-align: left;
max-height: 15vh;
overflow-y: auto;
}
.description {
display: flex; display: flex;
margin: 10px 0; align-items: center;
gap: 8px;
box-shadow: 0 2px 6px rgba(40, 167, 69, 0.2);
position: relative;
z-index: 202; /* Memastikan tombol berada di atas header */
}
.addButton:hover {
background-color: #218838;
transform: translateY(-2px);
box-shadow: 0 4px 10px rgba(40, 167, 69, 0.3);
}
.addButton:disabled {
background-color: #a1a1a1;
cursor: not-allowed;
transform: none;
box-shadow: none;
}
.content {
padding: 24px;
position: relative;
z-index: 200;
}
/* Materials List Styles */
.materialsList {
display: flex;
flex-direction: column;
gap: 12px;
}
.materialCard {
background: #ffffff;
border-radius: 12px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
transition: all 0.2s ease;
border: 1px solid #eee;
position: relative;
z-index: 200;
}
.materialCard:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
border-color: #28a745;
}
.materialSummary {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 20px;
cursor: pointer;
position: relative;
z-index: 201;
}
.materialName {
font-size: 16px;
font-weight: 600;
color: #333;
margin: 0;
flex: 1;
}
.materialStock {
font-size: 14px; font-size: 14px;
color: #666; color: #666;
} margin: 0 16px 0 0;
}
.unit { .expandIcon {
margin-top: 11px; font-size: 18px;
width: 100%; color: #28a745;
height: 31px; transition: transform 0.2s ease;
} }
.sorter { .expandIcon.expanded {
border: 1px solid #c3c3c3; transform: rotate(180deg);
padding: 5px; }
/* Material Detail Styles */
.materialDetail {
padding: 0 20px 20px 20px;
border-top: 1px solid #eee;
background: #f9f9f9;
border-radius: 0 0 12px 12px;
position: relative;
z-index: 200;
}
.detailGrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
margin-bottom: 20px;
}
.detailItem {
background: #ffffff;
padding: 16px;
border-radius: 10px; border-radius: 10px;
box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.detailLabel {
font-size: 13px;
color: #666;
margin-bottom: 4px;
}
.detailValue {
font-size: 18px;
font-weight: 600;
color: #333;
}
.detailActions {
display: flex; display: flex;
justify-content: space-between; gap: 12px;
margin-top: -10px; margin-top: 16px;
margin-bottom: 10px; }
}
.mutationCard { .detailButton {
flex: 1;
padding: 12px 16px;
border-radius: 10px;
border: none;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
display: flex; display: flex;
margin-bottom: 7px; align-items: center;
margin-top: 7px; justify-content: center;
gap: 8px;
}
.updateButton {
background-color: #28a745;
color: white;
box-shadow: 0 2px 6px rgba(40, 167, 69, 0.2);
}
.updateButton:hover {
background-color: #218838;
box-shadow: 0 4px 10px rgba(40, 167, 69, 0.3);
}
.deleteButton {
background-color: #dc3545;
color: white;
box-shadow: 0 2px 6px rgba(220, 53, 69, 0.2);
}
.deleteButton:hover {
background-color: #c82333;
box-shadow: 0 4px 10px rgba(220, 53, 69, 0.3);
}
/* Stock Update Form */
.stockUpdateForm {
background: #ffffff;
border-radius: 12px;
padding: 20px;
margin-top: 20px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
position: relative;
z-index: 201;
}
.formTitle {
font-size: 18px;
font-weight: 600;
color: #333;
margin: 0 0 20px 0;
}
.quantityControls {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 20px;
}
.quantityButton {
width: 40px;
height: 40px;
border-radius: 50%;
border: 1px solid #ddd;
background: #ffffff;
font-size: 20px;
font-weight: 700;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
}
.quantityButton:hover {
border-color: #28a745;
background: #f0f8f1;
color: #28a745;
}
.quantityDisplay {
font-size: 20px;
font-weight: 600;
min-width: 80px;
text-align: center;
}
.formGroup {
margin-bottom: 20px;
}
.formLabel {
display: block;
margin-bottom: 8px;
font-weight: 500;
color: #333;
font-size: 14px;
}
.formInput {
width: 100%;
padding: 12px 16px;
border-radius: 10px;
border: 1px solid #ddd;
font-size: 16px;
transition: all 0.2s ease;
background: #ffffff;
}
.formInput:focus {
outline: none;
border-color: #28a745;
box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.1);
}
.formActions {
display: flex;
gap: 12px;
}
.formButton {
flex: 1;
padding: 14px 16px;
border-radius: 10px;
border: none;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
display: flex;
align-items: center;
justify-content: center;
}
.saveButton {
background-color: #28a745;
color: white;
box-shadow: 0 2px 6px rgba(40, 167, 69, 0.2);
}
.saveButton:hover {
background-color: #218838;
box-shadow: 0 4px 10px rgba(40, 167, 69, 0.3);
}
.cancelButton {
background-color: #f0f0f0;
color: #333;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}
.cancelButton:hover {
background-color: #e0e0e0;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
/* Add Material Form */
.addMaterialForm {
background: #f8f9fa;
border-radius: 12px;
padding: 24px;
margin-top: 24px;
position: relative;
z-index: 201;
}
.formSection {
margin-bottom: 24px;
}
.sectionTitle {
font-size: 18px;
font-weight: 600;
color: #333;
margin: 0 0 20px 0;
padding-bottom: 12px;
border-bottom: 1px solid #e6e6e6;
}
.formGrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.fullWidth {
grid-column: 1 / -1;
}
/* Empty State */
.emptyState {
text-align: center;
padding: 60px 20px;
color: #999;
}
.emptyStateIcon {
font-size: 48px;
margin-bottom: 16px;
color: #ccc;
}
.emptyStateText {
font-size: 18px;
margin-bottom: 24px;
color: #666;
}
/* History Section */
.historySection {
margin-top: 24px;
border-top: 1px solid #e6e6e6;
padding-top: 20px;
}
.historyTitle {
font-size: 18px;
font-weight: 600;
color: #333;
margin: 0 0 16px 0;
display: flex;
align-items: center;
gap: 12px;
cursor: pointer;
}
.historyTitle:hover {
color: #28a745;
}
.historyItems {
display: flex;
flex-direction: column;
gap: 12px;
max-height: 250px;
overflow-y: auto;
padding-right: 8px;
}
.historyItems::-webkit-scrollbar {
width: 6px;
}
.historyItems::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 10px;
}
.historyItems::-webkit-scrollbar-thumb {
background: #c1c1c1;
border-radius: 10px;
}
.historyItem {
display: flex;
align-items: center;
gap: 16px;
padding: 12px 16px;
background: #ffffff;
border-radius: 10px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.historyIcon {
width: 36px;
height: 36px;
background: #b9b9b9;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 16px;
}
.historyContent {
flex: 1;
}
.historyDate {
font-size: 13px;
font-weight: 600;
color: #333;
margin: 0 0 2px 0;
}
.historyDetails {
font-size: 13px;
color: #666;
margin: 0;
}
.sortControls {
display: flex;
justify-content: flex-end;
margin-bottom: 12px;
}
.sortButton {
background: #f0f0f0;
border: none;
border-radius: 20px;
padding: 6px 14px;
font-size: 13px;
color: #555;
cursor: pointer;
transition: all 0.2s ease;
display: flex;
align-items: center;
gap: 6px;
}
.sortButton:hover {
background: #e0e0e0;
}
/* Loading State */
.loading {
text-align: center;
padding: 40px;
color: #666;
}
.loadingSpinner {
font-size: 32px;
margin-bottom: 16px;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* Responsive Design */
@media (max-width: 768px) {
.header {
padding: 16px;
flex-direction: column;
gap: 16px;
align-items: stretch;
} }
.mutationTitle { .content {
margin-left: 5px; padding: 16px;
}
.mutationTitle h4 {
margin: 0;
} }
.mutationTitle p { .detailGrid {
margin: 0; grid-template-columns: 1fr;
gap: 12px;
} }
.formGrid {
grid-template-columns: 1fr;
gap: 16px;
}
.historyItems {
max-height: 200px;
}
.materialSummary {
padding: 14px 16px;
}
.materialName {
font-size: 15px;
}
.materialStock {
font-size: 13px;
margin-right: 12px;
}
.container {
max-height: 75vh; /* Menaikkan tinggi maksimum pada mobile */
}
}