e.stopPropagation()}>
-
Add Details for "{itemName}"
-
Add an image and classification to help organize your list
+
+ {itemName}
+
{/* Image Section */}
@@ -63,6 +60,9 @@ export default function AddItemWithDetailsModal({ itemName, onConfirm, onSkip, o
imagePreview={imagePreview}
onImageChange={handleImageChange}
onImageRemove={handleImageRemove}
+ title={null}
+ cameraLabel="Use Image"
+ galleryLabel="Choose Photo"
/>
@@ -75,6 +75,8 @@ export default function AddItemWithDetailsModal({ itemName, onConfirm, onSkip, o
onItemTypeChange={handleItemTypeChange}
onItemGroupChange={setItemGroup}
onZoneChange={setZone}
+ zones={zones}
+ title={null}
fieldClass="add-item-details-field"
selectClass="add-item-details-select"
/>
@@ -85,9 +87,6 @@ export default function AddItemWithDetailsModal({ itemName, onConfirm, onSkip, o
Cancel
-
- Skip All
-
Add Item
diff --git a/frontend/src/components/modals/AvailableItemEditorModal.jsx b/frontend/src/components/modals/AvailableItemEditorModal.jsx
index 582a0c6..c682b93 100644
--- a/frontend/src/components/modals/AvailableItemEditorModal.jsx
+++ b/frontend/src/components/modals/AvailableItemEditorModal.jsx
@@ -13,7 +13,7 @@ function buildPreview(item) {
return `data:${mimeType};base64,${item.item_image}`;
}
-export default function AvailableItemEditorModal({ isOpen, item = null, onCancel, onSave }) {
+export default function AvailableItemEditorModal({ isOpen, item = null, zones = [], onCancel, onSave }) {
const toast = useActionToast();
const [itemName, setItemName] = useState("");
const [itemType, setItemType] = useState("");
@@ -136,6 +136,7 @@ export default function AvailableItemEditorModal({ isOpen, item = null, onCancel
onItemTypeChange={handleItemTypeChange}
onItemGroupChange={setItemGroup}
onZoneChange={setZone}
+ zones={zones}
fieldClass="available-item-editor-field"
selectClass="available-item-editor-select"
title="Store Classification (Optional)"
diff --git a/frontend/src/components/modals/EditItemModal.jsx b/frontend/src/components/modals/EditItemModal.jsx
index b56b236..a2c6339 100644
--- a/frontend/src/components/modals/EditItemModal.jsx
+++ b/frontend/src/components/modals/EditItemModal.jsx
@@ -4,7 +4,7 @@ import useActionToast from "../../hooks/useActionToast";
import "../../styles/components/EditItemModal.css";
import AddImageModal from "./AddImageModal";
-export default function EditItemModal({ item, onSave, onCancel, onImageUpdate }) {
+export default function EditItemModal({ item, zones = [], onSave, onCancel, onImageUpdate }) {
const toast = useActionToast();
const [itemName, setItemName] = useState(item.item_name || "");
const [quantity, setQuantity] = useState(item.quantity || 1);
@@ -89,6 +89,9 @@ export default function EditItemModal({ item, onSave, onCancel, onImageUpdate })
};
const availableGroups = itemType ? (ITEM_GROUPS[itemType] || []) : [];
+ const zoneOptions = Array.isArray(zones) && zones.length > 0
+ ? zones.map((candidateZone) => candidateZone.name || candidateZone).filter(Boolean)
+ : getZoneValues();
return (
@@ -172,7 +175,7 @@ export default function EditItemModal({ item, onSave, onCancel, onImageUpdate })
className="edit-modal-select"
>
-- Select Zone --
- {getZoneValues().map((candidateZone) => (
+ {zoneOptions.map((candidateZone) => (
{candidateZone}
diff --git a/frontend/src/components/store/StoreTabs.jsx b/frontend/src/components/store/StoreTabs.jsx
index 4da17e3..59c6691 100644
--- a/frontend/src/components/store/StoreTabs.jsx
+++ b/frontend/src/components/store/StoreTabs.jsx
@@ -25,7 +25,7 @@ export default function StoreTabs() {
onClick={() => setActiveStore(store)}
disabled={loading}
>
- {store.name}
+ {store.display_name || store.name}
))}
diff --git a/frontend/src/context/HouseholdContext.jsx b/frontend/src/context/HouseholdContext.jsx
index cedda4f..9171bae 100644
--- a/frontend/src/context/HouseholdContext.jsx
+++ b/frontend/src/context/HouseholdContext.jsx
@@ -1,5 +1,6 @@
import { createContext, useCallback, useContext, useEffect, useState } from 'react';
import { createHousehold as createHouseholdApi, getUserHouseholds } from '../api/households';
+import { isTransientApiError } from '../api/offlineCache';
import { AuthContext } from './AuthContext';
const ACTIVE_HOUSEHOLD_STORAGE_KEY = 'activeHouseholdId';
@@ -43,9 +44,15 @@ export const HouseholdProvider = ({ children }) => {
}
} catch (err) {
console.error('[HouseholdContext] Failed to load households:', err);
- setError(err.response?.data?.message || 'Failed to load households');
- setHouseholds([]);
- clearActiveHousehold();
+ setError(
+ err.response?.data?.error?.message ||
+ err.response?.data?.message ||
+ 'Failed to load households'
+ );
+ if (!isTransientApiError(err)) {
+ setHouseholds([]);
+ clearActiveHousehold();
+ }
} finally {
setLoading(false);
setHasLoaded(true);
diff --git a/frontend/src/context/SettingsContext.jsx b/frontend/src/context/SettingsContext.jsx
index 59dcf90..d3ebf40 100644
--- a/frontend/src/context/SettingsContext.jsx
+++ b/frontend/src/context/SettingsContext.jsx
@@ -8,7 +8,6 @@ const DEFAULT_SETTINGS = {
compactView: false,
// List Display
- defaultSortMode: "zone",
showRecentlyBought: true,
recentlyBoughtCount: 10,
recentlyBoughtCollapsed: false,
@@ -22,6 +21,17 @@ const DEFAULT_SETTINGS = {
debugMode: false,
};
+const SETTINGS_KEYS = Object.keys(DEFAULT_SETTINGS);
+
+function normalizeSettings(savedSettings = {}) {
+ return SETTINGS_KEYS.reduce((normalized, key) => {
+ normalized[key] = Object.prototype.hasOwnProperty.call(savedSettings, key)
+ ? savedSettings[key]
+ : DEFAULT_SETTINGS[key];
+ return normalized;
+ }, {});
+}
+
export const SettingsContext = createContext({
settings: DEFAULT_SETTINGS,
@@ -48,7 +58,9 @@ export const SettingsProvider = ({ children }) => {
if (savedSettings) {
try {
const parsed = JSON.parse(savedSettings);
- setSettings({ ...DEFAULT_SETTINGS, ...parsed });
+ const normalized = normalizeSettings(parsed);
+ setSettings(normalized);
+ localStorage.setItem(storageKey, JSON.stringify(normalized));
} catch (error) {
console.error("Failed to parse settings:", error);
setSettings(DEFAULT_SETTINGS);
@@ -88,7 +100,7 @@ export const SettingsProvider = ({ children }) => {
const updateSettings = (newSettings) => {
if (!username) return;
- const updated = { ...settings, ...newSettings };
+ const updated = normalizeSettings({ ...settings, ...newSettings });
setSettings(updated);
const storageKey = `user_preferences_${username}`;
diff --git a/frontend/src/context/StoreContext.jsx b/frontend/src/context/StoreContext.jsx
index 5a97a03..26664e7 100644
--- a/frontend/src/context/StoreContext.jsx
+++ b/frontend/src/context/StoreContext.jsx
@@ -1,15 +1,19 @@
import { createContext, useContext, useEffect, useState } from 'react';
-import { getHouseholdStores } from '../api/stores';
+import { isTransientApiError } from '../api/offlineCache';
+import { getHouseholdStores, getLocationZones } from '../api/stores';
import { AuthContext } from './AuthContext';
import { HouseholdContext } from './HouseholdContext';
export const StoreContext = createContext({
stores: [],
activeStore: null,
+ zones: [],
loading: false,
+ zonesLoading: false,
error: null,
setActiveStore: () => { },
refreshStores: () => { },
+ refreshZones: () => { },
});
export const StoreProvider = ({ children }) => {
@@ -17,7 +21,9 @@ export const StoreProvider = ({ children }) => {
const { activeHousehold } = useContext(HouseholdContext);
const [stores, setStores] = useState([]);
const [activeStore, setActiveStoreState] = useState(null);
+ const [zones, setZones] = useState([]);
const [loading, setLoading] = useState(false);
+ const [zonesLoading, setZonesLoading] = useState(false);
const [error, setError] = useState(null);
// Load stores when household changes
@@ -28,6 +34,7 @@ export const StoreProvider = ({ children }) => {
// Clear state when logged out or no household
setStores([]);
setActiveStoreState(null);
+ setZones([]);
}
}, [token, activeHousehold?.id]);
@@ -40,7 +47,7 @@ export const StoreProvider = ({ children }) => {
const savedStoreId = localStorage.getItem(storageKey);
if (savedStoreId) {
- const store = stores.find(s => s.id === parseInt(savedStoreId));
+ const store = stores.find(s => String(s.id) === String(savedStoreId));
if (store) {
console.log('[StoreContext] Found saved store:', store);
setActiveStoreState(store);
@@ -55,6 +62,14 @@ export const StoreProvider = ({ children }) => {
localStorage.setItem(storageKey, defaultStore.id);
}, [stores, activeHousehold]);
+ useEffect(() => {
+ if (token && activeHousehold?.id && activeStore?.id) {
+ loadZones();
+ } else {
+ setZones([]);
+ }
+ }, [token, activeHousehold?.id, activeStore?.id]);
+
const loadStores = async () => {
if (!token || !activeHousehold) return;
@@ -67,8 +82,15 @@ export const StoreProvider = ({ children }) => {
setStores(response.data);
} catch (err) {
console.error('[StoreContext] Failed to load stores:', err);
- setError(err.response?.data?.message || 'Failed to load stores');
- setStores([]);
+ setError(
+ err.response?.data?.error?.message ||
+ err.response?.data?.message ||
+ 'Failed to load stores'
+ );
+ if (!isTransientApiError(err)) {
+ setStores([]);
+ setActiveStoreState(null);
+ }
} finally {
setLoading(false);
}
@@ -78,17 +100,37 @@ export const StoreProvider = ({ children }) => {
setActiveStoreState(store);
if (store && activeHousehold) {
const storageKey = `activeStoreId_${activeHousehold.id}`;
- localStorage.setItem(storageKey, store.id);
+ localStorage.setItem(storageKey, String(store.id));
+ }
+ };
+
+ const loadZones = async () => {
+ if (!token || !activeHousehold?.id || !activeStore?.id) return;
+
+ setZonesLoading(true);
+ try {
+ const response = await getLocationZones(activeHousehold.id, activeStore.id);
+ setZones(response.data?.zones || []);
+ } catch (err) {
+ console.error('[StoreContext] Failed to load zones:', err);
+ if (!isTransientApiError(err)) {
+ setZones([]);
+ }
+ } finally {
+ setZonesLoading(false);
}
};
const value = {
stores,
activeStore,
+ zones,
loading,
+ zonesLoading,
error,
setActiveStore,
refreshStores: loadStores,
+ refreshZones: loadZones,
};
return (
diff --git a/frontend/src/pages/GroceryList.jsx b/frontend/src/pages/GroceryList.jsx
index 20cad76..c0316fd 100644
--- a/frontend/src/pages/GroceryList.jsx
+++ b/frontend/src/pages/GroceryList.jsx
@@ -11,7 +11,7 @@ import {
updateItemWithClassification
} from "../api/list";
import { getHouseholdMembers } from "../api/households";
-import SortDropdown from "../components/common/SortDropdown";
+import ListSearchInput from "../components/common/ListSearchInput";
import AddItemForm from "../components/forms/AddItemForm";
import NoHouseholdState from "../components/household/NoHouseholdState";
import GroceryListItem from "../components/items/GroceryListItem";
@@ -33,40 +33,54 @@ import getApiErrorMessage from "../lib/getApiErrorMessage";
import "../styles/pages/GroceryList.css";
import { findSimilarItems } from "../utils/stringSimilarity";
-function sortItemsForMode(items, sortMode) {
+function sortItemsByZone(items) {
const sorted = [...items];
- if (sortMode === "az") sorted.sort((a, b) => a.item_name.localeCompare(b.item_name));
- if (sortMode === "za") sorted.sort((a, b) => b.item_name.localeCompare(a.item_name));
- if (sortMode === "qty-high") sorted.sort((a, b) => b.quantity - a.quantity);
- if (sortMode === "qty-low") sorted.sort((a, b) => a.quantity - b.quantity);
- if (sortMode === "zone") {
- sorted.sort((a, b) => {
- if (!a.zone && b.zone) return 1;
- if (a.zone && !b.zone) return -1;
- if (!a.zone && !b.zone) return a.item_name.localeCompare(b.item_name);
+ sorted.sort((a, b) => {
+ if (!a.zone && b.zone) return 1;
+ if (a.zone && !b.zone) return -1;
+ if (!a.zone && !b.zone) return a.item_name.localeCompare(b.item_name);
- const aZoneIndex = ZONE_FLOW.indexOf(a.zone);
- const bZoneIndex = ZONE_FLOW.indexOf(b.zone);
- const aIndex = aZoneIndex === -1 ? ZONE_FLOW.length : aZoneIndex;
- const bIndex = bZoneIndex === -1 ? ZONE_FLOW.length : bZoneIndex;
+ const aZoneIndex = Number.isInteger(a.zone_sort_order) ? a.zone_sort_order : ZONE_FLOW.indexOf(a.zone);
+ const bZoneIndex = Number.isInteger(b.zone_sort_order) ? b.zone_sort_order : ZONE_FLOW.indexOf(b.zone);
+ const aIndex = aZoneIndex === -1 ? ZONE_FLOW.length : aZoneIndex;
+ const bIndex = bZoneIndex === -1 ? ZONE_FLOW.length : bZoneIndex;
- const zoneCompare = aIndex - bIndex;
- if (zoneCompare !== 0) return zoneCompare;
+ const zoneCompare = aIndex - bIndex;
+ if (zoneCompare !== 0) return zoneCompare;
- const typeCompare = (a.item_type || "").localeCompare(b.item_type || "");
- if (typeCompare !== 0) return typeCompare;
+ const typeCompare = (a.item_type || "").localeCompare(b.item_type || "");
+ if (typeCompare !== 0) return typeCompare;
- const groupCompare = (a.item_group || "").localeCompare(b.item_group || "");
- if (groupCompare !== 0) return groupCompare;
+ const groupCompare = (a.item_group || "").localeCompare(b.item_group || "");
+ if (groupCompare !== 0) return groupCompare;
- return a.item_name.localeCompare(b.item_name);
- });
- }
+ return a.item_name.localeCompare(b.item_name);
+ });
return sorted;
}
+function getSearchableItemText(item) {
+ return [
+ item.item_name,
+ item.item_type,
+ item.item_group,
+ item.zone,
+ ...(Array.isArray(item.added_by_users) ? item.added_by_users : []),
+ ]
+ .filter(Boolean)
+ .join(" ")
+ .toLowerCase();
+}
+
+function filterItemsForSearch(items, query) {
+ const normalizedQuery = query.trim().toLowerCase();
+ if (!normalizedQuery) return items;
+
+ return items.filter((item) => getSearchableItemText(item).includes(normalizedQuery));
+}
+
function getNextModalItem(sortedItems, currentIndex, excludedItemId) {
const remainingItems = sortedItems.filter((item) => item.id !== excludedItemId);
@@ -79,7 +93,6 @@ function getNextModalItem(sortedItems, currentIndex, excludedItemId) {
export default function GroceryList() {
- const pageTitle = "Grocery List";
const { userId } = useContext(AuthContext);
const {
activeHousehold,
@@ -87,7 +100,7 @@ export default function GroceryList() {
loading: householdLoading,
hasLoaded: householdsLoaded
} = useContext(HouseholdContext);
- const { activeStore, stores, loading: storeLoading } = useContext(StoreContext);
+ const { activeStore, stores, zones, loading: storeLoading } = useContext(StoreContext);
const { settings } = useContext(SettingsContext);
const toast = useActionToast();
const { enqueueImageUpload } = useUploadQueue();
@@ -103,7 +116,7 @@ export default function GroceryList() {
const [recentlyBoughtItems, setRecentlyBoughtItems] = useState([]);
const [householdMembers, setHouseholdMembers] = useState([]);
const [recentlyBoughtDisplayCount, setRecentlyBoughtDisplayCount] = useState(settings.recentlyBoughtCount);
- const [sortMode, setSortMode] = useState(settings.defaultSortMode);
+ const [listSearchQuery, setListSearchQuery] = useState("");
const [suggestions, setSuggestions] = useState([]);
const [loading, setLoading] = useState(true);
const [buttonText, setButtonText] = useState("Add Item");
@@ -238,10 +251,13 @@ export default function GroceryList() {
}));
};
- // === Sorted Items Computation ===
+ // === Visible Items Computation ===
+ const normalizedListSearchQuery = listSearchQuery.trim().toLowerCase();
+ const isListSearchActive = normalizedListSearchQuery.length > 0;
+
const sortedItems = useMemo(() => {
- return sortItemsForMode(items, sortMode);
- }, [items, sortMode]);
+ return sortItemsByZone(filterItemsForSearch(items, normalizedListSearchQuery));
+ }, [items, normalizedListSearchQuery]);
const visibleRecentlyBoughtItems = useMemo(
() => recentlyBoughtItems.slice(0, recentlyBoughtDisplayCount),
@@ -538,45 +554,9 @@ export default function GroceryList() {
}
}, [activeHousehold?.id, activeStore?.id, pendingItem, enqueueImageUpload, toast]);
- const handleAddDetailsSkip = useCallback(async () => {
- if (!pendingItem) return;
- if (!activeHousehold?.id || !activeStore?.id) return;
-
- try {
- await addItem(
- activeHousehold.id,
- activeStore.id,
- pendingItem.itemName,
- pendingItem.quantity,
- null,
- null,
- pendingItem.addedForUserId || null
- );
-
- // Fetch the newly added item
- const itemResponse = await getItemByName(activeHousehold.id, activeStore.id, pendingItem.itemName);
- const newItem = itemResponse.data;
-
- setShowAddDetailsModal(false);
- setPendingItem(null);
- setSuggestions([]);
- setButtonText("Add Item");
-
- if (newItem) {
- setItems(prevItems => [...prevItems, newItem]);
- toast.success("Added item", `Added item ${newItem.item_name || pendingItem.itemName}`);
- }
- } catch (error) {
- console.error("Failed to add item:", error);
- const message = getApiErrorMessage(error, "Failed to add item");
- toast.error("Add item failed", `Add item failed: ${message}`);
- }
- }, [activeHousehold?.id, activeStore?.id, pendingItem, toast]);
-
-
- const handleAddDetailsCancel = useCallback(() => {
- setShowAddDetailsModal(false);
- setPendingItem(null);
+ const handleAddDetailsCancel = useCallback(() => {
+ setShowAddDetailsModal(false);
+ setPendingItem(null);
setSuggestions([]);
setButtonText("Add Item");
}, []);
@@ -614,7 +594,9 @@ export default function GroceryList() {
setItems(nextItems);
- const nextSortedItems = sortItemsForMode(nextItems, sortMode);
+ const nextSortedItems = sortItemsByZone(
+ filterItemsForSearch(nextItems, normalizedListSearchQuery)
+ );
const nextModalItem = getNextModalItem(nextSortedItems, resolvedIndex, item.id);
setBuyModalState(
@@ -633,7 +615,7 @@ export default function GroceryList() {
const message = getApiErrorMessage(error, "Failed to mark item as bought");
toast.error("Mark item bought failed", `Mark item bought failed: ${message}`);
}
- }, [activeHousehold?.id, activeStore?.id, buyModalState, items, sortMode, sortedItems, toast]);
+ }, [activeHousehold?.id, activeStore?.id, buyModalState, items, normalizedListSearchQuery, sortedItems, toast]);
const openActiveBuyModal = useCallback((item) => {
setBuyModalState({
@@ -772,7 +754,6 @@ export default function GroceryList() {
return (
-
{pageTitle}
Loading households...
@@ -785,7 +766,6 @@ export default function GroceryList() {
return (
@@ -796,8 +776,7 @@ export default function GroceryList() {
return (
-
{pageTitle}
-
+
Loading stores...
@@ -809,8 +788,7 @@ export default function GroceryList() {
return (
-
{pageTitle}
-
+
No stores found
This household doesnβt have any stores yet.
@@ -837,8 +815,7 @@ export default function GroceryList() {
return (
-
{pageTitle}
-
+
Loading stores...
@@ -851,8 +828,7 @@ export default function GroceryList() {
return (
-
{pageTitle}
-
+
Loading grocery list...
@@ -863,9 +839,7 @@ export default function GroceryList() {
return (
-
{pageTitle}
-
-
+
{canEditList && (
)}
-
-
- {sortMode === "zone" ? (
+
+
+ {sortedItems.length === 0 ? (
+
+ {isListSearchActive
+ ? `No list items match "${listSearchQuery.trim()}".`
+ : "No items in this store yet."}
+
+ ) : (
(() => {
const grouped = groupItemsByZone(sortedItems);
return Object.keys(grouped).map(zone => {
- const isCollapsed = collapsedZones[zone];
+ const isCollapsed = isListSearchActive ? false : collapsedZones[zone];
const itemCount = grouped[zone].length;
return (
@@ -923,25 +908,7 @@ export default function GroceryList() {
);
});
})()
- ) : (
-
- {sortedItems.map((item) => (
-
- )}
+ )}
{recentlyBoughtItems.length > 0 && settings.showRecentlyBought && (
<>
@@ -992,11 +959,11 @@ export default function GroceryList() {
{showAddDetailsModal && pendingItem && (
+ itemName={pendingItem.itemName}
+ zones={zones}
+ onConfirm={handleAddWithDetails}
+ onCancel={handleAddDetailsCancel}
+ />
)}
{showSimilarModal && similarItemSuggestion && (
@@ -1012,8 +979,9 @@ export default function GroceryList() {
{showEditModal && editingItem && (
)}
diff --git a/frontend/src/pages/Settings.jsx b/frontend/src/pages/Settings.jsx
index d4fa7cc..4f28963 100644
--- a/frontend/src/pages/Settings.jsx
+++ b/frontend/src/pages/Settings.jsx
@@ -137,12 +137,6 @@ export default function Settings() {
updateSettings({ [key]: parseInt(value, 10) });
};
-
- const handleSelectChange = (key, value) => {
- updateSettings({ [key]: value });
- };
-
-
const handleReset = () => {
if (window.confirm("Reset all settings to defaults?")) {
resetSettings();
@@ -252,24 +246,6 @@ export default function Settings() {
List Display
-
-
Default Sort Mode
-
handleSelectChange("defaultSortMode", e.target.value)}
- className="form-select mt-2"
- >
- By Zone
- A β Z
- Z β A
- Quantity: High β Low
- Quantity: Low β High
-
-
- Your preferred sorting method when opening the list
-
-
-