- 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>
41 lines
1.9 KiB
TypeScript
41 lines
1.9 KiB
TypeScript
import { View, ScrollView, Pressable } from 'react-native';
|
|
import { router } from 'expo-router';
|
|
import { Text } from '@/components/ui/text';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
|
|
import { Mail, ArrowLeft, UserPlus } from '@/lib/icons';
|
|
|
|
export default function RegisterScreen() {
|
|
return (
|
|
<ScrollView
|
|
className="flex-1 bg-[#f5f5f5]"
|
|
contentContainerStyle={{ padding: 24, paddingVertical: 48 }}
|
|
showsVerticalScrollIndicator={false}
|
|
>
|
|
<Text className="mb-8 text-center text-2xl font-bold text-gray-900">Yaltopia Tickets</Text>
|
|
<Card className="mb-5 overflow-hidden rounded-2xl border border-border bg-white">
|
|
<CardHeader>
|
|
<CardTitle className="text-lg">Create account</CardTitle>
|
|
<CardDescription className="mt-1">Register with the same account format as the web app.</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="gap-3">
|
|
<Button className="min-h-12 rounded-xl bg-primary">
|
|
<UserPlus color="#ffffff" size={20} strokeWidth={2} />
|
|
<Text className="ml-2 text-primary-foreground font-medium">Email & password</Text>
|
|
</Button>
|
|
<Button variant="outline" className="min-h-12 rounded-xl border-border">
|
|
<Text className="font-medium text-gray-700">Continue with Google</Text>
|
|
</Button>
|
|
</CardContent>
|
|
</Card>
|
|
<Pressable onPress={() => router.push('/login')} className="mt-2">
|
|
<Text className="text-center text-primary font-medium">Already have an account? Sign in</Text>
|
|
</Pressable>
|
|
<Button variant="ghost" className="mt-4 rounded-xl" onPress={() => router.back()}>
|
|
<ArrowLeft color="#71717a" size={20} strokeWidth={2} />
|
|
<Text className="ml-2 font-medium text-muted-foreground">Back</Text>
|
|
</Button>
|
|
</ScrollView>
|
|
);
|
|
}
|