diff --git a/src/AppRoot.js b/src/AppRoot.js index 17da674..a471180 100644 --- a/src/AppRoot.js +++ b/src/AppRoot.js @@ -727,6 +727,14 @@ export default function AppRoot() { }, 80); } + function openQuickAddItemFromNav() { + if (!selectedTripId) { + showAlert('No trip selected', 'Please select or create a trip first.'); + return; + } + openAddItemModal(); + } + if (!loaded) { return ( @@ -817,7 +825,7 @@ export default function AppRoot() { - + onChange(tab.key)} style={styles.tabItem}> + + {tab.label} + + ); +} + +export default function BottomTab({ current, onChange, onAddItem, canAddItem }) { + const leftTabs = [ { key: 'trips', label: 'Trips', icon: 'airplane-outline', iconActive: 'airplane' }, { key: 'items', label: 'Items', icon: 'briefcase-outline', iconActive: 'briefcase' }, + ]; + + const rightTabs = [ { key: 'checkup', label: 'Check-Up', icon: 'checkmark-circle-outline', iconActive: 'checkmark-circle' }, { key: 'history', label: 'History', icon: 'time-outline', iconActive: 'time' }, ]; @@ -14,19 +27,25 @@ export default function BottomTab({ current, onChange }) { return ( - {tabs.map((tab) => { - const active = current === tab.key; - return ( - onChange(tab.key)} style={styles.tabItem}> - - {tab.label} - - ); - })} + + {leftTabs.map((tab) => ( + + ))} + + + + + + + + {rightTabs.map((tab) => ( + + ))} + ); diff --git a/src/styles.js b/src/styles.js index d962a72..cef8724 100644 --- a/src/styles.js +++ b/src/styles.js @@ -462,13 +462,34 @@ export const styles = StyleSheet.create({ borderColor: '#1f2937', flexDirection: 'row', alignItems: 'center', + justifyContent: 'space-between', + paddingHorizontal: 8, + }, + tabGroupSide: { + flexDirection: 'row', + width: '42%', justifyContent: 'space-around', + alignItems: 'center', }, tabItem: { alignItems: 'center', justifyContent: 'center', gap: 4, - minWidth: 62, + minWidth: 58, + }, + tabAddBtn: { + width: 54, + height: 54, + borderRadius: 999, + alignItems: 'center', + justifyContent: 'center', + backgroundColor: '#2563eb', + marginTop: -24, + borderWidth: 2, + borderColor: '#0b1220', + }, + tabAddBtnDisabled: { + opacity: 0.45, }, tabLabel: { color: '#94a3b8',