ok

src/components/ItemType.js

@@ -1,5 +1,6 @@
 import React, { useRef, useEffect, useState } from "react";
 import styles from "./ItemType.module.css";
+import { Coffee, CupSoda, CakeSlice, Utensils, Grid2X2, Plus } from 'lucide-react';
 
 export default function ItemType({
   onClick,
@@ -57,6 +58,15 @@ export default function ItemType({
     onCreate(namee, selectedImage);
   };
 
+  const formatName = (val) => {
+    if (!val || typeof val !== 'string') return val;
+    return val
+      .toLowerCase()
+      .replace(/\b\w/g, (c) => c.toUpperCase());
+  };
+
+  const iconImageUrl = imageUrl === 'uploads/assets/All.png' ? 'icon:all' : imageUrl;
+
   return (
     <div
       className={
@@ -72,27 +82,25 @@ export default function ItemType({
     >
       <div
         onClick={
-          rectangular ? (blank ? null : () => onClick(imageUrl)) : onClick
+          rectangular ? (blank ? null : () => onClick(iconImageUrl)) : onClick
         }
         className={styles["item-type-rect"]}
         style={{
-          top: selected ? "-10px" : "initial",
+          // Remove lift-up effect; only color changes when selected
+          backgroundColor: selected ? 'var(--brand-sage, #6B8F71)' : '#ffffff',
+          border: selected ? '1px solid var(--brand-sage, #6B8F71)' : '1px solid #e6e6e6',
+          color: selected ? '#ffffff' : '#4a6b5a'
         }}
       >
-        {imageUrl != 'uploads/assets/All.png' ?
-          <img
-            src={previewUrl}
-            alt={namee}
-            className={styles["item-type-image"]}
-          />
-          :<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+        {iconImageUrl === 'uploads/assets/All.png' ? (
+          <svg version="1.0" xmlns="http://www.w3.org/2000/svg"
             width="100%" height="100%" viewBox="0 0 800.000000 800.000000"
             preserveAspectRatio="xMidYMid meet">
             <metadata>
               Created by potrace 1.16, written by Peter Selinger 2001-2019
             </metadata>
             <g transform="translate(0.000000,800.000000) scale(0.100000,-0.100000)"
-              fill="#000000" stroke="none">
+              fill="currentColor" stroke="none">
               <path d="M3708 7165 c-3 -4 -44 -10 -90 -15 -266 -28 -530 -91 -753 -180 -11
 -4 -42 -16 -70 -26 -27 -9 -129 -57 -225 -106 -186 -94 -188 -95 -262 -145
 -26 -18 -52 -33 -58 -33 -5 0 -24 -13 -42 -28 -18 -16 -53 -43 -78 -61 -124
@@ -138,7 +146,17 @@ c261 0 329 -3 352 -14z m1237 -2 c52 -35 54 -49 54 -379 0 -348 -2 -360 -69
 58 40 59 387 60 178 0 328 -4 342 -10z"/>
             </g>
           </svg>
-        }
+        ) : (iconImageUrl && typeof iconImageUrl === 'string' && iconImageUrl.startsWith('icon:')) ? (
+          <div style={{width:'100%',height:'100%',display:'flex',alignItems:'center',justifyContent:'center'}}>
+            <LucideCategoryIcon name={namee} iconKey={(iconImageUrl || '').split(':')[1]} />
+          </div>
+        ) : (
+          <img
+            src={previewUrl}
+            alt={namee}
+            className={styles["item-type-image"]}
+          />
+        )}
         {blank && rectangular && (
           <div className={styles["item-type-image-container"]}>
             <input
@@ -155,15 +173,49 @@ c261 0 329 -3 352 -14z m1237 -2 c52 -35 54 -49 54 -379 0 -348 -2 -360 -69
         <input
           ref={inputRef}
           className={`${styles["item-type-name"]} ${styles.noborder}`}
-          value={namee}
+          value={formatName(namee)}
           onChange={handleNameChange}
           disabled={true}
           style={{
-            top: selected ? "-5px" : "initial",
-            borderBottom: selected ? "1px solid #000" : "none",
+            top: 'initial',
+            borderBottom: 'none',
+            color: selected ? '#2d2d2d' : '#333',
+            textTransform: 'capitalize'
           }}
         />
       )}
     </div>
   );
 }
+
+function LucideCategoryIcon({ name, iconKey }) {
+  const key = pickIconKey(name, iconKey);
+  const size = '56%';
+  switch (key) {
+    case 'coffee':
+      return <Coffee color={'currentColor'} size={size} strokeWidth={2} />;
+    case 'drink':
+      return <CupSoda color={'currentColor'} size={size} strokeWidth={2} />;
+    case 'dessert':
+      return <CakeSlice color={'currentColor'} size={size} strokeWidth={2} />;
+    case 'food':
+      return <Utensils color={'currentColor'} size={size} strokeWidth={2} />;
+    case 'all':
+      return <Grid2X2 color={'currentColor'} size={size} strokeWidth={2} />;
+    case 'plus':
+      return <Plus color={'currentColor'} size={size} strokeWidth={2} />;
+    default:
+      return <Utensils color={'currentColor'} size={size} strokeWidth={2} />;
+  }
+}
+
+function pickIconKey(name, iconKey) {
+  const n = (name || '').toLowerCase();
+  if (iconKey === 'plus') return 'plus';
+  if (iconKey === 'all') return 'all';
+  if (/(kopi|coffee|espresso|latte|americano|kapal|brew)/.test(n)) return 'coffee';
+  if (/(teh|tea|drink|minum|soda|juice|jus|milk|susu|lemon)/.test(n)) return 'drink';
+  if (/(dessert|cake|kue|manis|ice|es krim|ice-cream)/.test(n)) return 'dessert';
+  if (/(food|makan|snack|cemilan|nasi|mie|noodle|soup|sup|ayam|daging|ikan|roti|sandwich|burger|pizza)/.test(n)) return 'food';
+  return 'food';
+}