[V0_FILE]typescriptreact:file="app/api/vipps/payment-request/route.ts" isMerged="true" import { type NextRequest, NextResponse } from "next/server" // This is a mock implementation. In a real app, you would: // 1. Set up proper Vipps PSP API credentials // 2. Implement proper authentication and validation // 3. Handle webhooks for payment status updates // 4. Store payment requests in a database export async function POST(request: NextRequest) { try { const { phoneNumber, amount, message } = await request.json() // Validate input if (!phoneNumber || !amount || amount <= 0) { return NextResponse.json({ error: "Invalid payment request data" }, { status: 400 }) } // In a real implementation, you would: // 1. Call Vipps PSP API to create payment request // 2. Handle the response and store the transaction // 3. Return the payment URL or transaction ID // Mock Vipps API call const vippsResponse = await mockVippsApiCall({ phoneNumber, amount, message, }) return NextResponse.json({ success: true, transactionId: vippsResponse.transactionId, status: "INITIATED", }) } catch (error) { console.error("Vipps payment request error:", error) return NextResponse.json({ error: "Failed to process payment request" }, { status: 500 }) } } // Mock function - replace with actual Vipps PSP API integration async function mockVippsApiCall(paymentData: { phoneNumber: string amount: number message: string }) { // Simulate API delay await new Promise((resolve) => setTimeout(resolve, 1000)) // Mock successful response return { transactionId: `vipps_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`, status: "INITIATED", paymentUrl: `vipps://payment/${paymentData.phoneNumber}/${paymentData.amount}`, } } // Webhook endpoint for Vipps payment status updates export async function PUT(request: NextRequest) { try { const statusUpdate = await request.json() // In a real implementation: // 1. Verify the webhook signature // 2. Update payment status in database // 3. Notify the user of payment completion console.log("Vipps payment status update:", statusUpdate) return NextResponse.json({ success: true }) } catch (error) { console.error("Vipps webhook error:", error) return NextResponse.json({ error: "Failed to process webhook" }, { status: 500 }) } } [V0_FILE]typescriptreact:file="components/ui/separator.tsx" isMerged="true" "use client" import * as React from "react" import * as SeparatorPrimitive from "@radix-ui/react-separator" import { cn } from "@/lib/utils" const Separator = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, orientation = "horizontal", decorative = true, ...props }, ref) => ( )) Separator.displayName = SeparatorPrimitive.Root.displayName export { Separator } [V0_FILE]typescriptreact:file="components/ui/alert.tsx" isMerged="true" import * as React from "react" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const alertVariants = cva( "relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7", { variants: { variant: { default: "bg-background text-foreground", destructive: "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive", }, }, defaultVariants: { variant: "default", }, }, ) const Alert = React.forwardRef< HTMLDivElement, React.HTMLAttributes & VariantProps >(({ className, variant, ...props }, ref) => (

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

), ) AlertDescription.displayName = "AlertDescription" export { Alert, AlertDescription } [V0_FILE]typescriptreact:file="components/ui/badge.tsx" isMerged="true" import type * as React from "react" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const badgeVariants = cva( "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2", { variants: { variant: { default: "border-transparent bg-primary text-primary-foreground hover:bg-primary/80", secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80", destructive: "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80", outline: "text-foreground", }, }, defaultVariants: { variant: "default", }, }, ) export interface BadgeProps extends React.HTMLAttributes, VariantProps {} function Badge({ className, variant, ...props }: BadgeProps) { return

} export { Badge, badgeVariants } [V0_FILE]typescriptreact:file="components/vipps-payment.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import { useState, useEffect } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Card, CardContent } from "@/components/ui/card" import { Alert, AlertDescription } from "@/components/ui/alert" import { updateReadingPaymentStatus, getSettings, getInitialReadings } from "@/lib/storage" interface VippsPaymentProps { amount: number calculationId: string onPaymentSent: () => void onBack: () => void } export function VippsPayment({ amount, calculationId, onPaymentSent, onBack }: VippsPaymentProps) { const [settings, setSettings] = useState(() => { if (typeof window !== "undefined") { return getSettings() } return { tenantPhone: "" } }) const [phoneNumber, setPhoneNumber] = useState(() => { if (typeof window !== "undefined") { const initialReadings = getInitialReadings() return initialReadings?.tenantNumber || settings.tenantPhone } return settings.tenantPhone }) const [message, setMessage] = useState("Electricity bill payment") const [isLoading, setIsLoading] = useState(false) const [error, setError] = useState("") useEffect(() => { if (typeof window !== "undefined") { const initialReadings = getInitialReadings() if (initialReadings?.tenantNumber) { setPhoneNumber(initialReadings.tenantNumber) } } }, []) const formatPhoneNumber = (value: string) => { // Remove all non-digits const digits = value.replace(/\D/g, "") // Format Norwegian phone number if (digits.length <= 8) { return digits.replace(/(\d{3})(\d{2})(\d{3})/, "$1 $2 $3").trim() } return digits.slice(0, 8).replace(/(\d{3})(\d{2})(\d{3})/, "$1 $2 $3") } const handlePhoneChange = (e: React.ChangeEvent) => { const formatted = formatPhoneNumber(e.target.value) setPhoneNumber(formatted) setError("") } const validatePhoneNumber = (phone: string) => { const digits = phone.replace(/\D/g, "") return digits.length === 8 && /^[4-9]/.test(digits) } const handleSendPaymentRequest = async () => { if (!validatePhoneNumber(phoneNumber)) { setError("Please enter a valid Norwegian phone number (8 digits)") return } setIsLoading(true) setError("") try { updateReadingPaymentStatus(calculationId, "sent") // In a real app, this would call your backend API which then calls Vipps PSP API const response = await fetch("/api/vipps/payment-request", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ phoneNumber: phoneNumber.replace(/\D/g, ""), amount: Math.round(amount * 100), // Convert to øre (smallest currency unit) message: message, }), }) if (!response.ok) { throw new Error("Failed to send payment request") } const result = await response.json() // Simulate successful payment request setTimeout(() => { updateReadingPaymentStatus(calculationId, "completed") onPaymentSent() }, 1000) } catch (err) { updateReadingPaymentStatus(calculationId, "failed") setError("Failed to send payment request. Please try again.") console.error("Vipps payment error:", err) } finally { setIsLoading(false) } } return (

Vipps Payment Request

{amount.toFixed(2)} NOK

Amount to request

Tenant's Phone Number

📞

Enter 8-digit Norwegian mobile number

Payment Message setMessage(e.target.value)} placeholder="Electricity bill payment" maxLength={100} />

This message will appear in the Vipps payment request

{error && ( {error} )}

What happens next?

• Your tenant will receive a Vipps notification
• They can approve the payment in their Vipps app
• You'll receive confirmation when payment is completed

) } [V0_FILE]typescriptreact:file="components/calculation-form.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Card, CardContent } from "@/components/ui/card" import { Separator } from "@/components/ui/separator" // Function to get settings from storage const getSettings = () => { // Placeholder for actual implementation return { defaultTotalBill: 1000, tenantPhone: "", } } interface CalculationFormProps { currentReading: number previousReading: number onCalculate: (amount: number, calculationData: any) => void onBack: () => void } export function CalculationForm({ currentReading, previousReading, onCalculate, onBack }: CalculationFormProps) { const [settings, setSettings] = useState(() => { if (typeof window !== "undefined") { return getSettings() } return { defaultTotalBill: 1000, tenantPhone: "" } }) const [totalBill, setTotalBill] = useState(settings.defaultTotalBill.toString()) const consumption = currentReading - previousReading // Assuming the main meter reading represents total house consumption const totalHouseConsumption = currentReading // This would need to be calculated from main meter difference const tenantPercentage = totalHouseConsumption > 0 ? (consumption / totalHouseConsumption) * 100 : 0 const tenantAmount = (Number.parseFloat(totalBill || "0") * tenantPercentage) / 100 const handleCalculate = () => { if (tenantAmount > 0) { const calculationData = { totalBill: Number.parseFloat(totalBill), tenantPercentage: tenantPercentage, consumption: consumption, } onCalculate(Math.round(tenantAmount * 100) / 100, calculationData) } } const isValid = totalBill && consumption > 0 return (

Meter Readings

Current:

{currentReading.toLocaleString()} kWh

{previousReading.toLocaleString()} kWh

Apartment Consumption:

{consumption.toLocaleString()} kWh

Total Electricity Bill (NOK) setTotalBill(e.target.value)} placeholder="1000.00" />

Enter the total monthly electricity bill for the entire house

Calculation Breakdown

Total house bill: {Number.parseFloat(totalBill || "0").toFixed(2)} NOK

Apartment consumption: {consumption.toLocaleString()} kWh

Tenant's share: {tenantPercentage.toFixed(1)}%

Tenant owes: {tenantAmount.toFixed(2)} NOK

) } [V0_FILE]typescriptreact:file="components/history-view.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" import { Card, CardContent } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Input } from "@/components/ui/input" import { getReadings, deleteReading, updateReadingDate, updateReadingTenantInfo, type ElectricityReading, } from "@/lib/storage" interface HistoryViewProps { onBack: () => void onHistoryChange?: () => void } export function HistoryView({ onBack, onHistoryChange }: HistoryViewProps) { const [readings, setReadings] = useState([]) const [editingDate, setEditingDate] = useState(null) const [editDateValue, setEditDateValue] = useState("") const [editingTenant, setEditingTenant] = useState(null) const [editTenantValue, setEditTenantValue] = useState("") useEffect(() => { setReadings(getReadings()) }, []) const formatDate = (dateString: string) => { return new Date(dateString).toLocaleDateString("no-NO", { day: "2-digit", month: "2-digit", year: "numeric", hour: "2-digit", minute: "2-digit", }) } const formatTenantNumber = (value: string) => { const digits = value.replace(/\D/g, "") if (digits.length <= 8) { return digits.replace(/(\d{3})(\d{2})(\d{3})/, "$1 $2 $3").trim() } return digits.slice(0, 8).replace(/(\d{3})(\d{2})(\d{3})/, "$1 $2 $3") } const getStatusColor = (status: ElectricityReading["paymentStatus"]) => { switch (status) { case "completed": return "bg-green-100 text-green-800" case "sent": return "bg-blue-100 text-blue-800" case "failed": return "bg-red-100 text-red-800" default: return "bg-gray-100 text-gray-800" } } const handleDelete = (id: string) => { if (confirm("Are you sure you want to delete this entry?")) { deleteReading(id) const updatedReadings = getReadings() setReadings(updatedReadings) onHistoryChange?.() } } const handleEditDate = (reading: ElectricityReading) => { setEditingDate(reading.id) const date = new Date(reading.date) const formatted = date.toISOString().slice(0, 16) setEditDateValue(formatted) } const handleSaveDate = (id: string) => { if (editDateValue) { updateReadingDate(id, new Date(editDateValue).toISOString()) const updatedReadings = getReadings() setReadings(updatedReadings) onHistoryChange?.() } setEditingDate(null) setEditDateValue("") } const handleCancelEdit = () => { setEditingDate(null) setEditDateValue("") setEditingTenant(null) setEditTenantValue("") } const handleEditTenant = (reading: ElectricityReading) => { setEditingTenant(reading.id) setEditTenantValue(reading.tenantPhone || "") } const handleSaveTenant = (id: string) => { updateReadingTenantInfo(id, editTenantValue) const updatedReadings = getReadings() setReadings(updatedReadings) onHistoryChange?.() setEditingTenant(null) setEditTenantValue("") } const isInitialReading = (reading: ElectricityReading) => { return reading.consumption === 0 && reading.calculatedAmount === 0 } return (

📊 Calculation History

{readings.length === 0 ? (

📊

No calculations yet

Your calculation history will appear here

) : (

{readings.map((reading) => (

📅 {editingDate === reading.id ? (

setEditDateValue(e.target.value)} className="text-sm h-8" />

) : (

{formatDate(reading.date)}

)} {isInitialReading(reading) && ( Initial Reading )}

{!isInitialReading(reading) && ( {reading.paymentStatus} )}

{isInitialReading(reading) ? (

⚡ Main Reading

{reading.mainReading.toLocaleString()} kWh

⚡ Apartment Reading

{reading.secondaryReading.toLocaleString()} kWh

) : (

⚡ Consumption

{reading.consumption.toLocaleString()} kWh

💳 Amount

{reading.calculatedAmount.toFixed(2)} NOK

)}

{isInitialReading(reading) ? (

{reading.tenantPhone && (

{editingTenant === reading.id ? (

👤 Tenant: setEditTenantValue(e.target.value)} className="text-xs h-6 flex-1" placeholder="Name or phone number" />

) : (

👤 Tenant: {reading.tenantPhone}

)}

Initial readings set for new lease period

) : ( <>

Rate: {reading.pricePerKwh} NOK/kWh • Share: {reading.tenantPercentage}%

Readings: {reading.initialSecondaryReading?.toLocaleString() || "N/A"} →{" "} {reading.secondaryReading.toLocaleString()}

{reading.tenantPhone && (

{editingTenant === reading.id ? (

📞 Phone: setEditTenantValue(formatTenantNumber(e.target.value))} className="text-xs h-6 flex-1" placeholder="123 45 678" maxLength={11} />

) : (

📞 Phone: {reading.tenantPhone}

)}

)} )}

))}

)}

) } [V0_FILE]typescriptreact:file="lib/storage.ts" isEdit="true" isQuickEdit="true" isMerged="true" // Local storage utilities for saving calculation history and settings export interface ElectricityReading { id: string mainReading: number secondaryReading: number initialMainReading?: number initialSecondaryReading?: number consumption: number pricePerKwh: number tenantPercentage: number fixedCosts: number calculatedAmount: number date: string tenantPhone?: string paymentStatus: "pending" | "sent" | "completed" | "failed" } export interface InitialReadings { mainReading: number secondaryReading: number date: string tenantName?: string tenantNumber?: string } export interface AppSettings { defaultPricePerKwh: number defaultTenantPercentage: number defaultFixedCosts: number tenantPhone: string initialReadings?: InitialReadings } const READINGS_KEY = "electrisplit_readings" const SETTINGS_KEY = "electrisplit_settings" // Default settings const DEFAULT_SETTINGS: AppSettings = { defaultPricePerKwh: 1.5, defaultTenantPercentage: 50, defaultFixedCosts: 200, tenantPhone: "", } export function saveReading(reading: Omit): ElectricityReading { const newReading: ElectricityReading = { ...reading, id: `reading_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`, date: new Date().toISOString(), } const existingReadings = getReadings() const updatedReadings = [newReading, ...existingReadings].slice(0, 50) // Keep last 50 readings if (typeof window !== "undefined") { localStorage.setItem(READINGS_KEY, JSON.stringify(updatedReadings)) } return newReading } export function getReadings(): ElectricityReading[] { if (typeof window === "undefined") return [] try { const stored = localStorage.getItem(READINGS_KEY) return stored ? JSON.parse(stored) : [] } catch (error) { console.error("Error loading readings:", error) return [] } } export function updateReadingPaymentStatus(id: string, status: ElectricityReading["paymentStatus"]) { const readings = getReadings() const updatedReadings = readings.map((reading) => reading.id === id ? { ...reading, paymentStatus: status } : reading, ) if (typeof window !== "undefined") { localStorage.setItem(READINGS_KEY, JSON.stringify(updatedReadings)) } } export function updateReadingDate(id: string, newDate: string) { const readings = getReadings() const updatedReadings = readings.map((reading) => (reading.id === id ? { ...reading, date: newDate } : reading)) if (typeof window !== "undefined") { localStorage.setItem(READINGS_KEY, JSON.stringify(updatedReadings)) } } export function getSettings(): AppSettings { if (typeof window === "undefined") return DEFAULT_SETTINGS try { const stored = localStorage.getItem(SETTINGS_KEY) return stored ? { ...DEFAULT_SETTINGS, ...JSON.parse(stored) } : DEFAULT_SETTINGS } catch (error) { console.error("Error loading settings:", error) return DEFAULT_SETTINGS } } export function saveSettings(settings: Partial) { const currentSettings = getSettings() const updatedSettings = { ...currentSettings, ...settings } if (typeof window !== "undefined") { localStorage.setItem(SETTINGS_KEY, JSON.stringify(updatedSettings)) } } export function deleteReading(id: string) { const readings = getReadings() const updatedReadings = readings.filter((reading) => reading.id !== id) if (typeof window !== "undefined") { localStorage.setItem(READINGS_KEY, JSON.stringify(updatedReadings)) } } export function deleteInitialReadings() { const currentSettings = getSettings() const { initialReadings, ...settingsWithoutInitial } = currentSettings if (typeof window !== "undefined") { localStorage.setItem(SETTINGS_KEY, JSON.stringify(settingsWithoutInitial)) } } export function saveInitialReadings(readings: Omit): InitialReadings { const initialReadings: InitialReadings = { ...readings, date: new Date().toISOString(), } const currentSettings = getSettings() saveSettings({ initialReadings }) const historyEntry: ElectricityReading = { id: `initial_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`, mainReading: readings.mainReading, secondaryReading: readings.secondaryReading, initialMainReading: readings.mainReading, initialSecondaryReading: readings.secondaryReading, consumption: 0, pricePerKwh: 0, tenantPercentage: 0, fixedCosts: 0, calculatedAmount: 0, date: initialReadings.date, tenantPhone: readings.tenantNumber || readings.tenantName || undefined, paymentStatus: "completed", } const existingReadings = getReadings() const updatedReadings = [historyEntry, ...existingReadings].slice(0, 50) if (typeof window !== "undefined") { localStorage.setItem(READINGS_KEY, JSON.stringify(updatedReadings)) } return initialReadings } export function getInitialReadings(): InitialReadings | null { const settings = getSettings() return settings.initialReadings || null } export function clearAllData() { if (typeof window !== "undefined") { localStorage.removeItem(READINGS_KEY) localStorage.removeItem(SETTINGS_KEY) } } export function updateReadingTenantInfo(id: string, tenantInfo: string) { const readings = getReadings() const updatedReadings = readings.map((reading) => reading.id === id ? { ...reading, tenantPhone: tenantInfo } : reading, ) if (typeof window !== "undefined") { localStorage.setItem(READINGS_KEY, JSON.stringify(updatedReadings)) } } [V0_FILE]typescriptreact:file="App.tsx" isMerged="true" import { NavigationContainer } from "@react-navigation/native" import { createStackNavigator } from "@react-navigation/stack" import { StatusBar } from "expo-status-bar" import { SafeAreaProvider } from "react-native-safe-area-context" // Screens import ScanScreen from "./src/screens/ScanScreen" import CalculateScreen from "./src/screens/CalculateScreen" import PaymentScreen from "./src/screens/PaymentScreen" import HistoryScreen from "./src/screens/HistoryScreen" import InitialReadingsScreen from "./src/screens/InitialReadingsScreen" // Types import type { InitialReadings } from "./src/lib/storage" export type RootStackParamList = { Scan: undefined Calculate: { mainReading: number secondaryReading: number initialReadings: InitialReadings } Payment: { amount: number calculationData: any calculationId: string } History: undefined InitialReadings: undefined } const Stack = createStackNavigator() export default function App() { return ( ) } [V0_FILE]typescriptreact:file="src/components/ui/Button.tsx" isMerged="true" import { TouchableOpacity, Text, StyleSheet, type ViewStyle, type TextStyle } from "react-native" interface ButtonProps { title: string onPress: () => void variant?: "primary" | "secondary" | "outline" | "ghost" size?: "sm" | "md" | "lg" disabled?: boolean style?: ViewStyle textStyle?: TextStyle } export function Button({ title, onPress, variant = "primary", size = "md", disabled = false, style, textStyle, }: ButtonProps) { return ( {title} ) } const styles = StyleSheet.create({ button: { borderRadius: 8, alignItems: "center", justifyContent: "center", }, // Variants primary: { backgroundColor: "#3B82F6", }, secondary: { backgroundColor: "#6B7280", }, outline: { backgroundColor: "transparent", borderWidth: 1, borderColor: "#D1D5DB", }, ghost: { backgroundColor: "transparent", }, // Sizes sm: { paddingHorizontal: 12, paddingVertical: 6, }, md: { paddingHorizontal: 16, paddingVertical: 12, }, lg: { paddingHorizontal: 20, paddingVertical: 16, }, // Disabled disabled: { opacity: 0.5, }, // Text styles text: { fontWeight: "600", }, primaryText: { color: "#FFFFFF", }, secondaryText: { color: "#FFFFFF", }, outlineText: { color: "#374151", }, ghostText: { color: "#3B82F6", }, smText: { fontSize: 14, }, mdText: { fontSize: 16, }, lgText: { fontSize: 18, }, disabledText: { opacity: 0.7, }, }) [V0_FILE]typescriptreact:file="src/components/ui/Card.tsx" isMerged="true" import type React from "react" import { View, StyleSheet, type ViewStyle } from "react-native" interface CardProps { children: React.ReactNode style?: ViewStyle } export function Card({ children, style }: CardProps) { return {children} } interface CardContentProps { children: React.ReactNode style?: ViewStyle } export function CardContent({ children, style }: CardContentProps) { return {children} } const styles = StyleSheet.create({ card: { backgroundColor: "#FFFFFF", borderRadius: 12, shadowColor: "#000", shadowOffset: { width: 0, height: 2, }, shadowOpacity: 0.1, shadowRadius: 3.84, elevation: 5, marginVertical: 8, }, content: { padding: 16, }, }) [V0_FILE]typescriptreact:file="src/components/ui/Input.tsx" isMerged="true" import { TextInput, StyleSheet, type TextInputProps, type ViewStyle } from "react-native" interface InputProps extends TextInputProps { style?: ViewStyle } export function Input({ style, ...props }: InputProps) { return } const styles = StyleSheet.create({ input: { borderWidth: 1, borderColor: "#D1D5DB", borderRadius: 8, paddingHorizontal: 12, paddingVertical: 12, fontSize: 16, backgroundColor: "#FFFFFF", color: "#111827", }, }) [V0_FILE]typescriptreact:file="src/components/ui/Alert.tsx" isMerged="true" import type React from "react" import { View, Text, StyleSheet, type ViewStyle } from "react-native" interface AlertProps { children: React.ReactNode variant?: "default" | "destructive" | "warning" style?: ViewStyle } export function Alert({ children, variant = "default", style }: AlertProps) { return {children} } interface AlertDescriptionProps { children: React.ReactNode } export function AlertDescription({ children }: AlertDescriptionProps) { return {children} } const styles = StyleSheet.create({ alert: { padding: 12, borderRadius: 8, borderWidth: 1, }, default: { backgroundColor: "#EFF6FF", borderColor: "#DBEAFE", }, destructive: { backgroundColor: "#FEF2F2", borderColor: "#FECACA", }, warning: { backgroundColor: "#FFFBEB", borderColor: "#FED7AA", }, description: { fontSize: 14, color: "#374151", }, }) [V0_FILE]typescriptreact:file="src/components/CameraScanner.tsx" isMerged="true" "use client" import { useState, useRef } from "react" import { View, Text, StyleSheet, Alert, TouchableOpacity } from "react-native" import { CameraView, useCameraPermissions } from "expo-camera" import * as ImagePicker from "expo-image-picker" import { Ionicons } from "@expo/vector-icons" import { Button } from "./ui/Button" import { Card, CardContent } from "./ui/Card" interface CameraScannerProps { onReadingScanned: (reading: number, type: "main" | "secondary") => void mainReading: number | null secondaryReading: number | null } export function CameraScanner({ onReadingScanned, mainReading, secondaryReading }: CameraScannerProps) { const [isScanning, setIsScanning] = useState(false) const [scanType, setScanType] = useState<"main" | "secondary" | null>(null) const [permission, requestPermission] = useCameraPermissions() const cameraRef = useRef(null) const processImage = async (uri: string, type: "main" | "secondary") => { setIsScanning(true) // Simulate OCR processing await new Promise((resolve) => setTimeout(resolve, 2000)) // Generate mock reading for demo const mockReading = Math.floor(Math.random() * 10000) + 50000 onReadingScanned(mockReading, type) setIsScanning(false) setScanType(null) } const takePicture = async (type: "main" | "secondary") => { if (!permission?.granted) { const { granted } = await requestPermission() if (!granted) { Alert.alert("Permission needed", "Camera permission is required to scan meter readings") return } } setScanType(type) } const handleTakePhoto = async () => { if (cameraRef.current && scanType) { try { const photo = await cameraRef.current.takePictureAsync() if (photo?.uri) { await processImage(photo.uri, scanType) } } catch (error) { Alert.alert("Error", "Failed to take picture") setScanType(null) } } } const pickImageFromGallery = async (type: "main" | "secondary") => { const { status } = await ImagePicker.requestMediaLibraryPermissionsAsync() if (status !== "granted") { Alert.alert("Permission needed", "Gallery permission is required to select images") return } const result = await ImagePicker.launchImageLibraryAsync({ mediaTypes: ImagePicker.MediaTypeOptions.Images, allowsEditing: true, aspect: [4, 3], quality: 1, }) if (!result.canceled && result.assets[0]) { await processImage(result.assets[0].uri, type) } } if (scanType && permission?.granted) { return ( Scan {scanType === "main" ? "Main" : "Secondary"} Reading setScanType(null)}> pickImageFromGallery(scanType)}> ) } return ( Main Reading (Entire House) {mainReading && } {mainReading ? ( {mainReading.toLocaleString()} kWh ) : (

{steps.map((step, index) => { const isActive = step.id === currentStep const isCompleted = steps.findIndex((s) => s.id === currentStep) > index return (

{step.icon} {step.label}

{index < steps.length - 1 && (

)}

) })}

) } [V0_FILE]typescriptreact:file="components/manual-input-form.tsx" isEdit="true" isMerged="true" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Card, CardContent } from "@/components/ui/card" interface ManualInputFormProps { onReadingEntered: (reading: number, type: "main" | "secondary") => void mainReading: number | null secondaryReading: number | null } export function ManualInputForm({ onReadingEntered, mainReading, secondaryReading }: ManualInputFormProps) { const [mainInput, setMainInput] = useState("") const [secondaryInput, setSecondaryInput] = useState("") const [editingMain, setEditingMain] = useState(false) const [editingSecondary, setEditingSecondary] = useState(false) const handleMainSubmit = () => { const reading = Number.parseInt(mainInput) if (!isNaN(reading) && reading > 0) { onReadingEntered(reading, "main") setMainInput("") setEditingMain(false) } } const handleSecondarySubmit = () => { const reading = Number.parseInt(secondaryInput) if (!isNaN(reading) && reading > 0) { onReadingEntered(reading, "secondary") setSecondaryInput("") setEditingSecondary(false) } } const handleMainEdit = () => { setMainInput(mainReading?.toString() || "") setEditingMain(true) } const handleSecondaryEdit = () => { setSecondaryInput(secondaryReading?.toString() || "") setEditingSecondary(true) } return (

Main Reading (Entire House) {mainReading && ✓}

{mainReading && !editingMain ? (

{mainReading.toLocaleString()} kWh

) : (

setMainInput(e.target.value)} onKeyPress={(e) => e.key === "Enter" && handleMainSubmit()} />

{editingMain && ( )}

)}

Secondary Reading (Apartment Only) {secondaryReading && ✓}

{secondaryReading && !editingSecondary ? (

{secondaryReading.toLocaleString()} kWh

) : (

setSecondaryInput(e.target.value)} onKeyPress={(e) => e.key === "Enter" && handleSecondarySubmit()} />

{editingSecondary && ( )}

)}

Tip: Enter the main meter reading first (entire house), then the secondary meter reading (apartment only)

) } [V0_FILE]typescriptreact:file="components/camera-scanner.tsx" isEdit="true" isMerged="true" "use client" import type React from "react" import { useState, useRef, useCallback } from "react" import { Button } from "@/components/ui/button" import { Label } from "@/components/ui/label" import { Card, CardContent } from "@/components/ui/card" interface CameraScannerProps { onReadingScanned: (reading: number, type: "main" | "secondary") => void mainReading: number | null secondaryReading: number | null } export function CameraScanner({ onReadingScanned, mainReading, secondaryReading }: CameraScannerProps) { const [isScanning, setIsScanning] = useState(false) const [scanType, setScanType] = useState<"main" | "secondary" | null>(null) const fileInputRef = useRef(null) const processImage = useCallback( async (file: File, type: "main" | "secondary") => { setIsScanning(true) await new Promise((resolve) => setTimeout(resolve, 2000)) const mockReading = Math.floor(Math.random() * 10000) + 50000 onReadingScanned(mockReading, type) setIsScanning(false) setScanType(null) }, [onReadingScanned], ) const handleImageUpload = (event: React.ChangeEvent, type: "main" | "secondary") => { const file = event.target.files?.[0] if (file) { processImage(file, type) } } const startScan = (type: "main" | "secondary") => { setScanType(type) fileInputRef.current?.click() } return (

Main Reading (Entire House) {mainReading && ✓}

{mainReading ? (

{mainReading.toLocaleString()} kWh

) : ( )}

Secondary Reading (Apartment Only) {secondaryReading && ✓}

{secondaryReading ? (

{secondaryReading.toLocaleString()} kWh

) : ( )}

scanType && handleImageUpload(e, scanType)} />

Tip: Scan the main meter first (entire house), then the secondary meter (apartment only)

) } [V0_FILE]typescriptreact:file="components/initial-readings-form.tsx" isEdit="true" isMerged="true" "use client" import type React from "react" import { useState, useEffect } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { saveInitialReadings, getInitialReadings, deleteInitialReadings, type InitialReadings, getReadings, } from "@/lib/storage" interface InitialReadingsFormProps { onSaved: (readings: InitialReadings) => void onBack: () => void refreshTrigger?: number } export function InitialReadingsForm({ onSaved, onBack, refreshTrigger }: InitialReadingsFormProps) { const [mainReading, setMainReading] = useState("") const [secondaryReading, setSecondaryReading] = useState("") const [tenantName, setTenantName] = useState("") const [tenantNumber, setTenantNumber] = useState("") const [isLoading, setIsLoading] = useState(false) const [existingReadings, setExistingReadings] = useState(null) useEffect(() => { setExistingReadings(getInitialReadings()) }, [refreshTrigger]) const hasCalculations = () => { const readings = getReadings() return readings.some((reading) => reading.consumption > 0) } const getHeadingText = () => { return hasCalculations() ? "Previous Reading" : "Initial Readings" } const formatTenantNumber = (value: string) => { const digits = value.replace(/\D/g, "") if (digits.length <= 8) { return digits.replace(/(\d{3})(\d{2})(\d{3})/, "$1 $2 $3").trim() } return digits.slice(0, 8).replace(/(\d{3})(\d{2})(\d{3})/, "$1 $2 $3") } const handleDelete = () => { if (confirm("Are you sure you want to delete the current initial readings?")) { deleteInitialReadings() setExistingReadings(null) setMainReading("") setSecondaryReading("") setTenantName("") setTenantNumber("") } } const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() if (!mainReading || !secondaryReading) { alert("Please enter both readings") return } setIsLoading(true) try { const readings = saveInitialReadings({ mainReading: Number.parseFloat(mainReading), secondaryReading: Number.parseFloat(secondaryReading), tenantName: tenantName || undefined, tenantNumber: tenantNumber || undefined, }) setExistingReadings(readings) onSaved(readings) } catch (error) { console.error("Error saving initial readings:", error) alert("Error saving readings. Please try again.") } finally { setIsLoading(false) } } return (

{existingReadings && (

{getHeadingText()}

Main Reading:

{existingReadings.mainReading.toLocaleString()} kWh

Apartment Reading:

{existingReadings.secondaryReading.toLocaleString()} kWh

{existingReadings.tenantName && (

Tenant: {existingReadings.tenantName}

)} {existingReadings.tenantNumber && (

Phone: {existingReadings.tenantNumber}

)}

Set on {new Date(existingReadings.date).toLocaleDateString("no-NO")}

)} 👤 {existingReadings ? "Update Initial Readings" : "Set Initial Readings"} {existingReadings ? "Update the meter readings for a new tenant or lease period" : "Record the starting meter readings when a new tenant begins their lease"}

Tenant Name (Optional) setTenantName(e.target.value)} />

Tenant Phone Number (Optional) setTenantNumber(formatTenantNumber(e.target.value))} maxLength={11} />

8-digit Norwegian mobile number for Vipps payments

Main Reading (Entire House) setMainReading(e.target.value)} required />

Secondary Reading (Apartment) setSecondaryReading(e.target.value)} required />

) } [V0_FILE]json:file="package.json" isEdit="true" isMerged="true" { "name": "electrical-bill-calculator", "version": "1.0.0", "main": "node_modules/expo/AppEntry.js", "scripts": { "start": "expo start", "android": "expo start --android", "ios": "expo start --ios", "web": "expo start --web" }, "dependencies": { "expo": "~51.0.28", "expo-status-bar": "~1.12.1", "react": "18.2.0", "react-native": "0.74.5", "react-native-safe-area-context": "4.10.5", "@react-navigation/native": "^6.1.9", "@react-navigation/stack": "^6.3.20", "react-native-screens": "3.31.1", "react-native-gesture-handler": "~2.16.1", "@react-native-async-storage/async-storage": "1.23.1", "expo-camera": "17.0.7", "expo-image-picker": "17.0.7", "@expo/vector-icons": "15.0.2", "@radix-ui/react-separator": "1.1.7", "next": "15.5.3", "react-dom": "19.1.1", "class-variance-authority": "0.7.1", "clsx": "2.1.1", "lucide-react": "0.543.0", "tailwind-merge": "3.3.1", "tailwindcss-animate": "1.0.7" }, "devDependencies": { "@babel/core": "^7.20.0", "@types/react": "~18.2.45", "typescript": "^5.1.3", "@types/react-dom": "19.1.9", "@types/node": "24.3.1", "tailwindcss": "4.1.13", "postcss": "8.5.6" }, "private": true } [V0_FILE]json:file="app.json" isMerged="true" { "expo": { "name": "Electrical Bill Calculator", "slug": "electrical-bill-calculator", "version": "1.0.0", "orientation": "portrait", "icon": "./assets/icon.png", "userInterfaceStyle": "light", "splash": { "image": "./assets/splash.png", "resizeMode": "contain", "backgroundColor": "#ffffff" }, "assetBundlePatterns": ["**/*"], "ios": { "supportsTablet": true }, "android": { "adaptiveIcon": { "foregroundImage": "./assets/adaptive-icon.png", "backgroundColor": "#ffffff" } }, "web": { "favicon": "./assets/favicon.png" } } } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true" "use client" import { useState } from "react" type HistoryEntry = { date: string tenantName: string tenantNumber: string main: number secondary: number usage: number } export default function ElectriSplitApp() { const [activeTab, setActiveTab] = useState<"input" | "payment">("input") const [hasInitialReadings, setHasInitialReadings] = useState(false) const [mainReading, setMainReading] = useState(null) const [secondaryReading, setSecondaryReading] = useState(null) const [initialMainReading, setInitialMainReading] = useState(null) const [initialSecondaryReading, setInitialSecondaryReading] = useState(null) const [tenantName, setTenantName] = useState("") const [tenantNumber, setTenantNumber] = useState("") const [showSetInitial, setShowSetInitial] = useState(false) const [showHistory, setShowHistory] = useState(false) const [history, setHistory] = useState([]) const [editingIndex, setEditingIndex] = useState(null) const [editTenantName, setEditTenantName] = useState("") const [editTenantNumber, setEditTenantNumber] = useState("") const [currentUsage, setCurrentUsage] = useState(null) const [usagePercentage, setUsagePercentage] = useState(null) const [electricBillAmount, setElectricBillAmount] = useState(null) const handleScanMain = () => { console.log("[v0] Scanning main meter...") // In a real app, this would open camera alert("Camera scanning would open here") } const handleScanSecondary = () => { console.log("[v0] Scanning secondary meter...") // In a real app, this would open camera alert("Camera scanning would open here") } const handleSetInitial = () => { setShowSetInitial(true) } const saveInitialReadings = () => { if (initialMainReading !== null && initialSecondaryReading !== null && tenantName.trim() && tenantNumber.trim()) { setHasInitialReadings(true) setShowSetInitial(false) const initialEntry: HistoryEntry = { date: new Date().toLocaleDateString(), tenantName, tenantNumber, main: initialMainReading, secondary: initialSecondaryReading, usage: 0, // Initial reading has 0 usage } setHistory([...history, initialEntry]) } } const calculateUsage = () => { if ( mainReading !== null && secondaryReading !== null && initialMainReading !== null && initialSecondaryReading !== null ) { const usage = mainReading - initialMainReading - (secondaryReading - initialSecondaryReading) const totalHouseUsage = mainReading - initialMainReading const percentage = totalHouseUsage > 0 ? (usage / totalHouseUsage) * 100 : 0 setCurrentUsage(usage) setUsagePercentage(percentage) const newEntry: HistoryEntry = { date: new Date().toLocaleDateString(), tenantName, tenantNumber, main: mainReading, secondary: secondaryReading, usage: usage, } setHistory([...history, newEntry]) setActiveTab("payment") } } const deleteHistoryEntry = (index: number) => { const updatedHistory = history.filter((_, i) => i !== index) setHistory(updatedHistory) } const startEditing = (index: number) => { setEditingIndex(index) setEditTenantName(history[index].tenantName) setEditTenantNumber(history[index].tenantNumber) } const saveEdit = (index: number) => { const updatedHistory = [...history] updatedHistory[index] = { ...updatedHistory[index], tenantName: editTenantName, tenantNumber: editTenantNumber, } setHistory(updatedHistory) setEditingIndex(null) } const cancelEdit = () => { setEditingIndex(null) setEditTenantName("") setEditTenantNumber("") } const requestPaymentVipps = () => { if (currentUsage !== null && usagePercentage !== null && electricBillAmount !== null) { const tenantAmount = (electricBillAmount * usagePercentage) / 100 alert( `Requesting payment via Vipps to ${tenantNumber} for ${tenantName}\nAmount: ${tenantAmount.toFixed(2)} NOK (${usagePercentage.toFixed(1)}% of ${electricBillAmount} NOK)`, ) } } const handleShowHistory = () => { setShowHistory(true) } const handleNewCalculation = () => { setMainReading(null) setSecondaryReading(null) setCurrentUsage(null) setUsagePercentage(null) setElectricBillAmount(null) setActiveTab("input") } return (

ElectriSplit

{!hasInitialReadings && (

No initial readings set. Set initial readings when a new tenant starts their lease.

)} {showSetInitial && (

Set Initial Readings

Tenant Name setTenantName(e.target.value)} className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent" placeholder="Enter tenant name" />

Tenant Phone Number setTenantNumber(e.target.value)} className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent" placeholder="Enter phone number for Vipps" />

Main Reading (kWh) setInitialMainReading(Number(e.target.value))} className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent" placeholder="Enter main reading" />

Secondary Reading (kWh) setInitialSecondaryReading(Number(e.target.value))} className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent" placeholder="Enter secondary reading" />

)} {showHistory && (

Reading History

{history.length === 0 ? (

No readings recorded yet

) : (

{history.map((entry, index) => (

{entry.date}

{editingIndex === index ? (

setEditTenantName(e.target.value)} className="w-full px-2 py-1 text-sm border border-gray-300 rounded" placeholder="Tenant name" /> setEditTenantNumber(e.target.value)} className="w-full px-2 py-1 text-sm border border-gray-300 rounded" placeholder="Phone number" />

) : (

{entry.tenantName}

{entry.tenantNumber}

)}

Main: {entry.main} kWh

Secondary: {entry.secondary} kWh

Usage: {entry.usage} kWh

))}

)}

)} {activeTab === "input" && (

Readings

Set initial readings first, then enter current readings

Main Reading (Entire House)

setMainReading(Number(e.target.value))} className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-center text-lg" placeholder="Enter main reading (kWh)" />

Secondary Reading (Apartment Only)

setSecondaryReading(Number(e.target.value))} className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-center text-lg" placeholder="Enter secondary reading (kWh)" />

{hasInitialReadings && mainReading !== null && secondaryReading !== null && ( )}

Tip: Enter the main meter reading first (entire house), then the secondary meter reading (apartment only)

)} {activeTab === "payment" && (

Payment Request

Review usage and request payment via Vipps

{currentUsage !== null && usagePercentage !== null ? (

Usage Summary

{currentUsage}

kWh Used

{usagePercentage.toFixed(1)}%

of Total Usage

Tenant Information

Name: {tenantName}

Phone: {tenantNumber}

Total Electric Bill Amount (NOK) setElectricBillAmount(Number(e.target.value))} className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent text-center text-lg" placeholder="Enter total electric bill amount" />

{electricBillAmount !== null && (

Payment Calculation

Total Bill: {electricBillAmount} NOK

Tenant Usage: {usagePercentage.toFixed(1)}%

Amount to Pay: {((electricBillAmount * usagePercentage) / 100).toFixed(2)} NOK

)} {electricBillAmount !== null && ( )}

) : (

No usage calculated yet

Go to Input tab and calculate usage first

)}

) }