feat: add Addons

app/items/page.tsx

@@ -6,12 +6,13 @@ import { useInventoryStore } from '@/store/useInventoryStore';
 import shared from '../../styles/shared.module.css';
 import styles from '../../styles/Items.module.css';
 
-import { Item, Offering } from './types';
-import { fetchItems, fetchOfferings } from '../../lib/db';
+import { Item, Offering, Addon } from './types';
+import { fetchItems, fetchOfferings, fetchAddons } from '../../lib/db';
 import ItemGrid from './ItemGrid';
 import OfferingGrid from './OfferingGrid';
+import AddonGrid from './AddonGrid';
 
-type Tab = 'items' | 'offerings';
+type Tab = 'items' | 'offerings' | 'addons';
 
 export default function ItemsPage() {
     const store = useInventoryStore();
@@ -19,25 +20,29 @@ export default function ItemsPage() {
     const [tab, setTab] = useState<Tab>('items');
     const [items, setItems] = useState<Item[]>([]);
     const [offerings, setOfferings] = useState<Offering[]>([]);
+    const [addons, setAddons] = useState<Addon[]>([]);
 
     const [randMin, setRandMin] = useState(50);
     const [randMax, setRandMax] = useState(200);
 
     useEffect(() => {
-        Promise.all([fetchItems(), fetchOfferings()])
-            .then(([i, o]) => {
+        Promise.all([fetchItems(), fetchOfferings(), fetchAddons()])
+            .then(([i, o, a]) => {
                 setItems(i);
                 setOfferings(o);
+                setAddons(a);
             });
     }, []);
 
     const handleClearAll = () => {
         store.clearCategory('items');
         store.clearCategory('offerings');
+        store.clearCategory('addons');
     };
 
     const activeItems = Object.values(store.items).filter(q => q > 0).length;
     const activeOfferings = Object.values(store.offerings).filter(q => q > 0).length;
+    const activeAddons = Object.values(store.addons).filter(q => q > 0).length;
 
     return (
         <div className={shared.container}>
@@ -45,7 +50,7 @@ export default function ItemsPage() {
                 <div>
                     <h1 className={shared.title}>Items & Offerings</h1>
                     <p className={shared.subtitle}>
-                        {activeItems} active items · {activeOfferings} active offerings
+                        {activeItems} items · {activeOfferings} offerings · {activeAddons} addons
                     </p>
                 </div>
 
@@ -74,7 +79,7 @@ export default function ItemsPage() {
             </header>
 
             <div className={styles.tabs}>
-                {(['items', 'offerings'] as Tab[]).map(t => (
+                {(['items', 'offerings', 'addons'] as Tab[]).map(t => (
                     <button
                         key={t}
                         className={`${styles.tab} ${tab === t ? styles.tabActive : ''}`}
@@ -104,6 +109,16 @@ export default function ItemsPage() {
                     onSetQty={store.setOfferingQuantity}
                 />
             )}
+
+            {tab === 'addons' && (
+                <AddonGrid
+                    addons={addons}
+                    quantities={store.addons}
+                    randMin={randMin}
+                    randMax={randMax}
+                    onSetQty={store.setAddonQuantity}
+                />
+            )}
         </div>
     );
 }