111 lines
3.3 KiB
JavaScript
111 lines
3.3 KiB
JavaScript
import { useState } from "react";
|
|
import "../../styles/ItemClassificationModal.css";
|
|
import { ITEM_GROUPS, ITEM_TYPES, ZONES, getItemTypeLabel } from "../constants/classifications";
|
|
|
|
export default function ItemClassificationModal({ itemName, onConfirm, onSkip }) {
|
|
const [itemType, setItemType] = useState("");
|
|
const [itemGroup, setItemGroup] = useState("");
|
|
const [zone, setZone] = useState("");
|
|
|
|
const handleItemTypeChange = (e) => {
|
|
const newType = e.target.value;
|
|
setItemType(newType);
|
|
// Reset item group when type changes
|
|
setItemGroup("");
|
|
};
|
|
|
|
const handleConfirm = () => {
|
|
if (!itemType) {
|
|
alert("Please select an item type");
|
|
return;
|
|
}
|
|
|
|
if (!itemGroup) {
|
|
alert("Please select an item group");
|
|
return;
|
|
}
|
|
|
|
onConfirm({
|
|
item_type: itemType,
|
|
item_group: itemGroup,
|
|
zone: zone || null
|
|
});
|
|
};
|
|
|
|
const availableGroups = itemType ? ITEM_GROUPS[itemType] || [] : [];
|
|
|
|
return (
|
|
<div className="classification-modal-overlay">
|
|
<div className="classification-modal-content">
|
|
<h2 className="classification-modal-title">Classify Item</h2>
|
|
<p className="classification-modal-subtitle">Help organize "{itemName}" in your list</p>
|
|
|
|
<div className="classification-modal-field">
|
|
<label>Item Type <span className="required">*</span></label>
|
|
<select
|
|
value={itemType}
|
|
onChange={handleItemTypeChange}
|
|
className="classification-modal-select"
|
|
>
|
|
<option value="">-- Select Type --</option>
|
|
{Object.values(ITEM_TYPES).map((type) => (
|
|
<option key={type} value={type}>
|
|
{getItemTypeLabel(type)}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
|
|
{itemType && (
|
|
<div className="classification-modal-field">
|
|
<label>Item Group <span className="required">*</span></label>
|
|
<select
|
|
value={itemGroup}
|
|
onChange={(e) => setItemGroup(e.target.value)}
|
|
className="classification-modal-select"
|
|
>
|
|
<option value="">-- Select Group --</option>
|
|
{availableGroups.map((group) => (
|
|
<option key={group} value={group}>
|
|
{group}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
)}
|
|
|
|
<div className="classification-modal-field">
|
|
<label>Store Zone (Optional)</label>
|
|
<select
|
|
value={zone}
|
|
onChange={(e) => setZone(e.target.value)}
|
|
className="classification-modal-select"
|
|
>
|
|
<option value="">-- Select Zone --</option>
|
|
{ZONES.map((z) => (
|
|
<option key={z} value={z}>
|
|
{z}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
|
|
<div className="classification-modal-actions">
|
|
<button
|
|
className="classification-modal-btn classification-modal-btn-skip"
|
|
onClick={onSkip}
|
|
>
|
|
Skip for Now
|
|
</button>
|
|
<button
|
|
className="classification-modal-btn classification-modal-btn-confirm"
|
|
onClick={handleConfirm}
|
|
>
|
|
Confirm
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|