[V0_FILE]typescriptreact:file="components/layout.tsx" isMerged="true" "use client" import type React from "react" import { View, SafeAreaView, StatusBar, useColorScheme } from "react-native" import { useTheme } from "@/context/theme-context" interface LayoutProps { children: React.ReactNode } export function Layout({ children }: LayoutProps) { const { theme } = useTheme() const systemColorScheme = useColorScheme() const isDark = theme === "dark" || (theme === "system" && systemColorScheme === "dark") return ( {children} ) } [V0_FILE]typescriptreact:file="components/header.tsx" isMerged="true" "use client" import { View, Text, TouchableOpacity } from "react-native" import { useRouter } from "expo-router" import { ChevronLeft, Bell } from "lucide-react-native" interface HeaderProps { title: string showBack?: boolean showNotification?: boolean onNotificationPress?: () => void } export function Header({ title, showBack = false, showNotification = true, onNotificationPress }: HeaderProps) { const router = useRouter() return ( {showBack && ( router.back()} className="mr-2"> )} {title} {showNotification && ( )} ) } [V0_FILE]typescriptreact:file="components/ui/button.tsx" isMerged="true" import type React from "react" import { TouchableOpacity, Text, ActivityIndicator, type TouchableOpacityProps, View } from "react-native" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/utils/cn" const buttonVariants = cva("flex-row items-center justify-center rounded-md", { variants: { variant: { default: "bg-primary", destructive: "bg-destructive", outline: "border border-border bg-background", secondary: "bg-secondary", ghost: "bg-transparent", link: "bg-transparent underline-offset-4", }, size: { default: "h-12 px-4 py-2", sm: "h-9 px-3", lg: "h-14 px-8", icon: "h-10 w-10", }, }, defaultVariants: { variant: "default", size: "default", }, }) const buttonTextVariants = cva("font-medium text-center", { variants: { variant: { default: "text-primary-foreground", destructive: "text-destructive-foreground", outline: "text-foreground", secondary: "text-secondary-foreground", ghost: "text-foreground", link: "text-primary underline", }, size: { default: "text-base", sm: "text-sm", lg: "text-lg", icon: "text-base", }, }, defaultVariants: { variant: "default", size: "default", }, }) interface ButtonProps extends TouchableOpacityProps, VariantProps { isLoading?: boolean loadingText?: string leftIcon?: React.ReactNode rightIcon?: React.ReactNode } export function Button({ children, className, variant, size, isLoading, loadingText, leftIcon, rightIcon, disabled, ...props }: ButtonProps) { return ( {isLoading ? ( {loadingText && {loadingText}} ) : ( <> {leftIcon && {leftIcon}} {typeof children === "string" ? ( {children} ) : ( children )} {rightIcon && {rightIcon}} )} ) } [V0_FILE]typescriptreact:file="components/ui/input.tsx" isMerged="true" import type React from "react" import { View, Text, TextInput, type TextInputProps } from "react-native" import { cn } from "@/utils/cn" import { forwardRef } from "react" interface InputProps extends TextInputProps { label?: string error?: string leftIcon?: React.ReactNode rightIcon?: React.ReactNode } export const Input = forwardRef( ({ label, error, leftIcon, rightIcon, className, ...props }, ref) => { return ( {label && {label}} {leftIcon && {leftIcon}} {rightIcon && {rightIcon}} {error && {error}} ) }, ) [V0_FILE]typescriptreact:file="components/ui/card.tsx" isFixed="true" isQuickEdit="true" isMerged="true" import * as React from "react" import { cn } from "@/lib/utils" const Card = React.forwardRef>(({ className, ...props }, ref) => (

)) Card.displayName = "Card" const CardHeader = React.forwardRef>( ({ className, ...props }, ref) => (

), ) CardHeader.displayName = "CardHeader" const CardTitle = React.forwardRef>( ({ className, ...props }, ref) => (

), ) CardTitle.displayName = "CardTitle" const CardDescription = React.forwardRef>( ({ className, ...props }, ref) => (

), ) CardDescription.displayName = "CardDescription" const CardContent = React.forwardRef>( ({ className, ...props }, ref) =>

, ) CardContent.displayName = "CardContent" const CardFooter = React.forwardRef>( ({ className, ...props }, ref) => (

), ) CardFooter.displayName = "CardFooter" export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent } [V0_FILE]typescriptreact:file="components/ui/modal.tsx" isMerged="true" import type React from "react" import { View, Text, Modal as RNModal, TouchableOpacity, Pressable } from "react-native" import { X } from "lucide-react-native" interface ModalProps { visible: boolean onClose: () => void title?: string children: React.ReactNode } export function Modal({ visible, onClose, title, children }: ModalProps) { return ( e.stopPropagation()}> {title && ( {title} )} {children} ) } [V0_FILE]typescriptreact:file="components/ui/loader.tsx" isMerged="true" import { ActivityIndicator, View, Text } from "react-native" interface LoaderProps { size?: "small" | "large" text?: string } export function Loader({ size = "small", text }: LoaderProps) { return ( {text && {text}} ) } [V0_FILE]typescriptreact:file="utils/cn.ts" isMerged="true" import { type ClassValue, clsx } from "clsx" import { twMerge } from "tailwind-merge" export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)) } [V0_FILE]typescriptreact:file="tailwind.config.js" isFixed="true" isQuickEdit="true" isMerged="true" /** @type {import('tailwindcss').Config} */ module.exports = { darkMode: ["class"], content: ["./app/**/*.{js,jsx,ts,tsx}", "./components/**/*.{js,jsx,ts,tsx}", "*.{js,ts,jsx,tsx,mdx}"], theme: { extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, }, }, plugins: [require("tailwindcss-animate")], } [V0_FILE]typescriptreact:file="app.tsx" isMerged="true" "use client" import "react-native-reanimated" import { useColorScheme } from "react-native" import { useEffect } from "react" import { Slot } from "expo-router" import { GestureHandlerRootView } from "react-native-gesture-handler" import { StatusBar } from "expo-status-bar" import { useFonts } from "expo-font" import * as SplashScreen from "expo-splash-screen" import { ToastProvider } from "react-native-toast-notifications" import "./global.css" // Keep the splash screen visible while we fetch resources SplashScreen.preventAutoHideAsync() export default function RootLayout() { const colorScheme = useColorScheme() const [fontsLoaded] = useFonts({ "Inter-Regular": require("./assets/fonts/Inter-Regular.ttf"), "Inter-Medium": require("./assets/fonts/Inter-Medium.ttf"), "Inter-SemiBold": require("./assets/fonts/Inter-SemiBold.ttf"), "Inter-Bold": require("./assets/fonts/Inter-Bold.ttf"), }) useEffect(() => { if (fontsLoaded) { SplashScreen.hideAsync() } }, [fontsLoaded]) if (!fontsLoaded) { return null } return ( ) } [V0_FILE]css:file="global.css" isMerged="true" @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --background: #ffffff; --foreground: #0f172a; --card: #ffffff; --card-foreground: #0f172a; --popover: #ffffff; --popover-foreground: #0f172a; --primary: #2563eb; --primary-foreground: #ffffff; --secondary: #f1f5f9; --secondary-foreground: #0f172a; --muted: #f1f5f9; --muted-foreground: #64748b; --accent: #f1f5f9; --accent-foreground: #0f172a; --destructive: #ef4444; --destructive-foreground: #ffffff; --border: #e2e8f0; --input: #f8fafc; --ring: #94a3b8; } .dark { --background: #0f172a; --foreground: #f8fafc; --card: #1e293b; --card-foreground: #f8fafc; --popover: #1e293b; --popover-foreground: #f8fafc; --primary: #3b82f6; --primary-foreground: #ffffff; --secondary: #1e293b; --secondary-foreground: #f8fafc; --muted: #1e293b; --muted-foreground: #94a3b8; --accent: #1e293b; --accent-foreground: #f8fafc; --destructive: #ef4444; --destructive-foreground: #f8fafc; --border: #334155; --input: #1e293b; --ring: #1e293b; } } [V0_FILE]typescriptreact:file="app/page.tsx" isQuickEdit="true" isMerged="true" import { Dashboard } from "./(tabs)/dashboard.tsx" export default function Page() { return } [V0_FILE]typescriptreact:file="app/_layout.tsx" isEdit="true" isMerged="true" "use client" import { useEffect } from "react" import { useColorScheme } from "react-native" import { SplashScreen, Stack } from "expo-router" import { useFonts } from "expo-font" import { StatusBar } from "expo-status-bar" import { AuthProvider } from "@/context/auth-context" import { ThemeProvider } from "@/context/theme-context" import Toast from "react-native-toast-message" // Prevent the splash screen from auto-hiding SplashScreen.preventAutoHideAsync() export default function RootLayout() { const colorScheme = useColorScheme() const [fontsLoaded] = useFonts({ "Inter-Regular": require("@/assets/fonts/Inter-Regular.ttf"), "Inter-Medium": require("@/assets/fonts/Inter-Medium.ttf"), "Inter-SemiBold": require("@/assets/fonts/Inter-SemiBold.ttf"), "Inter-Bold": require("@/assets/fonts/Inter-Bold.ttf"), }) useEffect(() => { if (fontsLoaded) { SplashScreen.hideAsync() } }, [fontsLoaded]) if (!fontsLoaded) { return null } return ( ) } [V0_FILE]typescriptreact:file="app/index.tsx" isEdit="true" isMerged="true" "use client" import { Redirect } from "expo-router" import { useAuth } from "@/context/auth-context" import { Loader } from "@/components/Loader" import { View } from "react-native" export default function Index() { const { isAuthenticated, isLoading } = useAuth() if (isLoading) { return ( ) } if (isAuthenticated) { return } return } [V0_FILE]typescriptreact:file="app/auth/_layout.tsx" isEdit="true" isMerged="true" import { Stack } from "expo-router" export default function AuthLayout() { return } [V0_FILE]typescriptreact:file="app/auth/login.tsx" isEdit="true" isMerged="true" "use client" import { useState } from "react" import { View, Text, TouchableOpacity, KeyboardAvoidingView, Platform, ScrollView, StyleSheet } from "react-native" import { Link, useRouter } from "expo-router" import { useAuth } from "@/context/auth-context" import { Layout } from "@/components/Layout" import { Input } from "@/components/Input" import { Button } from "@/components/Button" import { Mail, Lock, Eye, EyeOff } from "lucide-react-native" import Toast from "react-native-toast-message" import { useForm, Controller } from "react-hook-form" import { z } from "zod" import { zodResolver } from "@hookform/resolvers/zod" import { useTheme } from "@/context/theme-context" const loginSchema = z.object({ email: z.string().email("Please enter a valid email"), password: z.string().min(6, "Password must be at least 6 characters"), }) type LoginFormData = z.infer export default function Login() { const [showPassword, setShowPassword] = useState(false) const [isLoading, setIsLoading] = useState(false) const { signIn } = useAuth() const router = useRouter() const { colors } = useTheme() const { control, handleSubmit, formState: { errors }, } = useForm({ resolver: zodResolver(loginSchema), defaultValues: { email: "", password: "", }, }) const onSubmit = async (data: LoginFormData) => { try { setIsLoading(true) await signIn(data.email, data.password) router.replace("/(tabs)/dashboard") } catch (error) { Toast.show({ type: "error", text1: "Login Failed", text2: "Invalid email or password", }) } finally { setIsLoading(false) } } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: "center", paddingHorizontal: 24, paddingVertical: 48, }, headerContainer: { marginBottom: 32, }, title: { fontSize: 28, fontWeight: "bold", color: colors.text, marginBottom: 8, }, subtitle: { color: colors.textSecondary, fontSize: 16, }, formContainer: { gap: 16, }, forgotPassword: { color: colors.primary, textAlign: "right", }, button: { marginTop: 24, }, footer: { flexDirection: "row", justifyContent: "center", marginTop: 32, }, footerText: { color: colors.textSecondary, }, footerLink: { color: colors.primary, fontWeight: "500", }, }) return ( Welcome back Sign in to your account to continue ( } /> )} /> ( } rightIcon={ setShowPassword(!showPassword)}> {showPassword ? ( ) : ( )} } /> )} /> Forgot password?