Revenue functionality added and Removed the Expenses page
This commit is contained in:
Sidharth Prabhu
@@ -1,14 +1,11 @@
|
||||
.bottom-nav {
|
||||
position: fixed;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
left: 0;
|
||||
width: 100%;
|
||||
max-width: 600px;
|
||||
height: 65px;
|
||||
height: 72px;
|
||||
background: var(--surface);
|
||||
backdrop-filter: blur(16px);
|
||||
-webkit-backdrop-filter: blur(16px);
|
||||
box-shadow: 0 -8px 24px rgba(92, 110, 88, 0.05);
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
@@ -24,21 +21,33 @@
|
||||
justify-content: center;
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
color: var(--text-mid);
|
||||
color: #8b938c;
|
||||
gap: 4px;
|
||||
transition: all 0.2s ease;
|
||||
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.nav-item.active {
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.nav-item.active::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
border-radius: 50%;
|
||||
background-color: var(--primary);
|
||||
}
|
||||
|
||||
.nav-label {
|
||||
font-size: 11px;
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.2px;
|
||||
}
|
||||
|
||||
/* Add safe area padding to containers when nav is visible */
|
||||
.container:has(.bottom-nav) {
|
||||
padding-bottom: 75px !important;
|
||||
padding-bottom: 72px !important;
|
||||
}
|
||||
|
||||
@@ -23,7 +23,7 @@ const CartTab: React.FC = () => {
|
||||
{totalItems} {totalItems === 1 ? 'item' : 'items'}
|
||||
</span>
|
||||
</div>
|
||||
<div className="cart-total">R{totalPrice.toFixed(0)}</div>
|
||||
<div className="cart-total">🅡{totalPrice.toFixed(0)}</div>
|
||||
</div>
|
||||
|
||||
<button className="place-order-btn" onClick={() => navigate('/checkout')}>
|
||||
|
||||
@@ -2,34 +2,39 @@
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 8px 12px;
|
||||
padding: 16px 20px;
|
||||
background-color: var(--surface);
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
min-height: 64px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
border-bottom: none;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.header-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
gap: 12px;
|
||||
flex: 1;
|
||||
min-width: 0; /* Important for text truncation */
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.back-button {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: var(--bg);
|
||||
background-color: var(--primary-light);
|
||||
border-radius: 50%;
|
||||
color: var(--text-dark);
|
||||
flex-shrink: 0;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.back-button:hover {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.header-logo-container {
|
||||
@@ -39,7 +44,7 @@
|
||||
}
|
||||
|
||||
.header-logo {
|
||||
height: 44px;
|
||||
height: 36px;
|
||||
width: auto;
|
||||
object-fit: contain;
|
||||
cursor: pointer;
|
||||
@@ -51,22 +56,24 @@
|
||||
}
|
||||
|
||||
.header-tagline {
|
||||
font-size: 8px;
|
||||
font-weight: 700;
|
||||
font-size: 9px;
|
||||
font-weight: 600;
|
||||
color: var(--primary);
|
||||
margin-top: 1px;
|
||||
font-style: italic;
|
||||
letter-spacing: 0.2px;
|
||||
margin-top: 2px;
|
||||
font-style: normal;
|
||||
letter-spacing: 0.5px;
|
||||
line-height: 1;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 700;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 750;
|
||||
color: var(--text-dark);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
letter-spacing: -0.5px;
|
||||
}
|
||||
|
||||
.location-picker {
|
||||
@@ -97,7 +104,7 @@
|
||||
.header-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
gap: 10px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
@@ -118,20 +125,26 @@
|
||||
}
|
||||
|
||||
.icon-button {
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: var(--bg);
|
||||
background-color: transparent;
|
||||
border-radius: 50%;
|
||||
color: var(--text-mid);
|
||||
color: var(--text-dark);
|
||||
flex-shrink: 0;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.icon-button:hover {
|
||||
background-color: var(--primary-light);
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.icon-button.profile {
|
||||
background-color: var(--primary);
|
||||
color: white;
|
||||
background-color: var(--primary-light);
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -73,7 +73,7 @@ const Header: React.FC<HeaderProps> = ({ title, onBack, showCart = true }) => {
|
||||
{totalItems > 0 ? (
|
||||
<>
|
||||
<span className="cart-count">{totalItems}</span>
|
||||
<span className="cart-price">R{totalPrice.toFixed(2)}</span>
|
||||
<span className="cart-price">🅡{totalPrice.toFixed(2)}</span>
|
||||
</>
|
||||
) : (
|
||||
<span className="cart-text">Cart</span>
|
||||
|
||||
@@ -1,237 +1,372 @@
|
||||
.item-card {
|
||||
display: flex;
|
||||
padding: 16px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
gap: 12px;
|
||||
cursor: pointer;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.item-card.last {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.item-card.out-of-stock {
|
||||
opacity: 0.6;
|
||||
filter: grayscale(0.4);
|
||||
}
|
||||
|
||||
.out-of-stock-badge {
|
||||
background-color: #f3f4f6;
|
||||
color: #6b7280;
|
||||
font-size: 0.65rem;
|
||||
font-weight: 700;
|
||||
padding: 1px 6px;
|
||||
border-radius: 20px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.item-info {
|
||||
flex: 1;
|
||||
/* Carousel Card styles */
|
||||
.item-card-carousel {
|
||||
width: 155px;
|
||||
flex-shrink: 0;
|
||||
background-color: var(--surface);
|
||||
border-radius: 24px;
|
||||
padding: 12px;
|
||||
border: 1px solid var(--border);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 0;
|
||||
position: relative;
|
||||
box-shadow: 0 4px 12px rgba(92, 110, 88, 0.03);
|
||||
margin-right: 12px;
|
||||
cursor: pointer;
|
||||
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
||||
}
|
||||
|
||||
.item-labels {
|
||||
.item-card-carousel:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 24px rgba(92, 110, 88, 0.08);
|
||||
}
|
||||
|
||||
.carousel-rating-badge {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
background-color: rgba(255, 255, 255, 0.9);
|
||||
backdrop-filter: blur(4px);
|
||||
-webkit-backdrop-filter: blur(4px);
|
||||
border-radius: 12px;
|
||||
padding: 2px 6px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-bottom: 4px;
|
||||
gap: 3px;
|
||||
font-size: 10px;
|
||||
font-weight: 750;
|
||||
color: var(--text-dark);
|
||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.veg-icon {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border: 2px solid;
|
||||
border-radius: 2px;
|
||||
.star-icon-filled {
|
||||
color: var(--star);
|
||||
fill: var(--star);
|
||||
}
|
||||
|
||||
.carousel-image-container {
|
||||
width: 100%;
|
||||
height: 90px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.veg-icon.veg {
|
||||
border-color: var(--green);
|
||||
.carousel-image {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
object-fit: contain;
|
||||
filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.1));
|
||||
}
|
||||
|
||||
.veg-icon.non-veg {
|
||||
border-color: var(--red);
|
||||
}
|
||||
|
||||
.veg-icon .dot {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
.carousel-placeholder {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.veg-icon.veg .dot {
|
||||
background-color: var(--green);
|
||||
}
|
||||
|
||||
.veg-icon.non-veg .dot {
|
||||
background-color: var(--red);
|
||||
}
|
||||
|
||||
.bestseller-badge {
|
||||
background-color: #f5f0ff;
|
||||
color: #7c3aed;
|
||||
font-size: 0.65rem;
|
||||
font-weight: 700;
|
||||
padding: 1px 6px;
|
||||
border-radius: 20px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.item-name {
|
||||
font-size: 1rem;
|
||||
font-weight: 700;
|
||||
color: var(--text-dark);
|
||||
margin-bottom: 2px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
|
||||
.item-price {
|
||||
font-size: 0.9rem;
|
||||
font-weight: 700;
|
||||
color: var(--text-dark);
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.item-rating {
|
||||
background-color: var(--primary-light);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
justify-content: center;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.carousel-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.carousel-item-name {
|
||||
font-size: 13px;
|
||||
font-weight: 750;
|
||||
color: var(--text-dark);
|
||||
margin-bottom: 2px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
letter-spacing: -0.2px;
|
||||
}
|
||||
|
||||
.carousel-vendor {
|
||||
font-size: 10px;
|
||||
color: var(--text-mid);
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.rating-text {
|
||||
font-size: 0.75rem;
|
||||
color: var(--text-mid);
|
||||
.carousel-meta-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
font-size: 9px;
|
||||
color: var(--text-light);
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.item-description {
|
||||
font-size: 0.8rem;
|
||||
color: var(--text-mid);
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
line-height: 1.4;
|
||||
.meta-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 3px;
|
||||
}
|
||||
|
||||
.item-image-container {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
position: relative;
|
||||
margin-bottom: 14px;
|
||||
flex-shrink: 0;
|
||||
.meta-separator {
|
||||
color: var(--border);
|
||||
}
|
||||
|
||||
@media (max-width: 360px) {
|
||||
.item-image-container {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
}
|
||||
.carousel-footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
.item-image, .item-image-placeholder {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
border-radius: 12px;
|
||||
background-color: var(--primary-light);
|
||||
.carousel-price {
|
||||
font-size: 13px;
|
||||
font-weight: 800;
|
||||
color: var(--text-dark);
|
||||
}
|
||||
|
||||
.item-image-placeholder {
|
||||
.carousel-action-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.carousel-plus-btn {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
border-radius: 50%;
|
||||
background-color: #000000;
|
||||
color: #ffffff;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: var(--primary-light);
|
||||
border: 1px solid var(--border);
|
||||
transition: transform 0.15s ease;
|
||||
}
|
||||
|
||||
.placeholder-icon {
|
||||
font-size: 1.8rem;
|
||||
opacity: 0.6;
|
||||
.carousel-plus-btn:hover {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.add-to-cart-container {
|
||||
position: absolute;
|
||||
bottom: -12px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background-color: var(--surface);
|
||||
border-radius: 8px;
|
||||
box-shadow: var(--shadow);
|
||||
border: 1px solid var(--border);
|
||||
min-width: 80px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.add-button {
|
||||
padding: 8px 12px;
|
||||
font-weight: 800;
|
||||
font-size: 0.85rem;
|
||||
color: var(--primary);
|
||||
width: 100%;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.add-button:hover {
|
||||
background-color: var(--primary-light);
|
||||
}
|
||||
|
||||
.quantity-controls {
|
||||
.carousel-qty-controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 4px 6px;
|
||||
background-color: #f1f3f1;
|
||||
border-radius: 20px;
|
||||
padding: 2px;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.quantity-controls button {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background-color: var(--primary-light);
|
||||
color: var(--primary);
|
||||
border-radius: 6px;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 800;
|
||||
.carousel-qty-controls button {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
border-radius: 50%;
|
||||
background-color: #ffffff;
|
||||
color: var(--text-dark);
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.quantity {
|
||||
font-weight: 800;
|
||||
font-size: 0.9rem;
|
||||
color: var(--primary);
|
||||
min-width: 16px;
|
||||
.carousel-qty {
|
||||
font-size: 11px;
|
||||
font-weight: 750;
|
||||
min-width: 12px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.limit-badge {
|
||||
background-color: #fef2f2;
|
||||
color: #ef4444;
|
||||
font-size: 0.65rem;
|
||||
/* List Card styles */
|
||||
.item-card-list {
|
||||
display: flex;
|
||||
gap: 14px;
|
||||
padding: 12px;
|
||||
background-color: var(--surface);
|
||||
border-radius: 24px;
|
||||
border: 1px solid var(--border);
|
||||
margin-bottom: 12px;
|
||||
cursor: pointer;
|
||||
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
||||
}
|
||||
|
||||
.item-card-list:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 6px 18px rgba(92, 110, 88, 0.04);
|
||||
}
|
||||
|
||||
.list-image-container {
|
||||
width: 90px;
|
||||
height: 90px;
|
||||
position: relative;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.list-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
border-radius: 18px;
|
||||
}
|
||||
|
||||
.list-placeholder {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 18px;
|
||||
background-color: var(--primary-light);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.bestseller-badge {
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
left: 6px;
|
||||
background-color: #5c6e58;
|
||||
color: #ffffff;
|
||||
font-size: 8px;
|
||||
font-weight: 700;
|
||||
padding: 1px 6px;
|
||||
padding: 2px 6px;
|
||||
border-radius: 6px;
|
||||
letter-spacing: 0.2px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.soldout-badge {
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
left: 6px;
|
||||
background-color: #ff4d4f;
|
||||
color: #ffffff;
|
||||
font-size: 8px;
|
||||
font-weight: 700;
|
||||
padding: 2px 6px;
|
||||
border-radius: 6px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.list-info {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.list-title-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.list-item-name {
|
||||
font-size: 14px;
|
||||
font-weight: 750;
|
||||
color: var(--text-dark);
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.list-rating-badge {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 3px;
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
color: var(--text-dark);
|
||||
background-color: #fcfcfc;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 10px;
|
||||
padding: 1px 5px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.list-vendor {
|
||||
font-size: 11px;
|
||||
color: var(--text-mid);
|
||||
margin-top: 1px;
|
||||
}
|
||||
|
||||
.list-address {
|
||||
font-size: 9px;
|
||||
color: var(--text-light);
|
||||
margin-top: 1px;
|
||||
}
|
||||
|
||||
.list-footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.list-price {
|
||||
font-size: 14px;
|
||||
font-weight: 800;
|
||||
color: var(--text-dark);
|
||||
}
|
||||
|
||||
.list-action-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.list-add-btn {
|
||||
background-color: #000000;
|
||||
color: #ffffff;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
padding: 6px 14px;
|
||||
border-radius: 20px;
|
||||
white-space: nowrap;
|
||||
border: 1px solid #fee2e2;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
transition: transform 0.15s ease;
|
||||
}
|
||||
|
||||
.at-limit button:last-child {
|
||||
opacity: 0.3;
|
||||
cursor: not-allowed;
|
||||
background-color: #f1f5f9;
|
||||
.list-add-btn:hover {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.item-card.limit-reached {
|
||||
border-left: 3px solid #ef4444;
|
||||
.list-qty-controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: #f1f3f1;
|
||||
border-radius: 20px;
|
||||
padding: 2px;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.list-qty-controls button {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 50%;
|
||||
background-color: #ffffff;
|
||||
color: var(--text-dark);
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.list-qty {
|
||||
font-size: 12px;
|
||||
font-weight: 750;
|
||||
min-width: 14px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Out of Stock and Limit Styles */
|
||||
.out-of-stock {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.item-card-list.limit-reached {
|
||||
border-left: 3px solid #ff4d4f;
|
||||
}
|
||||
|
||||
@@ -2,68 +2,126 @@ import React from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import type { FoodItem } from '../types';
|
||||
import { useCart } from '../contexts/CartContext';
|
||||
import { Star } from 'lucide-react';
|
||||
import './ItemCard.css';
|
||||
|
||||
interface ItemCardProps {
|
||||
item: FoodItem;
|
||||
isLast?: boolean;
|
||||
variant?: 'carousel' | 'list';
|
||||
}
|
||||
|
||||
const ItemCard: React.FC<ItemCardProps> = ({ item, isLast }) => {
|
||||
const ItemCard: React.FC<ItemCardProps> = ({ item, isLast, variant = 'list' }) => {
|
||||
const navigate = useNavigate();
|
||||
const { addToCart, updateQuantity, getItemQuantity } = useCart();
|
||||
const quantity = getItemQuantity(item.id);
|
||||
const isLimitReached = item.stock !== undefined && quantity >= item.stock && item.stock > 0;
|
||||
|
||||
// Visual helper values matching mockup metadata
|
||||
const rating = 4.5;
|
||||
|
||||
if (variant === 'carousel') {
|
||||
return (
|
||||
<div
|
||||
className={`item-card-carousel ${item.stock === 0 ? 'out-of-stock' : ''}`}
|
||||
onClick={() => navigate(`/item/${item.id}`)}
|
||||
>
|
||||
<div className="carousel-rating-badge">
|
||||
<Star size={10} fill="currentColor" className="star-icon-filled" />
|
||||
<span>{rating}</span>
|
||||
</div>
|
||||
|
||||
<div className="carousel-image-container">
|
||||
{item.image ? (
|
||||
<img src={item.image} alt={item.name} className="carousel-image" />
|
||||
) : (
|
||||
<div className="carousel-placeholder">🍲</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="carousel-info">
|
||||
<h3 className="carousel-item-name">{item.name}</h3>
|
||||
<p className="carousel-vendor">{item.stallName || 'Cookie Heaven'}</p>
|
||||
|
||||
<div className="carousel-footer" onClick={(e) => e.stopPropagation()}>
|
||||
<span className="carousel-price">🅡{item.price.toFixed(2)}</span>
|
||||
<div className="carousel-action-container">
|
||||
{quantity === 0 ? (
|
||||
<button
|
||||
className="carousel-plus-btn"
|
||||
onClick={() => addToCart(item)}
|
||||
disabled={item.stock === 0}
|
||||
>
|
||||
+
|
||||
</button>
|
||||
) : (
|
||||
<div className="carousel-qty-controls">
|
||||
<button onClick={() => updateQuantity(item.id, -1)}>−</button>
|
||||
<span className="carousel-qty">{quantity}</span>
|
||||
<button
|
||||
onClick={() => addToCart(item)}
|
||||
disabled={isLimitReached}
|
||||
>+</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// default 'list' layout
|
||||
return (
|
||||
<div
|
||||
className={`item-card ${isLast ? 'last' : ''} ${item.stock === 0 ? 'out-of-stock' : ''} ${isLimitReached ? 'limit-reached' : ''}`}
|
||||
className={`item-card-list ${isLast ? 'last' : ''} ${item.stock === 0 ? 'out-of-stock' : ''} ${isLimitReached ? 'limit-reached' : ''}`}
|
||||
onClick={() => navigate(`/item/${item.id}`)}
|
||||
>
|
||||
<div className="item-info">
|
||||
<div className="item-labels">
|
||||
<div className={`veg-icon ${item.isVeg ? 'veg' : 'non-veg'}`}>
|
||||
<div className="dot" />
|
||||
</div>
|
||||
{item.isPopular && <span className="bestseller-badge">Popular</span>}
|
||||
{item.stock === 0 && <span className="out-of-stock-badge">Out of Stock</span>}
|
||||
{isLimitReached && <span className="limit-badge">Only {item.stock} left</span>}
|
||||
</div>
|
||||
|
||||
<h3 className="item-name">{item.name}</h3>
|
||||
<p className="item-price">R{item.price.toFixed(2)}</p>
|
||||
|
||||
<p className="item-description">{item.description}</p>
|
||||
<div className="list-image-container" onClick={(e) => e.stopPropagation()}>
|
||||
{item.image ? (
|
||||
<img src={item.image} alt={item.name} className="list-image" />
|
||||
) : (
|
||||
<div className="list-placeholder">🍲</div>
|
||||
)}
|
||||
{item.isPopular && <span className="bestseller-badge">Bestseller</span>}
|
||||
{item.stock === 0 && <span className="soldout-badge">Sold Out</span>}
|
||||
</div>
|
||||
|
||||
<div className="item-image-container" onClick={(e) => e.stopPropagation()}>
|
||||
{item.image ? (
|
||||
<img src={item.image} alt={item.name} className="item-image" />
|
||||
) : (
|
||||
<div className="item-image-placeholder">
|
||||
<span className="placeholder-icon">🍲</span>
|
||||
<div className="list-info">
|
||||
<div className="list-title-row">
|
||||
<h3 className="list-item-name">{item.name}</h3>
|
||||
<div className="list-rating-badge">
|
||||
<Star size={10} fill="currentColor" className="star-icon-filled" />
|
||||
<span>{rating}</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="add-to-cart-container">
|
||||
{quantity === 0 ? (
|
||||
<button
|
||||
className="add-button"
|
||||
onClick={() => addToCart(item)}
|
||||
disabled={item.stock === 0}
|
||||
>
|
||||
{item.stock === 0 ? 'SOLD OUT' : 'ADD'}
|
||||
</button>
|
||||
) : (
|
||||
<div className={`quantity-controls ${isLimitReached ? 'at-limit' : ''}`}>
|
||||
<button onClick={() => updateQuantity(item.id, -1)}>−</button>
|
||||
<span className="quantity">{quantity}</span>
|
||||
</div>
|
||||
|
||||
<p className="list-vendor">{item.stallName || 'Cookie Heaven'}</p>
|
||||
<p className="list-address">📍 54 Summit Street</p>
|
||||
|
||||
<div className="list-footer" onClick={(e) => e.stopPropagation()}>
|
||||
<span className="list-price">🅡{item.price.toFixed(2)}</span>
|
||||
|
||||
<div className="list-action-container">
|
||||
{quantity === 0 ? (
|
||||
<button
|
||||
className="list-add-btn"
|
||||
onClick={() => addToCart(item)}
|
||||
className={isLimitReached ? 'disabled' : ''}
|
||||
>+</button>
|
||||
</div>
|
||||
)}
|
||||
disabled={item.stock === 0}
|
||||
>
|
||||
+ Add
|
||||
</button>
|
||||
) : (
|
||||
<div className="list-qty-controls">
|
||||
<button onClick={() => updateQuantity(item.id, -1)}>−</button>
|
||||
<span className="list-qty">{quantity}</span>
|
||||
<button
|
||||
onClick={() => addToCart(item)}
|
||||
disabled={isLimitReached}
|
||||
>+</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -36,7 +36,7 @@ export const CartProvider: React.FC<{ children: React.ReactNode }> = ({ children
|
||||
// Stock check
|
||||
const currentQty = existingIndex !== -1 ? prevCart[existingIndex].quantity : 0;
|
||||
if (item.stock !== undefined && currentQty >= item.stock) {
|
||||
setStockError(`Only ${item.stock} left for ${item.name}`);
|
||||
setStockError(`Maximum available stock reached for ${item.name}`);
|
||||
return prevCart;
|
||||
}
|
||||
|
||||
@@ -65,7 +65,7 @@ export const CartProvider: React.FC<{ children: React.ReactNode }> = ({ children
|
||||
|
||||
// Stock check for increment
|
||||
if (delta > 0 && item.stock !== undefined && item.quantity >= item.stock) {
|
||||
setStockError(`Only ${item.stock} left for ${item.name}`);
|
||||
setStockError(`Maximum available stock reached for ${item.name}`);
|
||||
return prevCart;
|
||||
}
|
||||
|
||||
|
||||
@@ -28,10 +28,11 @@ export const FoodProvider: React.FC<{ children: React.ReactNode }> = ({ children
|
||||
if (!silent) setIsLoading(true);
|
||||
setError(null);
|
||||
try {
|
||||
const [baseItemsRes, productsRes, stallsRes] = await Promise.all([
|
||||
const [baseItemsRes, productsRes, stallsRes, statsRes] = await Promise.all([
|
||||
fetch(`${API_BASE_URL}/base-items?size=100`, { cache: 'no-store' }),
|
||||
fetch(`${API_BASE_URL}/products?size=100`, { cache: 'no-store' }),
|
||||
fetch(`${API_BASE_URL}/stalls/active`, { cache: 'no-store' })
|
||||
fetch(`${API_BASE_URL}/stalls/active`, { cache: 'no-store' }),
|
||||
fetch(`${API_BASE_URL}/feedback/stats`, { cache: 'no-store' }).catch(() => null)
|
||||
]);
|
||||
|
||||
if (!baseItemsRes.ok || !productsRes.ok || !stallsRes.ok) {
|
||||
@@ -45,6 +46,24 @@ export const FoodProvider: React.FC<{ children: React.ReactNode }> = ({ children
|
||||
const baseItemsData = baseItemsDataRaw.content || baseItemsDataRaw;
|
||||
const productsData = productsDataRaw.content || productsDataRaw;
|
||||
|
||||
// Extract top rated items names by customer feedback count
|
||||
let topRatedNames: string[] = [];
|
||||
if (statsRes && statsRes.ok) {
|
||||
try {
|
||||
const statsData = await statsRes.json();
|
||||
const ratedItems = statsData.ratedItems || [];
|
||||
// Sort items by count of feedbacks descending
|
||||
const sorted = [...ratedItems].sort((a: any, b: any) => b.count - a.count);
|
||||
// Get names of top 3 items with at least 1 feedback
|
||||
topRatedNames = sorted
|
||||
.filter((x: any) => x.count > 0)
|
||||
.slice(0, 3)
|
||||
.map((x: any) => x.name.toLowerCase());
|
||||
} catch (e) {
|
||||
console.error('Error parsing feedback stats:', e);
|
||||
}
|
||||
}
|
||||
|
||||
// Map BaseItems to Categories
|
||||
const mappedCategories: Category[] = baseItemsData.map((item: any, index: number) => ({
|
||||
id: item.id.toString(),
|
||||
@@ -100,6 +119,9 @@ export const FoodProvider: React.FC<{ children: React.ReactNode }> = ({ children
|
||||
const stallFromMap = productToStallMap[itemId];
|
||||
const stallFromCategory = item.category ? categoryToStallMap[item.category.toLowerCase()] : null;
|
||||
|
||||
// Dynamic bestseller isPopular flag based on feedback stats
|
||||
const isBestseller = topRatedNames.includes(item.name.toLowerCase());
|
||||
|
||||
return {
|
||||
id: itemId,
|
||||
name: item.name,
|
||||
@@ -108,7 +130,7 @@ export const FoodProvider: React.FC<{ children: React.ReactNode }> = ({ children
|
||||
category: item.category,
|
||||
image: finalImage,
|
||||
isVeg: item.veg,
|
||||
isPopular: item.active,
|
||||
isPopular: isBestseller,
|
||||
stock: item.stock,
|
||||
stallId: (stallFromBackend?.id || stallFromMap?.id || stallFromCategory?.id),
|
||||
stallName: (stallFromBackend?.name || stallFromMap?.name || stallFromCategory?.name)
|
||||
|
||||
@@ -1,40 +1,40 @@
|
||||
:root {
|
||||
/* LIGHT THEME (Default) */
|
||||
--primary: #08a850;
|
||||
--primary-rgb: 8, 168, 80;
|
||||
--primary-light: #f4fbf7;
|
||||
--bg: #f8f9fe;
|
||||
/* SAGE GREEN THEME */
|
||||
--primary: #5c6e58;
|
||||
--primary-rgb: 92, 110, 88;
|
||||
--primary-light: #f2f6f1;
|
||||
--bg: #cbd7c7;
|
||||
--surface: #ffffff;
|
||||
--border: rgba(0, 24, 40, 0.08);
|
||||
--green: #08a850;
|
||||
--green-light: #f4fbf7;
|
||||
--border: rgba(92, 110, 88, 0.08);
|
||||
--green: #5c6e58;
|
||||
--green-light: #f2f6f1;
|
||||
--red: #ff4d4f;
|
||||
--text-dark: #001828;
|
||||
--text-mid: #475569;
|
||||
--text-dark: #1f2421;
|
||||
--text-mid: #5c645e;
|
||||
--text-light: #94a3b8;
|
||||
--star: #f4c640;
|
||||
--shadow: 0 4px 20px rgba(0, 24, 40, 0.04);
|
||||
--input-bg: #f8f9ff;
|
||||
--modal-overlay: rgba(0, 24, 40, 0.3);
|
||||
--shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
|
||||
--input-bg: #f3f6f2;
|
||||
--modal-overlay: rgba(31, 36, 33, 0.4);
|
||||
}
|
||||
|
||||
[data-theme='dark'] {
|
||||
/* DARK THEME - Visual Poetry Deep Slate & Indigo */
|
||||
--primary: #9d87ff; /* Softer, glowing purple for dark mode */
|
||||
--primary-rgb: 157, 135, 255;
|
||||
--primary-light: #251b4d;
|
||||
--bg: #0b0e14;
|
||||
--surface: #151921;
|
||||
--border: rgba(157, 135, 255, 0.12);
|
||||
--green: #00d2aa;
|
||||
--green-light: #062d26;
|
||||
/* DARK THEME - Darker Forest Sage */
|
||||
--primary: #8fa68c;
|
||||
--primary-rgb: 143, 166, 140;
|
||||
--primary-light: #242b23;
|
||||
--bg: #141713;
|
||||
--surface: #1c211b;
|
||||
--border: rgba(143, 166, 140, 0.12);
|
||||
--green: #8fa68c;
|
||||
--green-light: #242b23;
|
||||
--red: #ff6b6b;
|
||||
--text-dark: #f0f2f5;
|
||||
--text-mid: #a0aec0;
|
||||
--text-light: #718096;
|
||||
--text-dark: #f0f2f0;
|
||||
--text-mid: #a0aca0;
|
||||
--text-light: #718071;
|
||||
--star: #ffd700;
|
||||
--shadow: 0 4px 30px rgba(0, 0, 0, 0.4);
|
||||
--input-bg: #1c212b;
|
||||
--input-bg: #283027;
|
||||
--modal-overlay: rgba(0, 0, 0, 0.7);
|
||||
}
|
||||
|
||||
@@ -48,14 +48,18 @@
|
||||
html, body {
|
||||
width: 100%;
|
||||
overflow-x: hidden;
|
||||
background-color: var(--bg);
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
||||
background-color: var(--bg);
|
||||
font-family: 'Outfit', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
color: var(--text-dark);
|
||||
line-height: 1.5;
|
||||
font-size: 16px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
button {
|
||||
@@ -72,14 +76,27 @@ a {
|
||||
|
||||
.container {
|
||||
width: 100%;
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
min-height: 100vh;
|
||||
max-width: 450px;
|
||||
margin: 20px auto;
|
||||
height: calc(100vh - 40px);
|
||||
background-color: var(--surface);
|
||||
position: relative;
|
||||
box-shadow: 0 0 20px rgba(0,0,0,0.05);
|
||||
box-shadow: 0 20px 50px rgba(44, 58, 42, 0.15);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-radius: 40px;
|
||||
border: 10px solid #ffffff;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
main {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
scrollbar-width: none; /* Firefox */
|
||||
}
|
||||
|
||||
main::-webkit-scrollbar {
|
||||
display: none; /* Safari and Chrome */
|
||||
}
|
||||
|
||||
.safe-area-bottom {
|
||||
@@ -90,6 +107,13 @@ a {
|
||||
body {
|
||||
font-size: 14px;
|
||||
}
|
||||
.container {
|
||||
margin: 0;
|
||||
border-radius: 0;
|
||||
border: none;
|
||||
height: 100vh;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.loading-spinner {
|
||||
|
||||
@@ -46,7 +46,7 @@ const CartScreen: React.FC = () => {
|
||||
</div>
|
||||
|
||||
<div className="cart-item-footer">
|
||||
<span className="cart-item-price">R{(item.price * item.quantity).toFixed(2)}</span>
|
||||
<span className="cart-item-price">🅡{(item.price * item.quantity).toFixed(2)}</span>
|
||||
|
||||
<div className="cart-quantity-controls">
|
||||
<button onClick={() => updateQuantity(item.id, -1)}>
|
||||
@@ -67,7 +67,7 @@ const CartScreen: React.FC = () => {
|
||||
<h2 className="section-title">Bill Details</h2>
|
||||
<div className="bill-row">
|
||||
<span>Item Total</span>
|
||||
<span>R{totalPrice.toFixed(2)}</span>
|
||||
<span>🅡{totalPrice.toFixed(2)}</span>
|
||||
</div>
|
||||
<div className="bill-row">
|
||||
<span>Delivery Fee</span>
|
||||
@@ -75,11 +75,11 @@ const CartScreen: React.FC = () => {
|
||||
</div>
|
||||
<div className="bill-row">
|
||||
<span>Taxes and Charges</span>
|
||||
<span>R2.50</span>
|
||||
<span>🅡2.50</span>
|
||||
</div>
|
||||
<div className="bill-row total">
|
||||
<span>To Pay</span>
|
||||
<span>R{(totalPrice + 2.5).toFixed(2)}</span>
|
||||
<span>🅡{(totalPrice + 2.5).toFixed(2)}</span>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
@@ -87,7 +87,7 @@ const CartScreen: React.FC = () => {
|
||||
<div className="cart-footer">
|
||||
<div className="footer-total">
|
||||
<span className="items-count">{totalItems} {totalItems === 1 ? 'Item' : 'Items'}</span>
|
||||
<span className="final-price">R{(totalPrice + 2.5).toFixed(2)}</span>
|
||||
<span className="final-price">🅡{(totalPrice + 2.5).toFixed(2)}</span>
|
||||
</div>
|
||||
<button
|
||||
className="checkout-button"
|
||||
|
||||
@@ -7,11 +7,38 @@ import BottomNav from '../components/BottomNav';
|
||||
import { useFood } from '../contexts/FoodContext';
|
||||
|
||||
const CategoryScreen: React.FC = () => {
|
||||
const { categoryId } = useParams<{ categoryId: string }>(); // categoryId is actually categoryName now
|
||||
const { categoryId } = useParams<{ categoryId: string }>(); // categoryId is categoryName
|
||||
const { categories, foodItems, isLoading } = useFood();
|
||||
|
||||
const category = categories.find((c) => c.name === categoryId);
|
||||
const items = foodItems.filter((item) => item.category === categoryId);
|
||||
const fancyCategoryNames = ["Quick Bites", "Hearty Meals", "Thirst Quenchers", "Sweet Cravings"];
|
||||
const isFancy = categoryId && fancyCategoryNames.includes(categoryId);
|
||||
|
||||
const category = isFancy
|
||||
? {
|
||||
name: categoryId,
|
||||
emoji: categoryId === "Quick Bites" ? "🍔" : categoryId === "Hearty Meals" ? "🍲" : categoryId === "Thirst Quenchers" ? "🥤" : "🍰",
|
||||
color: "#f2f6f1"
|
||||
}
|
||||
: categories.find((c) => c.name === categoryId);
|
||||
|
||||
const items = isFancy
|
||||
? foodItems.filter(item => {
|
||||
const cat = (item.category || '').toLowerCase();
|
||||
if (categoryId === "Thirst Quenchers") {
|
||||
return cat.includes('beverage') || cat.includes('drink') || cat.includes('juice') || cat.includes('tea') || cat.includes('coffee');
|
||||
} else if (categoryId === "Sweet Cravings") {
|
||||
return cat.includes('dessert') || cat.includes('sweet') || cat.includes('ice') || cat.includes('bakery') || cat.includes('cake');
|
||||
} else if (categoryId === "Hearty Meals") {
|
||||
return cat.includes('meal') || cat.includes('main') || cat.includes('rice') || cat.includes('combo') || cat.includes('platter');
|
||||
} else if (categoryId === "Quick Bites") {
|
||||
const isDrink = cat.includes('beverage') || cat.includes('drink') || cat.includes('juice') || cat.includes('tea') || cat.includes('coffee');
|
||||
const isSweet = cat.includes('dessert') || cat.includes('sweet') || cat.includes('ice') || cat.includes('bakery') || cat.includes('cake');
|
||||
const isMeal = cat.includes('meal') || cat.includes('main') || cat.includes('rice') || cat.includes('combo') || cat.includes('platter');
|
||||
return !isDrink && !isSweet && !isMeal;
|
||||
}
|
||||
return false;
|
||||
})
|
||||
: foodItems.filter((item) => item.category === categoryId);
|
||||
|
||||
if (isLoading && categories.length === 0) {
|
||||
return <div className="container" style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>Loading...</div>;
|
||||
|
||||
@@ -165,7 +165,7 @@ const CheckoutScreen: React.FC = () => {
|
||||
<Wallet size={14} className={isInsufficient ? 'text-rose-400' : ''} />
|
||||
<span>Your Balance: </span>
|
||||
<span className={`balance-val ${isInsufficient ? 'insufficient-val' : ''}`}>
|
||||
R{currentBalance.toLocaleString()}
|
||||
🅡{currentBalance.toLocaleString()}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -194,14 +194,14 @@ const CheckoutScreen: React.FC = () => {
|
||||
|
||||
<div className="payment-security-note">
|
||||
<ShieldCheck size={14} />
|
||||
<span>Secured by Ritz Token Protocol. 1 Token = R1.00</span>
|
||||
<span>Secured by Ritz Token Protocol. 1 Token = 🅡1.00</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div className="order-summary-mini">
|
||||
<div className="summary-row">
|
||||
<span>Tokens to be deducted</span>
|
||||
<span className="summary-price ritz-text">R{totalPrice.toLocaleString()}</span>
|
||||
<span className="summary-price ritz-text">🅡{totalPrice.toLocaleString()}</span>
|
||||
</div>
|
||||
<p className="tax-info">Exclusive of any platform bonuses</p>
|
||||
</div>
|
||||
@@ -220,7 +220,7 @@ const CheckoutScreen: React.FC = () => {
|
||||
</div>
|
||||
<div className="warning-content">
|
||||
<div className="shortfall-amount">
|
||||
Short by <span className="highlight">R{(totalPrice - currentBalance).toLocaleString()}</span>
|
||||
Short by <span className="highlight">🅡{(totalPrice - currentBalance).toLocaleString()}</span>
|
||||
</div>
|
||||
<p className="warning-instruction">Add tokens to your wallet to complete this order.</p>
|
||||
</div>
|
||||
@@ -239,7 +239,7 @@ const CheckoutScreen: React.FC = () => {
|
||||
) : isInsufficient ? (
|
||||
'Insufficient Tokens'
|
||||
) : (
|
||||
`Pay R${totalPrice.toLocaleString()} & Place Order`
|
||||
`Pay 🅡${totalPrice.toLocaleString()} & Place Order`
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
.welcome-section {
|
||||
padding: 24px 20px 16px;
|
||||
padding: 16px 20px 8px;
|
||||
}
|
||||
|
||||
.greeting-row {
|
||||
@@ -7,26 +7,26 @@
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
margin-bottom: 4px;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.welcome-message {
|
||||
font-size: 26px;
|
||||
font-size: 24px;
|
||||
font-weight: 850;
|
||||
color: var(--text-dark);
|
||||
margin: 0;
|
||||
letter-spacing: -0.02em;
|
||||
letter-spacing: -0.5px;
|
||||
}
|
||||
|
||||
.wallet-badge {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
background: white;
|
||||
padding: 8px 12px;
|
||||
border-radius: 14px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
|
||||
border: 1px solid rgba(0, 0, 0, 0.03);
|
||||
background: var(--surface);
|
||||
padding: 6px 12px;
|
||||
border-radius: 20px;
|
||||
box-shadow: 0 4px 12px rgba(92, 110, 88, 0.05);
|
||||
border: 1px solid var(--border);
|
||||
cursor: pointer;
|
||||
transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||
}
|
||||
@@ -36,27 +36,27 @@
|
||||
}
|
||||
|
||||
.wallet-icon-img {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.wallet-balance-text {
|
||||
font-weight: 800;
|
||||
font-size: 15px;
|
||||
color: var(--primary-color);
|
||||
font-size: 13px;
|
||||
color: var(--primary);
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
.welcome-subtitle {
|
||||
font-size: 15px;
|
||||
font-size: 14px;
|
||||
color: var(--text-mid);
|
||||
font-weight: 500;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.search-bar-container {
|
||||
padding: 12px 16px;
|
||||
padding: 8px 20px 16px;
|
||||
background-color: var(--surface);
|
||||
}
|
||||
|
||||
@@ -65,9 +65,10 @@
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
background-color: var(--input-bg);
|
||||
padding: 10px 14px;
|
||||
border-radius: 12px;
|
||||
border: 1px solid var(--border);
|
||||
padding: 12px 16px;
|
||||
border-radius: 30px;
|
||||
border: 1px solid transparent;
|
||||
box-shadow: 0 2px 8px rgba(92, 110, 88, 0.02);
|
||||
}
|
||||
|
||||
.search-icon {
|
||||
@@ -83,23 +84,59 @@
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.search-divider {
|
||||
width: 1px;
|
||||
height: 16px;
|
||||
background-color: rgba(92, 110, 88, 0.15);
|
||||
margin: 0 4px;
|
||||
}
|
||||
|
||||
.voice-icon-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--text-mid);
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
.search-bar input {
|
||||
border: none;
|
||||
background: none;
|
||||
width: 100%;
|
||||
font-size: 0.9rem;
|
||||
font-size: 0.95rem;
|
||||
color: var(--text-dark);
|
||||
outline: none;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
padding: 16px;
|
||||
padding: 16px 20px 12px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.carousel-header {
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 1.1rem;
|
||||
font-size: 1.15rem;
|
||||
font-weight: 800;
|
||||
color: var(--text-dark);
|
||||
letter-spacing: -0.3px;
|
||||
}
|
||||
|
||||
.view-all-link {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: var(--text-mid);
|
||||
cursor: pointer;
|
||||
transition: color 0.2s ease;
|
||||
}
|
||||
|
||||
.view-all-link:hover {
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.categories-section {
|
||||
@@ -299,8 +336,29 @@
|
||||
|
||||
.popular-section {
|
||||
background-color: var(--surface);
|
||||
margin-top: 10px;
|
||||
flex: 1;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.popular-carousel {
|
||||
display: flex;
|
||||
overflow-x: auto;
|
||||
padding: 4px 20px 20px;
|
||||
scrollbar-width: none;
|
||||
-ms-overflow-style: none;
|
||||
}
|
||||
|
||||
.popular-carousel::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.recommended-section {
|
||||
background-color: var(--surface);
|
||||
margin-top: 8px;
|
||||
padding-bottom: 24px;
|
||||
}
|
||||
|
||||
.recommended-section .items-list {
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.items-list {
|
||||
|
||||
@@ -102,6 +102,30 @@ const HomeScreen: React.FC = () => {
|
||||
|
||||
const popularItems = useMemo(() => foodItems.filter(item => item.isPopular), [foodItems]);
|
||||
|
||||
const categorizedGroups = useMemo(() => {
|
||||
const groups: { title: string; items: any[] }[] = [
|
||||
{ title: "🍔 Quick Bites", items: [] },
|
||||
{ title: "🍲 Hearty Meals", items: [] },
|
||||
{ title: "🥤 Thirst Quenchers", items: [] },
|
||||
{ title: "🍰 Sweet Cravings", items: [] }
|
||||
];
|
||||
|
||||
foodItems.forEach(item => {
|
||||
const cat = (item.category || '').toLowerCase();
|
||||
if (cat.includes('beverage') || cat.includes('drink') || cat.includes('juice') || cat.includes('tea') || cat.includes('coffee')) {
|
||||
groups[2].items.push(item);
|
||||
} else if (cat.includes('dessert') || cat.includes('sweet') || cat.includes('ice') || cat.includes('bakery') || cat.includes('cake')) {
|
||||
groups[3].items.push(item);
|
||||
} else if (cat.includes('meal') || cat.includes('main') || cat.includes('rice') || cat.includes('combo') || cat.includes('platter')) {
|
||||
groups[1].items.push(item);
|
||||
} else {
|
||||
groups[0].items.push(item);
|
||||
}
|
||||
});
|
||||
|
||||
return groups.filter(g => g.items.length > 0);
|
||||
}, [foodItems]);
|
||||
|
||||
const [searchResults, setSearchResults] = useState<any[]>([]);
|
||||
const [isSearching, setIsSearching] = useState(false);
|
||||
const [debouncedSearch, setDebouncedSearch] = useState('');
|
||||
@@ -187,7 +211,7 @@ const HomeScreen: React.FC = () => {
|
||||
{user && (
|
||||
<div className="wallet-badge" onClick={() => navigate('/wallet')}>
|
||||
<img src={walletIcon} alt="Wallet" className="wallet-icon-img" />
|
||||
<span className="wallet-balance-text">R {user.ritzTokenBalance || 0}</span>
|
||||
<span className="wallet-balance-text">🅡 {user.ritzTokenBalance || 0}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
@@ -196,17 +220,24 @@ const HomeScreen: React.FC = () => {
|
||||
|
||||
<div className="search-bar-container">
|
||||
<div className="search-bar">
|
||||
<Search size={20} className="search-icon" />
|
||||
<Search size={18} className="search-icon" />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search for food..."
|
||||
placeholder="Search..."
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
/>
|
||||
{searchQuery && (
|
||||
{searchQuery ? (
|
||||
<button onClick={() => setSearchQuery('')} className="clear-search">
|
||||
<X size={18} />
|
||||
</button>
|
||||
) : (
|
||||
<>
|
||||
<div className="search-divider" />
|
||||
<button className="voice-icon-btn">
|
||||
<span style={{ fontSize: 16 }}>🎙️</span>
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
@@ -227,6 +258,7 @@ const HomeScreen: React.FC = () => {
|
||||
<ItemCard
|
||||
key={item.id}
|
||||
item={item}
|
||||
variant="list"
|
||||
isLast={index === searchResults.length - 1}
|
||||
/>
|
||||
))}
|
||||
@@ -301,24 +333,48 @@ const HomeScreen: React.FC = () => {
|
||||
</section>
|
||||
|
||||
<section className="popular-section">
|
||||
<div className="section-header">
|
||||
<h2 className="section-title">Popular Items</h2>
|
||||
<div className="section-header carousel-header">
|
||||
<h2 className="section-title">Your trusted picks</h2>
|
||||
<span className="view-all-link">View all</span>
|
||||
</div>
|
||||
<div className="items-list">
|
||||
{popularItems.map((item, index) => (
|
||||
<div className="popular-carousel">
|
||||
{popularItems.map((item) => (
|
||||
<ItemCard
|
||||
key={item.id}
|
||||
item={item}
|
||||
isLast={index === popularItems.length - 1}
|
||||
variant="carousel"
|
||||
/>
|
||||
))}
|
||||
{popularItems.length === 0 && !isLoading && (
|
||||
<div style={{ padding: 24, textAlign: 'center', color: 'var(--text-light)' }}>
|
||||
<div style={{ padding: 24, textAlign: 'center', color: 'var(--text-light)', width: '100%' }}>
|
||||
No popular items at the moment.
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{categorizedGroups.map((group) => (
|
||||
<section key={group.title} className="popular-section categorized-section-row">
|
||||
<div className="section-header carousel-header">
|
||||
<h2 className="section-title">{group.title}</h2>
|
||||
<span
|
||||
className="view-all-link"
|
||||
onClick={() => navigate(`/category/${group.title.replace(/[^\w\s]/g, '').trim()}`)}
|
||||
>
|
||||
View all
|
||||
</span>
|
||||
</div>
|
||||
<div className="popular-carousel">
|
||||
{group.items.map((item) => (
|
||||
<ItemCard
|
||||
key={item.id}
|
||||
item={item}
|
||||
variant="carousel"
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
</main>
|
||||
|
||||
@@ -1,30 +1,32 @@
|
||||
.item-detail-page {
|
||||
background-color: var(--surface);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.item-detail-page.out-of-stock {
|
||||
opacity: 0.8;
|
||||
.detail-header-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.item-detail-page.out-of-stock .item-hero {
|
||||
filter: grayscale(0.5);
|
||||
.detail-header-overlay .app-header {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
.out-of-stock-badge {
|
||||
background-color: #f3f4f6;
|
||||
color: #6b7280;
|
||||
font-size: 0.65rem;
|
||||
font-weight: 700;
|
||||
padding: 1px 6px;
|
||||
border-radius: 20px;
|
||||
white-space: nowrap;
|
||||
.detail-header-overlay .back-button {
|
||||
background-color: #ffffff;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.item-hero {
|
||||
width: 100%;
|
||||
aspect-ratio: 16/9;
|
||||
max-height: 300px;
|
||||
height: 260px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background-color: var(--primary-light);
|
||||
}
|
||||
|
||||
.item-hero-image {
|
||||
@@ -36,30 +38,258 @@
|
||||
.item-hero-placeholder {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
aspect-ratio: 16/9;
|
||||
max-height: 300px;
|
||||
background: linear-gradient(135deg, var(--primary-light), #fff) ;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.item-hero-placeholder::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image: radial-gradient(var(--primary) 0.5px, transparent 0.5px);
|
||||
background-size: 15px 15px;
|
||||
opacity: 0.1;
|
||||
}
|
||||
|
||||
.placeholder-emoji {
|
||||
font-size: 3rem;
|
||||
opacity: 0.6;
|
||||
font-size: 4rem;
|
||||
}
|
||||
|
||||
.item-details-content {
|
||||
margin-top: -30px;
|
||||
background-color: var(--surface);
|
||||
border-radius: 32px 32px 0 0;
|
||||
padding: 24px 20px;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
box-shadow: 0 -12px 30px rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
|
||||
.item-title-section {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
gap: 16px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.title-left {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.item-name-large {
|
||||
font-size: 22px;
|
||||
font-weight: 850;
|
||||
color: var(--text-dark);
|
||||
line-height: 1.2;
|
||||
letter-spacing: -0.5px;
|
||||
}
|
||||
|
||||
.item-subtitle {
|
||||
font-size: 13px;
|
||||
color: var(--text-mid);
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.title-right {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.detail-quantity-pill {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: #f1f3f1;
|
||||
border-radius: 30px;
|
||||
padding: 3px;
|
||||
gap: 10px;
|
||||
border: 1px solid rgba(92, 110, 88, 0.05);
|
||||
}
|
||||
|
||||
.qty-btn {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 50%;
|
||||
background-color: #ffffff;
|
||||
color: var(--text-dark);
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
|
||||
transition: transform 0.15s ease;
|
||||
}
|
||||
|
||||
.qty-btn:active {
|
||||
transform: scale(0.9);
|
||||
}
|
||||
|
||||
.qty-btn:disabled {
|
||||
opacity: 0.3;
|
||||
cursor: not-allowed;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.qty-val {
|
||||
font-size: 13px;
|
||||
font-weight: 750;
|
||||
min-width: 14px;
|
||||
text-align: center;
|
||||
color: var(--text-dark);
|
||||
}
|
||||
|
||||
.detail-badges-row {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
margin-bottom: 20px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.badge-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
border: 1px solid var(--border);
|
||||
padding: 6px 12px;
|
||||
border-radius: 20px;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
color: var(--text-mid);
|
||||
}
|
||||
|
||||
.badge-item.star svg {
|
||||
color: var(--star);
|
||||
fill: var(--star);
|
||||
}
|
||||
|
||||
.badge-item.time svg {
|
||||
color: var(--text-mid);
|
||||
}
|
||||
|
||||
.badge-item.kcal svg {
|
||||
color: #ff4d4f;
|
||||
fill: #ff4d4f;
|
||||
}
|
||||
|
||||
.item-description-section {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.item-long-description {
|
||||
font-size: 13px;
|
||||
line-height: 1.5;
|
||||
color: var(--text-mid);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.customize-trigger {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
color: var(--primary);
|
||||
background: transparent;
|
||||
padding: 0;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.item-extra-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
border-top: 1px solid var(--border);
|
||||
padding-top: 16px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.info-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.info-label {
|
||||
font-size: 12px;
|
||||
color: var(--text-mid);
|
||||
}
|
||||
|
||||
.info-value {
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
color: var(--text-dark);
|
||||
}
|
||||
|
||||
.info-value.green { color: var(--green); }
|
||||
.info-value.red { color: var(--red); }
|
||||
|
||||
.item-footer {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 80px;
|
||||
background-color: var(--surface);
|
||||
padding: 12px 20px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
box-shadow: 0 -4px 15px rgba(92, 110, 88, 0.05);
|
||||
border-top: 1px solid var(--border);
|
||||
z-index: 101;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.footer-price-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.total-label {
|
||||
font-size: 10px;
|
||||
color: var(--text-light);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.total-value {
|
||||
font-size: 18px;
|
||||
font-weight: 850;
|
||||
color: var(--text-dark);
|
||||
}
|
||||
|
||||
.footer-action {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.primary-action-button {
|
||||
background-color: var(--primary);
|
||||
color: white;
|
||||
padding: 12px 28px;
|
||||
border-radius: 30px;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
border: none;
|
||||
width: 150px;
|
||||
text-align: center;
|
||||
transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.1);
|
||||
box-shadow: 0 4px 12px rgba(92, 110, 88, 0.15);
|
||||
}
|
||||
|
||||
.primary-action-button:active {
|
||||
transform: scale(0.96);
|
||||
}
|
||||
|
||||
.primary-action-button:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.limit-reached-info {
|
||||
background-color: #fef2f2;
|
||||
border: 1px solid #fee2e2;
|
||||
padding: 10px 12px;
|
||||
border-radius: 12px;
|
||||
margin-top: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
color: #ef4444;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
/* Loading & Not Found States */
|
||||
@@ -70,6 +300,7 @@
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
background: var(--bg);
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.loading-spinner-wrapper {
|
||||
@@ -127,218 +358,3 @@
|
||||
font-weight: 700;
|
||||
border: none;
|
||||
}
|
||||
|
||||
@keyframes float {
|
||||
0% { transform: translateY(0px); }
|
||||
50% { transform: translateY(-10px); }
|
||||
100% { transform: translateY(0px); }
|
||||
}
|
||||
|
||||
.item-details-content {
|
||||
padding: 20px 16px;
|
||||
}
|
||||
|
||||
.item-header-info {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.item-name-large {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 800;
|
||||
color: var(--text-dark);
|
||||
margin: 8px 0;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.item-price-large {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 700;
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.item-stats {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background-color: var(--bg);
|
||||
padding: 12px;
|
||||
border-radius: 12px;
|
||||
margin-bottom: 20px;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
flex: 1;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.stat-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 0.85rem;
|
||||
font-weight: 700;
|
||||
color: var(--text-dark);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 0.65rem;
|
||||
color: var(--text-mid);
|
||||
}
|
||||
|
||||
.stat-divider {
|
||||
width: 1px;
|
||||
height: 20px;
|
||||
background-color: var(--border);
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 800;
|
||||
color: var(--text-dark);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.item-long-description {
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.5;
|
||||
color: var(--text-mid);
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.item-extra-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
border-top: 1px solid var(--border);
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
.info-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.info-label {
|
||||
font-size: 0.85rem;
|
||||
color: var(--text-mid);
|
||||
}
|
||||
|
||||
.info-value {
|
||||
font-size: 0.85rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-dark);
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.info-value.green { color: var(--green); }
|
||||
.info-value.red { color: var(--red); }
|
||||
|
||||
.item-footer {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 100%;
|
||||
max-width: 600px;
|
||||
background-color: var(--surface);
|
||||
padding: 12px 16px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
box-shadow: 0 -4px 20px rgba(0,0,0,0.05);
|
||||
border-top: 1px solid var(--border);
|
||||
z-index: 101;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.footer-price-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.total-label {
|
||||
font-size: 0.75rem;
|
||||
color: var(--text-mid);
|
||||
}
|
||||
|
||||
.total-value {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 800;
|
||||
color: var(--text-dark);
|
||||
}
|
||||
|
||||
.primary-action-button {
|
||||
background-color: var(--primary);
|
||||
color: white;
|
||||
padding: 12px 24px;
|
||||
border-radius: 12px;
|
||||
font-size: 1rem;
|
||||
font-weight: 700;
|
||||
flex: 1;
|
||||
max-width: 200px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.footer-quantity-controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
background-color: var(--primary-light);
|
||||
padding: 8px 16px;
|
||||
border-radius: 12px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.footer-quantity-controls button {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 800;
|
||||
color: var(--primary);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.footer-quantity-controls .quantity {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 800;
|
||||
color: var(--primary);
|
||||
min-width: 24px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media (max-width: 360px) {
|
||||
.item-footer {
|
||||
padding: 10px 12px;
|
||||
}
|
||||
.primary-action-button {
|
||||
padding: 10px 16px;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
}
|
||||
|
||||
.limit-reached-info {
|
||||
background-color: #fef2f2;
|
||||
border: 1px solid #fee2e2;
|
||||
padding: 12px;
|
||||
border-radius: 12px;
|
||||
margin-bottom: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
color: #ef4444;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.footer-quantity-controls button:disabled {
|
||||
opacity: 0.3;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import React from 'react';
|
||||
import type { FoodItem } from '../types';
|
||||
import { useParams } from 'react-router-dom';
|
||||
import { AlertCircle } from 'lucide-react';
|
||||
import { AlertCircle, Star, ChevronRight } from 'lucide-react';
|
||||
import Header from '../components/Header';
|
||||
import { useCart } from '../contexts/CartContext';
|
||||
import { useFood } from '../contexts/FoodContext';
|
||||
@@ -57,6 +57,7 @@ const ItemDetailScreen: React.FC = () => {
|
||||
fetchItem();
|
||||
}
|
||||
}, [itemId, contextItem]);
|
||||
|
||||
if (isGlobalLoading || isFetching || !item) {
|
||||
if (isGlobalLoading || isFetching) {
|
||||
return (
|
||||
@@ -85,9 +86,14 @@ const ItemDetailScreen: React.FC = () => {
|
||||
const quantity = getItemQuantity(item.id);
|
||||
const isLimitReached = item.stock !== undefined && quantity >= item.stock && item.stock > 0;
|
||||
|
||||
// Visual helper values matching mockup metadata
|
||||
const rating = 4.5;
|
||||
|
||||
return (
|
||||
<div className={`container item-detail-page ${item.stock === 0 ? 'out-of-stock' : ''}`}>
|
||||
<Header title="" />
|
||||
<div className="detail-header-overlay">
|
||||
<Header title="" showCart={false} />
|
||||
</div>
|
||||
|
||||
<main className="safe-area-bottom">
|
||||
<div className="item-hero">
|
||||
@@ -101,24 +107,43 @@ const ItemDetailScreen: React.FC = () => {
|
||||
</div>
|
||||
|
||||
<div className="item-details-content">
|
||||
<div className="item-header-info">
|
||||
<div className="item-labels">
|
||||
<div className={`veg-icon ${item.isVeg ? 'veg' : 'non-veg'}`}>
|
||||
<div className="dot" />
|
||||
</div>
|
||||
{item.isPopular && <span className="bestseller-badge">Popular</span>}
|
||||
{item.stock === 0 && <span className="out-of-stock-badge">Sold Out</span>}
|
||||
<div className="item-title-section">
|
||||
<div className="title-left">
|
||||
<h1 className="item-name-large">{item.name}</h1>
|
||||
<p className="item-subtitle">{item.stallName || '54 Summit Street.'}</p>
|
||||
</div>
|
||||
|
||||
<h1 className="item-name-large">{item.name}</h1>
|
||||
<p className="item-price-large">R{item.price.toFixed(2)}</p>
|
||||
<div className="title-right" onClick={(e) => e.stopPropagation()}>
|
||||
<div className="detail-quantity-pill">
|
||||
<button
|
||||
onClick={() => updateQuantity(item.id, -1)}
|
||||
disabled={quantity === 0}
|
||||
className="qty-btn"
|
||||
>−</button>
|
||||
<span className="qty-val">{quantity}</span>
|
||||
<button
|
||||
onClick={() => addToCart(item)}
|
||||
disabled={isLimitReached || item.stock === 0}
|
||||
className="qty-btn"
|
||||
>+</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="detail-badges-row">
|
||||
<div className="badge-item star">
|
||||
<Star size={14} fill="currentColor" />
|
||||
<span>{rating}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="item-description-section">
|
||||
<h2 className="section-title">Description</h2>
|
||||
<p className="item-long-description">
|
||||
{item.longDescription || item.description}
|
||||
{item.longDescription || item.description || 'Quality food prepared with fresh ingredients, crafted with care for a premium taste experience.'}
|
||||
</p>
|
||||
<button className="customize-trigger">
|
||||
Customize <ChevronRight size={14} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="item-extra-info">
|
||||
@@ -133,7 +158,7 @@ const ItemDetailScreen: React.FC = () => {
|
||||
<div className="info-row">
|
||||
<span className="info-label">Availability</span>
|
||||
<span className={`info-value ${item.stock && item.stock > 0 ? 'green' : 'red'}`}>
|
||||
{item.stock && item.stock > 0 ? `In Stock (${item.stock} left)` : 'Out of Stock'}
|
||||
{item.stock && item.stock > 0 ? 'In Stock' : 'Out of Stock'}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -141,7 +166,7 @@ const ItemDetailScreen: React.FC = () => {
|
||||
{isLimitReached && (
|
||||
<div className="limit-reached-info">
|
||||
<AlertCircle size={18} />
|
||||
<span>You have reached the maximum available quantity ({item.stock}) for this item.</span>
|
||||
<span>You have reached the maximum available quantity for this item.</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
@@ -149,30 +174,25 @@ const ItemDetailScreen: React.FC = () => {
|
||||
|
||||
<footer className="item-footer">
|
||||
<div className="footer-price-info">
|
||||
<span className="total-label">Price</span>
|
||||
<span className="total-value">R{(item.price * Math.max(1, quantity)).toFixed(2)}</span>
|
||||
<span className="total-label">Total amount</span>
|
||||
<span className="total-value">🅡{(item.price * Math.max(1, quantity)).toFixed(2)}</span>
|
||||
</div>
|
||||
|
||||
<div className="footer-action">
|
||||
{quantity === 0 ? (
|
||||
<button
|
||||
className="primary-action-button"
|
||||
onClick={() => addToCart(item)}
|
||||
disabled={item.stock === 0}
|
||||
style={{ opacity: item.stock === 0 ? 0.5 : 1 }}
|
||||
>
|
||||
{item.stock === 0 ? 'Out of Stock' : 'Add to Cart'}
|
||||
</button>
|
||||
) : (
|
||||
<div className="footer-quantity-controls">
|
||||
<button onClick={() => updateQuantity(item.id, -1)}>−</button>
|
||||
<span className="quantity">{quantity}</span>
|
||||
<button
|
||||
onClick={() => addToCart(item)}
|
||||
disabled={isLimitReached}
|
||||
>+</button>
|
||||
</div>
|
||||
)}
|
||||
<button
|
||||
className="primary-action-button"
|
||||
onClick={() => {
|
||||
if (quantity === 0) {
|
||||
addToCart(item);
|
||||
} else {
|
||||
// Already in cart, go to cart screen or show visual confirmation
|
||||
window.history.back();
|
||||
}
|
||||
}}
|
||||
disabled={item.stock === 0}
|
||||
>
|
||||
{item.stock === 0 ? 'Sold Out' : 'Add to cart'}
|
||||
</button>
|
||||
</div>
|
||||
</footer>
|
||||
<CartTab />
|
||||
|
||||
@@ -245,7 +245,7 @@ const MyOrdersScreen: React.FC = () => {
|
||||
|
||||
<div className="order-total-bar">
|
||||
<span>Total Amount</span>
|
||||
<span className="amount-text">R{latestOrder.totalAmount.toFixed(2)}</span>
|
||||
<span className="amount-text">🅡{latestOrder.totalAmount.toFixed(2)}</span>
|
||||
</div>
|
||||
|
||||
<div style={{ display: 'flex', gap: '8px' }}>
|
||||
@@ -290,7 +290,7 @@ const MyOrdersScreen: React.FC = () => {
|
||||
<div className="order-list-info">
|
||||
<div className="order-list-top">
|
||||
<span className="order-list-number">#{order.displayOrderId}</span>
|
||||
<span className="order-list-price">R{order.totalAmount.toFixed(0)}</span>
|
||||
<span className="order-list-price">🅡{order.totalAmount.toFixed(0)}</span>
|
||||
</div>
|
||||
<div className="order-list-bottom">
|
||||
<span className="order-list-date">{new Date(order.createdAt).toLocaleDateString()}</span>
|
||||
@@ -387,12 +387,12 @@ const MyOrdersScreen: React.FC = () => {
|
||||
{selectedOrder.items.map((item, idx) => (
|
||||
<div key={idx} className="modal-item-row">
|
||||
<span>{item.quantity} x {item.productName}</span>
|
||||
<span>R{(item.price * item.quantity).toFixed(0)}</span>
|
||||
<span>🅡{(item.price * item.quantity).toFixed(0)}</span>
|
||||
</div>
|
||||
))}
|
||||
<div className="modal-total-row">
|
||||
<span>Grand Total</span>
|
||||
<span>R{selectedOrder.totalAmount.toFixed(2)}</span>
|
||||
<span>🅡{selectedOrder.totalAmount.toFixed(2)}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user