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>
39 lines
1.8 KiB
TypeScript
39 lines
1.8 KiB
TypeScript
import { View, ScrollView, Pressable } from 'react-native';
|
|
import { router } from 'expo-router';
|
|
import { Text } from '@/components/ui/text';
|
|
import { Card, CardContent } from '@/components/ui/card';
|
|
import { Bell, Settings, ChevronRight } from '@/lib/icons';
|
|
|
|
const MOCK_NOTIFICATIONS = [
|
|
{ id: '1', title: 'Invoice reminder', body: 'Invoice #2 to Robin Murray is due in 2 days.', time: '2h ago', read: false },
|
|
{ id: '2', title: 'Payment received', body: 'Payment of $500 received for Invoice #4.', time: '1d ago', read: true },
|
|
{ id: '3', title: 'Proforma submission', body: 'Vendor A submitted a quote for Marketing Landing Page.', time: '2d ago', read: true },
|
|
];
|
|
|
|
export default function NotificationsScreen() {
|
|
return (
|
|
<ScrollView className="flex-1 bg-background" contentContainerStyle={{ padding: 16, paddingBottom: 32 }}>
|
|
<View className="mb-4 flex-row items-center justify-between">
|
|
<View className="flex-row items-center gap-2">
|
|
<Bell color="#18181b" size={22} strokeWidth={2} />
|
|
<Text className="text-xl font-semibold text-gray-900">Notifications</Text>
|
|
</View>
|
|
<Pressable className="flex-row items-center gap-1" onPress={() => router.push('/notifications/settings')}>
|
|
<Settings color="#ea580c" size={18} strokeWidth={2} />
|
|
<Text className="text-primary font-medium">Settings</Text>
|
|
</Pressable>
|
|
</View>
|
|
|
|
{MOCK_NOTIFICATIONS.map((n) => (
|
|
<Card key={n.id} className={`mb-2 ${!n.read ? 'border-primary/30' : ''}`}>
|
|
<CardContent className="py-3">
|
|
<Text className="font-semibold text-gray-900">{n.title}</Text>
|
|
<Text className="text-muted-foreground mt-1 text-sm">{n.body}</Text>
|
|
<Text className="text-muted-foreground mt-1 text-xs">{n.time}</Text>
|
|
</CardContent>
|
|
</Card>
|
|
))}
|
|
</ScrollView>
|
|
);
|
|
}
|