[V0_FILE]json:file="package.json" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "geist": "^1.3.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "14.2.25", "next-themes": "^0.4.6", "react": "^19", "react-day-picker": "9.8.0", "react-dom": "^19", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^0.9.9", "zod": "3.25.67" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^18", "@types/react-dom": "^18", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]typescriptreact:file="app/api/vipps/payment-request/route.ts" 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" "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" 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/navigation-header.tsx" "use client" import { Button } from "@/components/ui/button" import { Card, CardContent } from "@/components/ui/card" import { Zap, History, Settings } from "lucide-react" interface NavigationHeaderProps { currentStep: "scan" | "calculate" | "payment" onReset: () => void } export function NavigationHeader({ currentStep, onReset }: NavigationHeaderProps) { const steps = [ { id: "scan", label: "Scan", icon: Zap }, { id: "calculate", label: "Calculate", icon: History }, { id: "payment", label: "Payment", icon: Settings }, ] return (

ElectriSplit

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

{step.label}

{index < steps.length - 1 && (

)}

) })}

) } [V0_FILE]typescriptreact:file="components/ui/badge.tsx" 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" isQuickEdit="true" "use client" import type React from "react" 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 { ArrowLeft, Send, Phone } from "lucide-react" import { Alert, AlertDescription } from "@/components/ui/alert" import { updateReadingPaymentStatus, getSettings } 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(settings.tenantPhone) const [message, setMessage] = useState("Electricity bill payment") const [isLoading, setIsLoading] = useState(false) const [error, setError] = useState("") 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/camera-scanner.tsx" isQuickEdit="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" import { Camera, Check } from "lucide-react" 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/calculation-form.tsx" "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" import { ArrowLeft, Calculator } from "lucide-react" // 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" isQuickEdit="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, type ElectricityReading } from "@/lib/storage" import { History, Calendar, Zap, CreditCard, ArrowLeft, Trash2, Edit2, Check, X } from "lucide-react" 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("") 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 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) // Format date for input field (YYYY-MM-DDTHH:MM) 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("") } 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 &&

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 &&

Phone: {reading.tenantPhone}

} )}

))}

)}

) } [V0_FILE]typescriptreact:file="lib/storage.ts" isQuickEdit="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 } 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.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) } } [V0_FILE]typescriptreact:file="app/page.tsx" "use client" import { useState, useEffect } from "react" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { CameraScanner } from "@/components/camera-scanner" import { CalculationForm } from "@/components/calculation-form" import { VippsPayment } from "@/components/vipps-payment" import { HistoryView } from "@/components/history-view" import { InitialReadingsForm } from "@/components/initial-readings-form" import { Zap, Calculator, CreditCard, History, UserPlus, AlertCircle } from "lucide-react" import { NavigationHeader } from "@/components/navigation-header" import { Alert, AlertDescription } from "@/components/ui/alert" import { saveReading, getInitialReadings, type ElectricityReading, type InitialReadings } from "@/lib/storage" export default function ElectricalBillApp() { const [mainReading, setMainReading] = useState(null) const [secondaryReading, setSecondaryReading] = useState(null) const [calculatedAmount, setCalculatedAmount] = useState(null) const [step, setStep] = useState<"scan" | "calculate" | "payment" | "history" | "initial">("scan") const [currentCalculation, setCurrentCalculation] = useState(null) const [initialReadings, setInitialReadings] = useState(null) const [refreshTrigger, setRefreshTrigger] = useState(0) useEffect(() => { const stored = getInitialReadings() setInitialReadings(stored) }, []) const handleReadingScanned = (reading: number, type: "main" | "secondary") => { if (type === "main") { setMainReading(reading) } else { setSecondaryReading(reading) } } const handleCalculation = (amount: number, calculationData: any) => { setCalculatedAmount(amount) const savedReading = saveReading({ mainReading: mainReading!, secondaryReading: secondaryReading!, initialMainReading: initialReadings?.mainReading, initialSecondaryReading: initialReadings?.secondaryReading, consumption: secondaryReading! - (initialReadings?.secondaryReading || 0), pricePerKwh: calculationData.pricePerKwh, tenantPercentage: calculationData.tenantPercentage, fixedCosts: calculationData.fixedCosts, calculatedAmount: amount, paymentStatus: "pending", }) setCurrentCalculation(savedReading) setStep("payment") } const resetApp = () => { setMainReading(null) setSecondaryReading(null) setCalculatedAmount(null) setCurrentCalculation(null) setStep("scan") } const handleInitialReadingsSaved = (readings: InitialReadings) => { setInitialReadings(readings) setStep("scan") } const handleHistoryChange = () => { setRefreshTrigger((prev) => prev + 1) } return (

{step !== "history" && step !== "initial" && } {step === "scan" && ( <>

{!initialReadings && ( No initial readings set. Set initial readings when a new tenant starts their lease. )} Scan Power Meter {initialReadings ? "Scan current readings to calculate this month's usage" : "Set initial readings first, then scan current readings"} {initialReadings && (

Initial Readings:

Main: {initialReadings.mainReading.toLocaleString()} kWh

Secondary: {initialReadings.secondaryReading.toLocaleString()} kWh

{initialReadings.tenantName &&

Tenant: {initialReadings.tenantName}

}

)} {mainReading && secondaryReading && initialReadings && ( )} )} {step === "initial" && ( setStep("scan")} refreshTrigger={refreshTrigger} /> )} {step === "calculate" && ( Calculate Tenant Payment Enter the rate and calculation details setStep("scan")} /> )} {step === "payment" && calculatedAmount && currentCalculation && ( Request Payment Send payment request via Vipps { alert("Payment request sent successfully!") resetApp() }} onBack={() => setStep("calculate")} /> )} {step === "history" && setStep("scan")} onHistoryChange={handleHistoryChange} />}

) } [V0_FILE]typescriptreact:file="components/initial-readings-form.tsx" isQuickEdit="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 { UserPlus, ArrowLeft, Trash2 } from "lucide-react" 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 [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 handleDelete = () => { if (confirm("Are you sure you want to delete the current initial readings?")) { deleteInitialReadings() setExistingReadings(null) setMainReading("") setSecondaryReading("") setTenantName("") } } 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, }) 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}

)}

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"}

) }