3b471df8d5
- Add Lucide React Native icon library and use across tabs and screens
- Mobile-like design: rounded cards (xl/2xl), section dividers, icon chips, chevrons
- New pages from swagger: register, invoices/[id], reports, documents, settings
- Invoice detail: amount, bill to, items, Share/PDF actions (GET /invoices/{id})
- Register screen with link to login (POST /auth/register)
- Reports list with mock data and download (GET /reports)
- Documents list with upload CTA (GET /documents)
- Settings: notifications link, language, about
- Profile: links to Notifications, Reports, Documents, Settings
- Home: invoice rows navigate to /invoices/[id]
- Login ↔ Register navigation
- Keep orange (#ea580c) and dark navbar (#2d2d2d) theme throughout
- README: update screens table with new routes
Co-authored-by: Cursor <cursoragent@cursor.com>
65 lines
1.9 KiB
TypeScript
65 lines
1.9 KiB
TypeScript
import { Tabs } from 'expo-router';
|
|
import { Home, ScanLine, FileText, Wallet, User } from '@/lib/icons';
|
|
|
|
const NAV_BG = '#2d2d2d';
|
|
const ACTIVE_TINT = '#ea580c';
|
|
const INACTIVE_TINT = '#a1a1aa';
|
|
|
|
export default function TabsLayout() {
|
|
return (
|
|
<Tabs
|
|
screenOptions={{
|
|
headerStyle: { backgroundColor: NAV_BG },
|
|
headerTintColor: '#ffffff',
|
|
headerTitleStyle: { fontWeight: '600', fontSize: 18 },
|
|
tabBarStyle: { backgroundColor: NAV_BG, paddingTop: 8 },
|
|
tabBarActiveTintColor: ACTIVE_TINT,
|
|
tabBarInactiveTintColor: INACTIVE_TINT,
|
|
tabBarLabelStyle: { fontSize: 11 },
|
|
tabBarShowLabel: true,
|
|
}}
|
|
>
|
|
<Tabs.Screen
|
|
name="index"
|
|
options={{
|
|
title: 'Home',
|
|
tabBarLabel: 'Home',
|
|
tabBarIcon: ({ color, size }) => <Home color={color} size={size ?? 22} strokeWidth={2} />,
|
|
}}
|
|
/>
|
|
<Tabs.Screen
|
|
name="scan"
|
|
options={{
|
|
title: 'Scan Invoice',
|
|
tabBarLabel: 'Scan',
|
|
tabBarIcon: ({ color, size }) => <ScanLine color={color} size={size ?? 22} strokeWidth={2} />,
|
|
}}
|
|
/>
|
|
<Tabs.Screen
|
|
name="proforma"
|
|
options={{
|
|
title: 'Proforma',
|
|
tabBarLabel: 'Proforma',
|
|
tabBarIcon: ({ color, size }) => <FileText color={color} size={size ?? 22} strokeWidth={2} />,
|
|
}}
|
|
/>
|
|
<Tabs.Screen
|
|
name="payments"
|
|
options={{
|
|
title: 'Payments',
|
|
tabBarLabel: 'Payments',
|
|
tabBarIcon: ({ color, size }) => <Wallet color={color} size={size ?? 22} strokeWidth={2} />,
|
|
}}
|
|
/>
|
|
<Tabs.Screen
|
|
name="profile"
|
|
options={{
|
|
title: 'Profile',
|
|
tabBarLabel: 'Profile',
|
|
tabBarIcon: ({ color, size }) => <User color={color} size={size ?? 22} strokeWidth={2} />,
|
|
}}
|
|
/>
|
|
</Tabs>
|
|
);
|
|
}
|