[V0_FILE]typescriptreact:file="app/(app)/layout.tsx" isMerged="true" import type React from "react" import { AppShell } from "@/components/app-shell" export default function AppGroupLayout({ children }: { children: React.ReactNode }) { return {children} } [V0_FILE]json:file="package.json" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "eslint ." }, "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", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "15.5.4", "next-themes": "^0.4.6", "react": "19.1.0", "react-day-picker": "9.8.0", "react-dom": "19.1.0", "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.76", "swr": "2.3.6", "html2canvas": "1.4.1", "jspdf": "3.0.3", "@supabase/ssr": "0.7.0", "@supabase/supabase-js": "2.76.0" }, "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]typescript:file="components/ui/button.tsx" isQuickEdit="true" isMerged="true" import type * as React from "react" import { Slot } from "@radix-ui/react-slot" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const buttonVariants = cva( "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive cursor-pointer hover:shadow-md", { variants: { variant: { default: " text-primary-foreground", destructive: "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-orange-500", outline: "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50", secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80", ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50", link: "text-primary underline-offset-4 hover:underline", }, size: { default: "h-9 px-4 py-2 has-[>svg]:px-3", sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5", lg: "h-10 rounded-md px-6 has-[>svg]:px-4", icon: "size-9", "icon-sm": "size-8", "icon-lg": "size-10", }, }, defaultVariants: { variant: "default", size: "default", }, }, ) function Button({ className, variant, size, asChild = false, ...props }: React.ComponentProps<"button"> & VariantProps & { asChild?: boolean }) { const Comp = asChild ? Slot : "button" return } export { Button, buttonVariants } [V0_FILE]css:file="app/globals.css" isQuickEdit="true" isMerged="true" @import "tailwindcss"; @import "tw-animate-css"; @custom-variant dark (&:is(.dark *)); :root { --background: oklch(1 0 0); --foreground: oklch(0.145 0 0); --card: oklch(1 0 0); --card-foreground: oklch(0.145 0 0); --popover: oklch(1 0 0); --popover-foreground: oklch(0.145 0 0); --primary: oklch(0.205 0 0); --primary-foreground: oklch(0.985 0 0); --secondary: oklch(0.97 0 0); --secondary-foreground: oklch(0.205 0 0); --muted: oklch(0.97 0 0); --muted-foreground: oklch(0.556 0 0); --accent: oklch(0.97 0 0); --accent-foreground: oklch(0.205 0 0); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.577 0.245 27.325); --border: oklch(0.922 0 0); --input: oklch(0.922 0 0); --ring: oklch(0.708 0 0); --chart-1: oklch(0.646 0.222 41.116); --chart-2: oklch(0.6 0.118 184.704); --chart-3: oklch(0.398 0.07 227.392); --chart-4: oklch(0.828 0.189 84.429); --chart-5: oklch(0.769 0.188 70.08); --radius: 0.625rem; --sidebar: oklch(0.985 0 0); --sidebar-foreground: oklch(0.145 0 0); --sidebar-primary: oklch(0.205 0 0); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.97 0 0); --sidebar-accent-foreground: oklch(0.205 0 0); --sidebar-border: oklch(0.922 0 0); --sidebar-ring: oklch(0.708 0 0); } .dark { --background: oklch(0.17 0 255); /* deep slate */ --foreground: oklch(0.96 0 255); /* near-white text */ --card: oklch(0.19 0 255); /* slightly raised surface */ --card-foreground: var(--foreground); --popover: var(--card); --popover-foreground: var(--foreground); --primary: oklch(0.68 0.14 180); /* teal */ --primary-foreground: oklch(0.16 0 255); /* dark text on teal */ --secondary: oklch(0.24 0 255); /* slate for elements */ --secondary-foreground: var(--foreground); --muted: oklch(0.24 0 255); --muted-foreground: oklch(0.68 0 255); --accent: oklch(0.75 0.12 210); /* cyan accent */ --accent-foreground: oklch(0.16 0 255); --destructive: oklch(0.62 0.23 25); /* red for destructive */ --destructive-foreground: oklch(0.16 0 255); --border: oklch(0.28 0 255); --input: var(--secondary); --ring: oklch(0.5 0.12 180); --chart-1: var(--primary); --chart-2: var(--accent); --chart-3: oklch(0.6 0.1 160); /* derived teal */ --chart-4: oklch(0.58 0.09 200); /* derived cyan */ --chart-5: oklch(0.55 0.08 190); --sidebar: oklch(0.2 0 255); --sidebar-foreground: var(--foreground); --sidebar-primary: var(--primary); --sidebar-primary-foreground: var(--primary-foreground); --sidebar-accent: var(--secondary); --sidebar-accent-foreground: var(--foreground); --sidebar-border: var(--border); --sidebar-ring: var(--ring); } @theme inline { --font-sans: "Geist", "Geist Fallback"; --font-mono: "Geist Mono", "Geist Mono Fallback"; --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } } [V0_FILE]typescript:file="lib/data.ts" isEdit="true" isMerged="true" export type Transaction = { id: string date: string // ISO date description: string category: string type: "income" | "expense" amount: number // positive numbers for both, sign inferred from type } // Sample data removed - all data now comes from Supabase [V0_FILE]sql:file="scripts/01-init-schema.sql" isMerged="true" -- Create profiles table CREATE TABLE IF NOT EXISTS profiles ( id UUID PRIMARY KEY REFERENCES auth.users(id) ON DELETE CASCADE, email TEXT UNIQUE NOT NULL, full_name TEXT, created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP, updated_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP ); -- Create categories table CREATE TABLE IF NOT EXISTS categories ( id UUID PRIMARY KEY DEFAULT gen_random_uuid(), user_id UUID NOT NULL REFERENCES auth.users(id) ON DELETE CASCADE, name TEXT NOT NULL, color TEXT DEFAULT '#3b82f6', created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP, UNIQUE(user_id, name) ); -- Create transactions table CREATE TABLE IF NOT EXISTS transactions ( id UUID PRIMARY KEY DEFAULT gen_random_uuid(), user_id UUID NOT NULL REFERENCES auth.users(id) ON DELETE CASCADE, description TEXT NOT NULL, amount DECIMAL(12, 2) NOT NULL, type TEXT NOT NULL CHECK (type IN ('income', 'expense')), category_id UUID REFERENCES categories(id) ON DELETE SET NULL, date DATE NOT NULL DEFAULT CURRENT_DATE, created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP, updated_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP ); -- Enable RLS ALTER TABLE profiles ENABLE ROW LEVEL SECURITY; ALTER TABLE categories ENABLE ROW LEVEL SECURITY; ALTER TABLE transactions ENABLE ROW LEVEL SECURITY; -- RLS Policies for profiles CREATE POLICY "Users can view their own profile" ON profiles FOR SELECT USING (auth.uid() = id); CREATE POLICY "Users can update their own profile" ON profiles FOR UPDATE USING (auth.uid() = id); -- RLS Policies for categories CREATE POLICY "Users can view their own categories" ON categories FOR SELECT USING (auth.uid() = user_id); CREATE POLICY "Users can insert their own categories" ON categories FOR INSERT WITH CHECK (auth.uid() = user_id); CREATE POLICY "Users can update their own categories" ON categories FOR UPDATE USING (auth.uid() = user_id); CREATE POLICY "Users can delete their own categories" ON categories FOR DELETE USING (auth.uid() = user_id); -- RLS Policies for transactions CREATE POLICY "Users can view their own transactions" ON transactions FOR SELECT USING (auth.uid() = user_id); CREATE POLICY "Users can insert their own transactions" ON transactions FOR INSERT WITH CHECK (auth.uid() = user_id); CREATE POLICY "Users can update their own transactions" ON transactions FOR UPDATE USING (auth.uid() = user_id); CREATE POLICY "Users can delete their own transactions" ON transactions FOR DELETE USING (auth.uid() = user_id); -- Create indexes for performance CREATE INDEX idx_categories_user_id ON categories(user_id); CREATE INDEX idx_transactions_user_id ON transactions(user_id); CREATE INDEX idx_transactions_date ON transactions(date); CREATE INDEX idx_transactions_category_id ON transactions(category_id); [V0_FILE]typescriptreact:file="app/auth/layout.tsx" isMerged="true" import type React from "react" export default function AuthLayout({ children, }: { children: React.ReactNode }) { return (

{children}

) } [V0_FILE]typescriptreact:file="app/auth/reset-password/loading.tsx" isFixed="true" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/auth/callback/route.ts" isMerged="true" import { createServerClient } from "@supabase/ssr" import { cookies } from "next/headers" import { type NextRequest, NextResponse } from "next/server" export async function GET(request: NextRequest) { const { searchParams } = new URL(request.url) const code = searchParams.get("code") if (code) { const cookieStore = await cookies() const supabase = createServerClient( process.env.NEXT_PUBLIC_SUPABASE_URL!, process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!, { cookies: { getAll() { return cookieStore.getAll() }, setAll(cookiesToSet) { cookiesToSet.forEach(({ name, value, options }) => cookieStore.set(name, value, options)) }, }, }, ) await supabase.auth.exchangeCodeForSession(code) } return NextResponse.redirect(new URL("/", request.url)) } [V0_FILE]typescriptreact:file="components/ui/sheet.tsx" isQuickEdit="true" isMerged="true" "use client" import type * as React from "react" import * as SheetPrimitive from "@radix-ui/react-dialog" import { XIcon } from "lucide-react" import { cn } from "@/lib/utils" function Sheet({ ...props }: React.ComponentProps) { return } function SheetTrigger({ ...props }: React.ComponentProps) { return } function SheetClose({ ...props }: React.ComponentProps) { return } function SheetPortal({ ...props }: React.ComponentProps) { return } function SheetOverlay({ className, ...props }: React.ComponentProps) { return ( ) } function SheetContent({ className, children, side = "right", ...props }: React.ComponentProps & { side?: "top" | "right" | "bottom" | "left" }) { return ( {children} Close ) } function SheetHeader({ className, ...props }: React.ComponentProps<"div">) { return

} function SheetFooter({ className, ...props }: React.ComponentProps<"div">) { return

} function SheetTitle({ className, ...props }: React.ComponentProps) { return ( ) } function SheetDescription({ className, ...props }: React.ComponentProps) { return ( ) } export { Sheet, SheetTrigger, SheetClose, SheetContent, SheetHeader, SheetFooter, SheetTitle, SheetDescription } [V0_FILE]sql:file="scripts/02-add-category-field.sql" isMerged="true" -- Add category field to transactions table ALTER TABLE transactions ADD COLUMN IF NOT EXISTS category TEXT; -- Create index for category CREATE INDEX IF NOT EXISTS idx_transactions_category ON transactions(category); [V0_FILE]typescriptreact:file="components/user-profile-menu.tsx" isMerged="true" "use client" import { useState } from "react" import { useRouter } from "next/navigation" import { createBrowserClient } from "@/lib/supabase/client" import { Button } from "@/components/ui/button" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu" import { useEffect } from "react" export function UserProfileMenu() { const [user, setUser] = useState<{ email?: string; user_metadata?: { full_name?: string } } | null>(null) const [loading, setLoading] = useState(true) const router = useRouter() const supabase = createBrowserClient() useEffect(() => { const getUser = async () => { try { const { data: { user }, } = await supabase.auth.getUser() setUser(user) } catch (error) { console.error("Error fetching user:", error) } finally { setLoading(false) } } getUser() }, [supabase.auth]) const handleLogout = async () => { try { await supabase.auth.signOut() router.push("/auth/login") } catch (error) { console.error("Error logging out:", error) } } if (loading) { return

} if (!user) { return null } const displayName = user.user_metadata?.full_name || user.email || "User" const email = user.email || "" return ( My Account

{displayName}

{email}

Logout ) } [V0_FILE]typescript:file="lib/supabase/client.ts" isEdit="true" isMerged="true" import { createBrowserClient as createSupabaseBrowserClient } from "@supabase/ssr" let supabaseClient: ReturnType | null = null export function getSupabaseClient() { if (!supabaseClient) { supabaseClient = createSupabaseBrowserClient( process.env.NEXT_PUBLIC_SUPABASE_URL!, process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!, ) } return supabaseClient } export const createBrowserClient = getSupabaseClient [V0_FILE]sql:file="scripts/03-add-payment-methods.sql" isEdit="true" isMerged="true" -- Create payment_methods table CREATE TABLE IF NOT EXISTS payment_methods ( id UUID PRIMARY KEY DEFAULT gen_random_uuid(), user_id UUID NOT NULL REFERENCES auth.users(id) ON DELETE CASCADE, name TEXT NOT NULL, created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP, UNIQUE(user_id, name) ); -- Add payment_method column to transactions table ALTER TABLE transactions ADD COLUMN IF NOT EXISTS payment_method TEXT; -- Enable RLS for payment_methods ALTER TABLE payment_methods ENABLE ROW LEVEL SECURITY; -- RLS Policies for payment_methods CREATE POLICY "Users can view their own payment methods" ON payment_methods FOR SELECT USING (auth.uid() = user_id); CREATE POLICY "Users can insert their own payment methods" ON payment_methods FOR INSERT WITH CHECK (auth.uid() = user_id); CREATE POLICY "Users can update their own payment methods" ON payment_methods FOR UPDATE USING (auth.uid() = user_id); CREATE POLICY "Users can delete their own payment methods" ON payment_methods FOR DELETE USING (auth.uid() = user_id); -- Create index for performance CREATE INDEX idx_payment_methods_user_id ON payment_methods(user_id); [V0_FILE]sql:file="scripts/04-create-profile-trigger.sql" isMerged="true" -- Create a trigger to automatically create a profile when a user signs up CREATE OR REPLACE FUNCTION public.handle_new_user() RETURNS TRIGGER AS $$ BEGIN INSERT INTO public.profiles (id, email, full_name, created) VALUES ( NEW.id, NEW.email, NEW.raw_user_meta_data->>'full_name', NOW() ); RETURN NEW; END; $$ LANGUAGE plpgsql SECURITY DEFINER; -- Drop the trigger if it exists DROP TRIGGER IF EXISTS on_auth_user_created ON auth.users; -- Create the trigger CREATE TRIGGER on_auth_user_created AFTER INSERT ON auth.users FOR EACH ROW EXECUTE FUNCTION public.handle_new_user(); [V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true" import type React from "react" import type { Metadata } from "next" import { Geist, Geist_Mono } from "next/font/google" import "./globals.css" const geistSans = Geist({ subsets: ["latin"] }) const geistMono = Geist_Mono({ subsets: ["latin"] }) export const metadata: Metadata = { title: "Cash Manager", description: "Manage your cash and transactions", } export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {children} ) } [V0_FILE]sql:file="scripts/05-add-profile-creation-trigger.sql" isMerged="true" -- Create a trigger to automatically create a profile when a user signs up CREATE OR REPLACE FUNCTION public.handle_new_user() RETURNS TRIGGER AS $$ BEGIN INSERT INTO public.profiles (id, email, full_name) VALUES ( NEW.id, NEW.email, NEW.raw_user_meta_data->>'full_name' ); RETURN NEW; END; $$ LANGUAGE plpgsql SECURITY DEFINER; -- Drop the trigger if it exists DROP TRIGGER IF EXISTS on_auth_user_created ON auth.users; -- Create the trigger CREATE TRIGGER on_auth_user_created AFTER INSERT ON auth.users FOR EACH ROW EXECUTE FUNCTION public.handle_new_user(); -- Add INSERT policy for profiles to allow the trigger to create profiles CREATE POLICY "Service role can insert profiles" ON profiles FOR INSERT WITH CHECK (true); [V0_FILE]sql:file="scripts/06-fix-profiles-rls.sql" isMerged="true" -- Add INSERT policy for profiles table to allow users to create their own profile CREATE POLICY "Users can insert their own profile" ON profiles FOR INSERT WITH CHECK (auth.uid() = id); -- Fix the trigger to use correct column names CREATE OR REPLACE FUNCTION public.handle_new_user() RETURNS TRIGGER AS $$ BEGIN INSERT INTO public.profiles (id, email, full_name) VALUES ( NEW.id, NEW.email, NEW.raw_user_meta_data->>'full_name' ); RETURN NEW; END; $$ LANGUAGE plpgsql SECURITY DEFINER; [V0_FILE]sql:file="scripts/07-fix-profiles-insert-policy.sql" isMerged="true" -- Add INSERT policy for profiles table to allow users to create their own profile CREATE POLICY "Users can insert their own profile" ON profiles FOR INSERT WITH CHECK (auth.uid() = id); -- Create or replace the function to handle profile creation on auth user creation CREATE OR REPLACE FUNCTION public.handle_new_user() RETURNS TRIGGER AS $$ BEGIN INSERT INTO public.profiles (id, email, full_name) VALUES ( NEW.id, NEW.email, COALESCE(NEW.raw_user_meta_data->>'full_name', '') ) ON CONFLICT (id) DO UPDATE SET email = EXCLUDED.email, full_name = EXCLUDED.full_name, updated_at = CURRENT_TIMESTAMP; RETURN NEW; END; $$ LANGUAGE plpgsql SECURITY DEFINER; -- Drop existing trigger if it exists DROP TRIGGER IF EXISTS on_auth_user_created ON auth.users; -- Create trigger to automatically create profile when user signs up CREATE TRIGGER on_auth_user_created AFTER INSERT ON auth.users FOR EACH ROW EXECUTE FUNCTION public.handle_new_user(); [V0_FILE]typescript:file="lib/supabase/admin.ts" isMerged="true" import { createClient } from "@supabase/supabase-js" let adminClient: ReturnType | null = null export function getAdminClient() { if (!adminClient) { adminClient = createClient(process.env.NEXT_PUBLIC_SUPABASE_URL!, process.env.SUPABASE_SERVICE_ROLE_KEY!, { auth: { autoRefreshToken: false, persistSession: false, }, }) } return adminClient } [V0_FILE]typescript:file="app/actions/create-profile.ts" isEdit="true" isQuickEdit="true" isMerged="true" "use server" import { getAdminClient } from "@/lib/supabase/admin" export async function createUserProfile(userId: string, email: string, fullName: string) { try { const supabase = getAdminClient() const { data, error } = await supabase .from("profiles") .insert([ { id: userId, email: email, full_name: fullName, }, ]) .select() if (error) { // Ignore duplicate key errors (profile already exists) if (error.code === "23505") { console.log("[v0] Profile already exists for user:", userId) return { success: true, message: "Profile already exists" } } console.error("[v0] Profile creation error:", error) throw error } console.log("[v0] Profile created successfully:", data) return { success: true, message: "Profile created successfully", data } } catch (error: any) { console.error("[v0] Profile creation failed:", error.message) return { success: false, error: error.message || "Failed to create profile" } } } [V0_FILE]sql:file="scripts/08-create-profile-on-signup.sql" isMerged="true" -- Create a trigger function to automatically create a profile when a user signs up CREATE OR REPLACE FUNCTION public.handle_new_user() RETURNS TRIGGER AS $$ BEGIN INSERT INTO public.profiles (id, email, full_name) VALUES ( NEW.id, NEW.email, COALESCE(NEW.raw_user_meta_data->>'full_name', '') ) ON CONFLICT (id) DO NOTHING; RETURN NEW; END; $$ LANGUAGE plpgsql SECURITY DEFINER; -- Drop existing trigger if it exists DROP TRIGGER IF EXISTS on_auth_user_created ON auth.users; -- Create the trigger CREATE TRIGGER on_auth_user_created AFTER INSERT ON auth.users FOR EACH ROW EXECUTE FUNCTION public.handle_new_user(); [V0_FILE]sql:file="scripts/09-add-payment-methods-table.sql" isMerged="true" -- Create payment_methods table CREATE TABLE IF NOT EXISTS payment_methods ( id UUID PRIMARY KEY DEFAULT gen_random_uuid(), user_id UUID NOT NULL REFERENCES auth.users(id) ON DELETE CASCADE, name TEXT NOT NULL, created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP, UNIQUE(user_id, name) ); -- Enable RLS ALTER TABLE payment_methods ENABLE ROW LEVEL SECURITY; -- RLS Policies for payment_methods CREATE POLICY "Users can view their own payment methods" ON payment_methods FOR SELECT USING (auth.uid() = user_id); CREATE POLICY "Users can insert their own payment methods" ON payment_methods FOR INSERT WITH CHECK (auth.uid() = user_id); CREATE POLICY "Users can update their own payment methods" ON payment_methods FOR UPDATE USING (auth.uid() = user_id); CREATE POLICY "Users can delete their own payment methods" ON payment_methods FOR DELETE USING (auth.uid() = user_id); -- Create index for performance CREATE INDEX idx_payment_methods_user_id ON payment_methods(user_id); -- Add payment_method column to transactions table if it doesn't exist DO $$ BEGIN IF NOT EXISTS ( SELECT 1 FROM information_schema.columns WHERE table_name = 'transactions' AND column_name = 'payment_method' ) THEN ALTER TABLE transactions ADD COLUMN payment_method TEXT; END IF; END $$; [V0_FILE]markdown:file="SETUP_EMAIL_VERIFICATION.md" isMerged="true" # Email Verification Setup Guide ## Overview Email verification is enabled in the authentication flow. Users will receive a verification email after signing up. ## Prerequisites Before email verification works, you need to configure Supabase: ### 1. Enable Email Verification in Supabase 1. Go to your Supabase project dashboard 2. Navigate to **Authentication** → **Providers** → **Email** 3. Enable **Email Confirmations** 4. Set the **Confirmation Email Template** (optional, uses default) ### 2. Configure Email Provider Supabase uses Auth0's email service by default, but you can configure a custom provider: **Option A: Use Supabase's Built-in Email (Recommended for Testing)** - No additional setup needed - Emails may take a few minutes to arrive - Check spam folder if not received **Option B: Configure SendGrid (Recommended for Production)** 1. Create a SendGrid account at https://sendgrid.com 2. Generate an API key 3. In Supabase dashboard: - Go to **Project Settings** → **Email Templates** - Select **SendGrid** as the email provider - Enter your SendGrid API key - Configure sender email and name **Option C: Configure Mailgun** 1. Create a Mailgun account at https://mailgun.com 2. Get your API key and domain 3. In Supabase dashboard: - Go to **Project Settings** → **Email Templates** - Select **Mailgun** as the email provider - Enter your credentials ### 3. Set Redirect URL The redirect URL is used after users click the verification link: **Development:** \`\`\` NEXT_PUBLIC_DEV_SUPABASE_REDIRECT_URL=http://localhost:3000/auth/callback \`\`\` **Production:** \`\`\` NEXT_PUBLIC_DEV_SUPABASE_REDIRECT_URL=https://yourdomain.com/auth/callback \`\`\` ## Testing Email Verification 1. Sign up with a test email 2. Check your email inbox (and spam folder) 3. Click the verification link 4. You'll be automatically logged in and redirected to the dashboard ## Troubleshooting **Email not received:** - Check spam/junk folder - Verify email provider is configured in Supabase - Check that email confirmations are enabled - Wait a few minutes (emails can be delayed) **Verification link not working:** - Ensure redirect URL is correctly configured - Check that the callback route exists at `/auth/callback` - Verify the link hasn't expired (usually 24 hours) **Still having issues?** - Check Supabase logs in the dashboard - Verify environment variables are set correctly - Contact Supabase support [V0_FILE]typescript:file="app/actions/resend-verification-email.ts" isMerged="true" "use server" import { createServerClient } from "@/lib/supabase/server" export async function resendVerificationEmail(email: string) { try { const supabase = await createServerClient() // Get the user by email to resend verification const { data, error } = await supabase.auth.resend({ type: "signup", email: email, options: { emailRedirectTo: process.env.NEXT_PUBLIC_DEV_SUPABASE_REDIRECT_URL || `${process.env.NEXT_PUBLIC_SUPABASE_URL}/auth/callback`, }, }) if (error) { return { success: false, error: error.message || "Failed to resend verification email", } } return { success: true, message: "Verification email sent! Check your inbox.", } } catch (err: any) { console.error("[v0] Resend email error:", err) return { success: false, error: err.message || "Failed to resend verification email", } } } [V0_FILE]typescriptreact:file="app/auth/sign-up-success/page.tsx" isEdit="true" isMerged="true" "use client" import { useState } from "react" import Link from "next/link" import { useSearchParams } from "next/navigation" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { CheckCircle, AlertCircle, Mail, RotateCw } from "lucide-react" import { resendVerificationEmail } from "@/app/actions/resend-verification-email" export default function SignUpSuccessPage() { const searchParams = useSearchParams() const email = searchParams.get("email") || "" const [resending, setResending] = useState(false) const [resendMessage, setResendMessage] = useState("") const [resendError, setResendError] = useState("") const handleResendEmail = async () => { if (!email) { setResendError("Email not found. Please sign up again.") return } setResending(true) setResendMessage("") setResendError("") try { const result = await resendVerificationEmail(email) if (result.success) { setResendMessage(result.message || "Verification email sent!") } else { setResendError(result.error || "Failed to resend email") } } catch (err: any) { setResendError(err.message || "Failed to resend email") } finally { setResending(false) } } return (

Account Created! Verify your email to get started

Check your email

We've sent a verification link to {email || "your email address"} . Click the link to activate your account.

What's next?

Check your inbox for the verification email
Click the verification link in the email
You'll be logged in automatically
Start managing your finances!

{resendMessage && (

{resendMessage}

)} {resendError && (

{resendError}

)}

Didn't receive the email?

Check your spam folder or try resending the verification email below.

) } [V0_FILE]typescriptreact:file="app/auth/sign-up-success/loading.tsx" isFixed="true" isMerged="true" export default function Loading() { return null } [V0_FILE]typescript:file="lib/supabase/server.ts" isEdit="true" isQuickEdit="true" isMerged="true" import { createServerClient as createServerClientSSR } from "@supabase/ssr" import { cookies } from "next/headers" export async function createServerClient() { const cookieStore = await cookies() return createServerClientSSR(process.env.NEXT_PUBLIC_SUPABASE_URL!, process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!, { cookies: { getAll() { return cookieStore.getAll() }, setAll(cookiesToSet) { try { cookiesToSet.forEach(({ name, value, options }) => cookieStore.set(name, value, options)) } catch { // Handle cookie setting errors } }, }, }) } [V0_FILE]sql:file="scripts/10-add-balance-transaction-type.sql" isMerged="true" -- Update transactions table to support 'balance' type ALTER TABLE transactions DROP CONSTRAINT IF EXISTS transactions_type_check; ALTER TABLE transactions ADD CONSTRAINT transactions_type_check CHECK (type IN ('income', 'expense', 'balance')); [V0_FILE]typescriptreact:file="app/auth/login/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { useRouter } from "next/navigation" import Link from "next/link" import { getSupabaseClient } from "@/lib/supabase/client" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { AlertCircle } from "lucide-react" export default function LoginPage() { const router = useRouter() const supabase = getSupabaseClient() const [email, setEmail] = useState("") const [password, setPassword] = useState("") const [loading, setLoading] = useState(false) const [error, setError] = useState("") const validateForm = () => { if (!email.trim()) { setError("Email is required") return false } if (!password) { setError("Password is required") return false } return true } const handleLogin = async (e: React.FormEvent) => { e.preventDefault() setError("") setLoading(true) try { if (!validateForm()) { setLoading(false) return } const { error: signInError } = await supabase.auth.signInWithPassword({ email, password, }) if (signInError) { throw new Error(signInError.message) } console.log("[v0] User logged in successfully") router.push("/") router.refresh() } catch (err: any) { console.error("[v0] Login error:", err) setError(err.message || "Failed to sign in. Please check your credentials.") } finally { setLoading(false) } } return (

Welcome Back Sign in to your cash management account

{error && (

{error}

)}

Email setEmail(e.target.value)} disabled={loading} required autoComplete="off" className="bg-slate-700/50 border-slate-600 text-white placeholder:text-slate-500" />

Password setPassword(e.target.value)} disabled={loading} required autoComplete="off" className="bg-slate-700/50 border-slate-600 text-white placeholder:text-slate-500" />

Forgot password?

Don't have an account?{" "} Sign Up

) } [V0_FILE]typescriptreact:file="app/auth/sign-up/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { useRouter } from "next/navigation" import Link from "next/link" import { getSupabaseClient } from "@/lib/supabase/client" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { AlertCircle, CheckCircle } from "lucide-react" import { createUserProfile } from "@/app/actions/create-profile" export default function SignUpPage() { const router = useRouter() const supabase = getSupabaseClient() const [email, setEmail] = useState("") const [password, setPassword] = useState("") const [fullName, setFullName] = useState("") const [loading, setLoading] = useState(false) const [error, setError] = useState("") const [success, setSuccess] = useState(false) const validateForm = () => { if (!fullName.trim()) { setError("Full name is required") return false } if (!email.trim()) { setError("Email is required") return false } if (password.length < 6) { setError("Password must be at least 6 characters") return false } return true } const handleSignUp = async (e: React.FormEvent) => { e.preventDefault() setError("") setLoading(true) try { if (!validateForm()) { setLoading(false) return } const { data, error: signUpError } = await supabase.auth.signUp({ email, password, options: { data: { full_name: fullName, }, emailRedirectTo: process.env.NEXT_PUBLIC_DEV_SUPABASE_REDIRECT_URL || `${window.location.origin}/auth/callback`, }, }) if (signUpError) { throw new Error(signUpError.message) } if (!data.user) { throw new Error("Failed to create user account") } console.log("[v0] User created successfully:", data.user.id) const profileResult = await createUserProfile(data.user.id, data.user.email || email, fullName) if (!profileResult.success) { console.warn("[v0] Profile creation warning:", profileResult.error) // Don't throw - user is already created in auth, profile will be created by trigger } setSuccess(true) setTimeout(() => { router.push(`/auth/sign-up-success?email=${encodeURIComponent(email)}`) router.refresh() }, 1500) } catch (err: any) { console.error("[v0] Sign up error:", err) setError(err.message || "Failed to sign up. Please try again.") } finally { setLoading(false) } } return (

Create Account Sign up to start managing your finances

{error && (

{error}

)} {success && (

Account created! Redirecting...

)}

Full Name setFullName(e.target.value)} disabled={loading} required autoComplete="off" className="bg-slate-700/50 border-slate-600 text-white placeholder:text-slate-500" />

Email setEmail(e.target.value)} disabled={loading} required autoComplete="off" className="bg-slate-700/50 border-slate-600 text-white placeholder:text-slate-500" />

Password setPassword(e.target.value)} disabled={loading} required minLength={6} autoComplete="off" className="bg-slate-700/50 border-slate-600 text-white placeholder:text-slate-500" />

Minimum 6 characters

Already have an account?{" "} Sign In

) } [V0_FILE]typescriptreact:file="app/auth/forgot-password/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import { useState } from "react" import Link from "next/link" import { getSupabaseClient } from "@/lib/supabase/client" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { AlertCircle, CheckCircle } from "lucide-react" export default function ForgotPasswordPage() { const supabase = getSupabaseClient() const [email, setEmail] = useState("") const [loading, setLoading] = useState(false) const [error, setError] = useState("") const [success, setSuccess] = useState(false) const handleForgotPassword = async (e: React.FormEvent) => { e.preventDefault() setError("") setSuccess(false) setLoading(true) try { const { error: resetError } = await supabase.auth.resetPasswordForEmail(email, { redirectTo: process.env.NEXT_PUBLIC_DEV_SUPABASE_REDIRECT_URL || `${window.location.origin}/auth/reset-password`, }) if (resetError) throw resetError setSuccess(true) setEmail("") } catch (err: any) { setError(err.message || "Failed to send reset email") } finally { setLoading(false) } } return ( Reset Password Enter your email to receive a password reset link

Remember your password?{" "} Sign In

) } [V0_FILE]typescriptreact:file="app/auth/reset-password/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import { useState, useEffect } from "react" import { useRouter, useSearchParams } from "next/navigation" import { getSupabaseClient } from "@/lib/supabase/client" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { AlertCircle, CheckCircle } from "lucide-react" export default function ResetPasswordPage() { const router = useRouter() const searchParams = useSearchParams() const supabase = getSupabaseClient() const [password, setPassword] = useState("") const [confirmPassword, setConfirmPassword] = useState("") const [loading, setLoading] = useState(false) const [error, setError] = useState("") const [success, setSuccess] = useState(false) const [isValidToken, setIsValidToken] = useState(false) useEffect(() => { // Check if user has a valid session from the reset link const checkSession = async () => { const { data } = await supabase.auth.getSession() if (data.session) { setIsValidToken(true) } else { setError("Invalid or expired reset link. Please try again.") } } checkSession() }, [supabase.auth]) const handleResetPassword = async (e: React.FormEvent) => { e.preventDefault() setError("") if (password !== confirmPassword) { setError("Passwords do not match") return } if (password.length < 6) { setError("Password must be at least 6 characters") return } setLoading(true) try { const { error: updateError } = await supabase.auth.updateUser({ password, }) if (updateError) throw updateError setSuccess(true) setTimeout(() => { router.push("/auth/login") }, 2000) } catch (err: any) { setError(err.message || "Failed to reset password") } finally { setLoading(false) } } if (!isValidToken) { return (

{error}

) } return ( Set New Password Enter your new password below

{error && (

{error}

)} {success && (

Password reset successful! Redirecting...

)}

New Password setPassword(e.target.value)} required minLength={6} autoComplete="off" className="bg-slate-700/50 border-slate-600 text-white placeholder:text-slate-500" />

Confirm Password setConfirmPassword(e.target.value)} required minLength={6} autoComplete="off" className="bg-slate-700/50 border-slate-600 text-white placeholder:text-slate-500" />

) } [V0_FILE]typescriptreact:file="app/(app)/reports/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import useSWR from "swr" import { useMemo, useRef, useState } from "react" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Button } from "@/components/ui/button" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { TransactionsTable, currency } from "@/components/transactions-table" import NewTransactionDialog from "@/components/new-transaction-dialog" import html2canvas from "html2canvas" import { jsPDF } from "jspdf" const fetcher = (url: string) => fetch(url).then((r) => r.json()) type SortKey = "date_desc" | "date_asc" | "amount_desc" | "amount_asc" type QuickRange = "all" | "today" | "current_month" | "last_7" | "last_month" | "last_90" export default function ReportsPage() { // Advanced filters const [q, setQ] = useState("") const [type, setType] = useState<"all" | "income" | "expense">("all") const [category, setCategory] = useState("all") const [paymentMethod, setPaymentMethod] = useState("all") const [minAmount, setMinAmount] = useState("") const [maxAmount, setMaxAmount] = useState("") const [startDate, setStartDate] = useState("") const [endDate, setEndDate] = useState("") const [sort, setSort] = useState("date_desc") const [page, setPage] = useState(1) const [pageSize, setPageSize] = useState(20) const [quickRange, setQuickRange] = useState("all") const reportRef = useRef(null) const { data: catResp } = useSWR("/api/categories", fetcher) const { data: pmResp } = useSWR("/api/payment-methods", fetcher) const query = useMemo(() => { const params = new URLSearchParams() if (q) params.set("q", q) if (type !== "all") params.set("type", type) if (category !== "all") params.set("category", category) if (paymentMethod !== "all") params.set("payment_method", paymentMethod) if (minAmount) params.set("minAmount", minAmount) if (maxAmount) params.set("maxAmount", maxAmount) if (startDate) params.set("startDate", startDate) if (endDate) params.set("endDate", endDate) params.set("sort", sort) params.set("page", String(page)) params.set("pageSize", String(pageSize)) return `/api/transactions?${params.toString()}` }, [q, type, category, paymentMethod, minAmount, maxAmount, startDate, endDate, sort, page, pageSize]) const { data, mutate } = useSWR(query, fetcher) function apply() { setPage(1) } function setRangeByQuick(v: QuickRange) { setQuickRange(v) const now = new Date() let s: Date | null = null let e: Date | null = null switch (v) { case "today": { const d = new Date(now.getFullYear(), now.getMonth(), now.getDate()) s = d e = new Date(d) e.setDate(e.getDate() + 1) e.setMilliseconds(-1) break } case "current_month": { s = new Date(now.getFullYear(), now.getMonth(), 1) e = new Date(now.getFullYear(), now.getMonth() + 1, 0) break } case "last_7": { e = now s = new Date(now) s.setDate(s.getDate() - 6) break } case "last_month": { s = new Date(now.getFullYear(), now.getMonth() - 1, 1) e = new Date(now.getFullYear(), now.getMonth(), 0) break } case "last_90": { e = now s = new Date(now) s.setDate(s.getDate() - 89) break } case "all": default: { s = null e = null } } setStartDate(s ? s.toISOString().slice(0, 10) : "") setEndDate(e ? e.toISOString().slice(0, 10) : "") setPage(1) } async function exportCSV() { const rows = [ ["Date", "Description", "Category", "Payment Method", "Type", "Amount"], ...(data?.data || []).map((t: any) => [ new Date(t.date).toLocaleDateString(), t.description, t.category, t.payment_method || "N/A", t.type, t.amount, ]), ] const csv = rows.map((r) => r.map((c) => `"${String(c).replace(/"/g, '""')}"`).join(",")).join("\n") const blob = new Blob([csv], { type: "text/csv;charset=utf-8" }) const url = URL.createObjectURL(blob) const a = document.createElement("a") a.href = url a.download = "report.csv" a.click() URL.revokeObjectURL(url) } async function exportPDF() { if (!reportRef.current) { alert("Report data not found. Please try again.") return } const el = reportRef.current // Save original inline styles to restore after snapshot const originalBg = el.style.backgroundColor const originalColor = el.style.color try { console.log("[v0] Starting PDF export...") // Ensure readable snapshot regardless of dark theme el.style.backgroundColor = "#ffffff" el.style.color = "#000000" // Higher scale for sharper text, allow CORS to avoid taint console.log("[v0] Converting element to canvas...") const canvas = await html2canvas(el, { scale: Math.min(2, window.devicePixelRatio || 1), useCORS: true, allowTaint: true, backgroundColor: "#ffffff", windowWidth: el.scrollWidth, windowHeight: el.scrollHeight, logging: false, }) console.log("[v0] Canvas created successfully, converting to image...") const imgData = canvas.toDataURL("image/png") console.log("[v0] Creating PDF document...") const pdf = new jsPDF("p", "mm", "a4") const pageWidth = pdf.internal.pageSize.getWidth() const pageHeight = pdf.internal.pageSize.getHeight() const imgWidth = pageWidth const imgHeight = (canvas.height * imgWidth) / canvas.width let heightLeft = imgHeight let position = 0 pdf.addImage(imgData, "PNG", 0, position, imgWidth, imgHeight) heightLeft -= pageHeight // Correct multipage placement while (heightLeft > 0) { position = -(imgHeight - heightLeft) pdf.addPage() pdf.addImage(imgData, "PNG", 0, position, imgWidth, imgHeight) heightLeft -= pageHeight } console.log("[v0] Saving PDF...") pdf.save("report.pdf") console.log("[v0] PDF exported successfully") } catch (err) { console.error("[v0] PDF export failed:", err) console.error("[v0] Error details:", { message: err instanceof Error ? err.message : String(err), stack: err instanceof Error ? err.stack : undefined, }) alert( "Export to PDF failed. Please try again or use the CSV export.\n\nIf the problem persists, try exporting as CSV instead.", ) } finally { // Restore original styles el.style.backgroundColor = originalBg el.style.color = originalColor } } return (

Reports — Advanced Filters

mutate()} />

setQ(e.target.value)} autoComplete="off" />

setMinAmount(e.target.value)} autoComplete="off" /> setMaxAmount(e.target.value)} autoComplete="off" /> setStartDate(e.target.value)} autoComplete="off" /> setEndDate(e.target.value)} autoComplete="off" />

Summary: Inflow {currency(data?.summary?.inflow || 0)} · Outflow {currency(data?.summary?.outflow || 0)} · Net {currency(data?.summary?.net || 0)}

setPage(p)} />

) } [V0_FILE]typescript:file="app/api/account/delete/route.ts" isMerged="true" import { createServerClient } from "@supabase/ssr" import { cookies } from "next/headers" import { type NextRequest, NextResponse } from "next/server" export async function POST(request: NextRequest) { try { const cookieStore = await cookies() const supabase = createServerClient(process.env.NEXT_PUBLIC_SUPABASE_URL!, process.env.SUPABASE_SERVICE_ROLE_KEY!, { cookies: { getAll() { return cookieStore.getAll() }, setAll(cookiesToSet) { try { cookiesToSet.forEach(({ name, value, options }) => cookieStore.set(name, value, options)) } catch { // The `setAll` method was called from a Server Component. // This can be ignored if you have middleware refreshing // user sessions. } }, }, }) const { data: { user }, } = await supabase.auth.getUser() if (!user) { return NextResponse.json({ error: "Unauthorized" }, { status: 401 }) } // Delete transactions await supabase.from("transactions").delete().eq("user_id", user.id) // Delete categories await supabase.from("categories").delete().eq("user_id", user.id) // Delete payment methods await supabase.from("payment_methods").delete().eq("user_id", user.id) const { error } = await supabase.auth.admin.deleteUser(user.id) if (error) { console.error("[v0] Delete user error:", error) return NextResponse.json({ error: error.message }, { status: 400 }) } return NextResponse.json({ success: true }) } catch (error: any) { console.error("[v0] Delete account error:", error) return NextResponse.json({ error: error.message }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/categories/route.ts" isEdit="true" isQuickEdit="true" isMerged="true" import { NextResponse } from "next/server" import { createServerClient } from "@/lib/supabase/server" export async function GET(req: Request) { try { const supabase = await createServerClient() const { data: { user }, } = await supabase.auth.getUser() if (!user) { return NextResponse.json({ error: "Unauthorized" }, { status: 401 }) } const { data, error } = await supabase.from("categories").select("name").eq("user_id", user.id).order("name") if (error) { console.error("[v0] Error:", error) return NextResponse.json({ error: "Failed to fetch categories" }, { status: 500 }) } const categories = data?.map((c: any) => c.name) || [] return NextResponse.json({ categories }) } catch (e: any) { console.error("[v0] Error:", e) return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } export async function POST(req: Request) { try { const supabase = await createServerClient() const { data: { user }, } = await supabase.auth.getUser() if (!user) { return NextResponse.json({ error: "Unauthorized" }, { status: 401 }) } const body = await req.json() const name = typeof body?.name === "string" ? body.name : "" const trimmed = name.trim() if (!trimmed) { return NextResponse.json({ error: "Name is required" }, { status: 400 }) } if (trimmed.length > 40) { return NextResponse.json({ error: "Name too long (max 40 chars)" }, { status: 400 }) } // Check if already exists const { data: existing } = await supabase .from("categories") .select("id") .eq("user_id", user.id) .eq("name", trimmed) .single() if (existing) { return NextResponse.json({ error: "Category already exists" }, { status: 409 }) } const { error } = await supabase.from("categories").insert({ user_id: user.id, name: trimmed, }) if (error) { console.error("[v0] Insert error:", error) return NextResponse.json({ error: "Failed to create category" }, { status: 500 }) } // Return updated list const { data } = await supabase.from("categories").select("name").eq("user_id", user.id).order("name") const categories = data?.map((c: any) => c.name) || [] return NextResponse.json({ categories }, { status: 201 }) } catch (e: any) { console.error("[v0] Error:", e) return NextResponse.json({ error: "Invalid request" }, { status: 400 }) } } export async function DELETE(req: Request) { try { const supabase = await createServerClient() const { data: { user }, } = await supabase.auth.getUser() if (!user) { return NextResponse.json({ error: "Unauthorized" }, { status: 401 }) } const body = await req.json() const name = typeof body?.name === "string" ? body.name : "" const trimmed = name.trim() if (!trimmed) { return NextResponse.json({ error: "Name is required" }, { status: 400 }) } // Delete the category const { error } = await supabase.from("categories").delete().eq("user_id", user.id).eq("name", trimmed) if (error) { console.error("[v0] Delete error:", error) return NextResponse.json({ error: "Failed to delete category" }, { status: 500 }) } // Return updated list const { data } = await supabase.from("categories").select("name").eq("user_id", user.id).order("name") const categories = data?.map((c: any) => c.name) || [] return NextResponse.json({ categories }) } catch (e: any) { console.error("[v0] Error:", e) return NextResponse.json({ error: "Invalid request" }, { status: 400 }) } } [V0_FILE]typescript:file="app/api/payment-methods/route.ts" isEdit="true" isQuickEdit="true" isMerged="true" import { NextResponse } from "next/server" import { createServerClient } from "@/lib/supabase/server" export async function GET(req: Request) { try { const supabase = await createServerClient() const { data: { user }, } = await supabase.auth.getUser() if (!user) { return NextResponse.json({ error: "Unauthorized" }, { status: 401 }) } const { data, error } = await supabase.from("payment_methods").select("name").eq("user_id", user.id).order("name") if (error) { console.error("[v0] Error:", error) return NextResponse.json({ error: "Failed to fetch payment methods" }, { status: 500 }) } const paymentMethods = data?.map((p: any) => p.name) || [] return NextResponse.json({ paymentMethods }) } catch (e: any) { console.error("[v0] Error:", e) return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } export async function POST(req: Request) { try { const supabase = await createServerClient() const { data: { user }, } = await supabase.auth.getUser() if (!user) { return NextResponse.json({ error: "Unauthorized" }, { status: 401 }) } const body = await req.json() const name = typeof body?.name === "string" ? body.name : "" const trimmed = name.trim() if (!trimmed) { return NextResponse.json({ error: "Name is required" }, { status: 400 }) } if (trimmed.length > 40) { return NextResponse.json({ error: "Name too long (max 40 chars)" }, { status: 400 }) } // Check if already exists const { data: existing } = await supabase .from("payment_methods") .select("id") .eq("user_id", user.id) .eq("name", trimmed) .single() if (existing) { return NextResponse.json({ error: "Payment method already exists" }, { status: 409 }) } const { error } = await supabase.from("payment_methods").insert({ user_id: user.id, name: trimmed, }) if (error) { console.error("[v0] Insert error:", error) return NextResponse.json({ error: "Failed to create payment method" }, { status: 500 }) } // Return updated list const { data } = await supabase.from("payment_methods").select("name").eq("user_id", user.id).order("name") const paymentMethods = data?.map((p: any) => p.name) || [] return NextResponse.json({ paymentMethods }, { status: 201 }) } catch (e: any) { console.error("[v0] Error:", e) return NextResponse.json({ error: "Invalid request" }, { status: 400 }) } } export async function DELETE(req: Request) { try { const supabase = await createServerClient() const { data: { user }, } = await supabase.auth.getUser() if (!user) { return NextResponse.json({ error: "Unauthorized" }, { status: 401 }) } const body = await req.json() const name = typeof body?.name === "string" ? body.name : "" const trimmed = name.trim() if (!trimmed) { return NextResponse.json({ error: "Name is required" }, { status: 400 }) } // Delete the payment method const { error } = await supabase.from("payment_methods").delete().eq("user_id", user.id).eq("name", trimmed) if (error) { console.error("[v0] Delete error:", error) return NextResponse.json({ error: "Failed to delete payment method" }, { status: 500 }) } // Return updated list const { data } = await supabase.from("payment_methods").select("name").eq("user_id", user.id).order("name") const paymentMethods = data?.map((p: any) => p.name) || [] return NextResponse.json({ paymentMethods }) } catch (e: any) { console.error("[v0] Error:", e) return NextResponse.json({ error: "Invalid request" }, { status: 400 }) } } [V0_FILE]typescriptreact:file="app/(app)/categories/page.tsx" isEdit="true" isMerged="true" "use client" import type React from "react" import { useState } from "react" import useSWR from "swr" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Trash2 } from "lucide-react" const fetcher = (url: string) => fetch(url).then((r) => r.json()) export default function CategoriesPage() { const { data, isLoading, error, mutate } = useSWR<{ categories: string[] }>("/api/categories", fetcher) const { data: pmData, isLoading: pmLoading, error: pmError, mutate: pmMutate, } = useSWR<{ paymentMethods: string[] }>("/api/payment-methods", fetcher) const [name, setName] = useState("") const [submitting, setSubmitting] = useState(false) const [message, setMessage] = useState(null) const [pmName, setPmName] = useState("") const [pmSubmitting, setPmSubmitting] = useState(false) const [pmMessage, setPmMessage] = useState(null) const [deletingCategory, setDeletingCategory] = useState(null) const [deletingPaymentMethod, setDeletingPaymentMethod] = useState(null) async function onSubmit(e: React.FormEvent) { e.preventDefault() setMessage(null) const trimmed = name.trim() if (!trimmed) { setMessage("Please enter a category name.") return } setSubmitting(true) try { const res = await fetch("/api/categories", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ name: trimmed }), }) const json = await res.json() if (!res.ok) { setMessage(json?.error || "Failed to create category.") } else { setName("") await mutate() setMessage("Category created.") } } catch { setMessage("Network error. Please try again.") } finally { setSubmitting(false) } } async function onPmSubmit(e: React.FormEvent) { e.preventDefault() setPmMessage(null) const trimmed = pmName.trim() if (!trimmed) { setPmMessage("Please enter a payment method name.") return } setPmSubmitting(true) try { const res = await fetch("/api/payment-methods", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ name: trimmed }), }) const json = await res.json() if (!res.ok) { setPmMessage(json?.error || "Failed to create payment method.") } else { setPmName("") await pmMutate() setPmMessage("Payment method created.") } } catch { setPmMessage("Network error. Please try again.") } finally { setPmSubmitting(false) } } async function handleDeleteCategory(categoryName: string) { if (!confirm(`Are you sure you want to delete "${categoryName}"?`)) { return } setDeletingCategory(categoryName) try { const res = await fetch("/api/categories", { method: "DELETE", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ name: categoryName }), }) const json = await res.json() if (!res.ok) { alert(json?.error || "Failed to delete category.") } else { await mutate() } } catch { alert("Network error. Please try again.") } finally { setDeletingCategory(null) } } async function handleDeletePaymentMethod(methodName: string) { if (!confirm(`Are you sure you want to delete "${methodName}"?`)) { return } setDeletingPaymentMethod(methodName) try { const res = await fetch("/api/payment-methods", { method: "DELETE", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ name: methodName }), }) const json = await res.json() if (!res.ok) { alert(json?.error || "Failed to delete payment method.") } else { await pmMutate() } } catch { alert("Network error. Please try again.") } finally { setDeletingPaymentMethod(null) } } return (

{/* Create Category */} Create Category {/* Existing Categories */} Existing Categories {isLoading ? (

) : error ? (

Failed to load categories.

) : (

)} {/* Create Payment Method */} Create Payment Method {/* Existing Payment Methods */} Existing Payment Methods {pmLoading ? (

) : pmError ? (

Failed to load payment methods.

) : (

{pm}

)}

) } [V0_FILE]typescriptreact:file="app/(app)/transactions/page.tsx" isEdit="true" isMerged="true" "use client" import useSWR from "swr" import { useState, useMemo } from "react" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Button } from "@/components/ui/button" import TransactionsTable, { currency } from "@/components/transactions-table" import NewTransactionDialog from "@/components/new-transaction-dialog" const fetcher = (url: string) => fetch(url).then((r) => r.json()) export default function TransactionsPage() { const [q, setQ] = useState("") const [type, setType] = useState<"all" | "income" | "expense">("all") const [page, setPage] = useState(1) const query = useMemo(() => { const params = new URLSearchParams() if (q) params.set("q", q) if (type !== "all") params.set("type", type) params.set("page", String(page)) params.set("pageSize", "20") params.set("sort", "date_desc") return `/api/transactions?${params.toString()}` }, [q, type, page]) const { data, mutate } = useSWR(query, fetcher, { revalidateOnFocus: true, revalidateOnReconnect: true, }) const handleMutate = async () => { console.log("[v0] Mutate called") try { // Add a small delay to ensure database has been updated await new Promise((resolve) => setTimeout(resolve, 300)) // Force a fresh fetch by passing undefined and revalidate: true await mutate(undefined, { revalidate: true }) console.log("[v0] Mutate completed successfully") } catch (error) { console.error("[v0] Mutate error:", error) // Silently fail - SWR will retry automatically } } return (

Transactions

mutate()} />

setQ(e.target.value)} autoComplete="off" />

Summary: Inflow {currency(data?.summary?.inflow || 0)} · Outflow {currency(data?.summary?.outflow || 0)} · Net {currency(data?.summary?.net || 0)}

) } [V0_FILE]sql:file="scripts/add_security_features.sql" isMerged="true" -- Add last_password_change column to profiles table ALTER TABLE profiles ADD COLUMN IF NOT EXISTS last_password_change TIMESTAMP WITH TIME ZONE DEFAULT NOW(); -- Update existing records to have a default value UPDATE profiles SET last_password_change = created_at WHERE last_password_change IS NULL; [V0_FILE]typescriptreact:file="components/account-settings.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { useRouter } from "next/navigation" import { getSupabaseClient } from "@/lib/supabase/client" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Card } from "@/components/ui/card" import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, } from "@/components/ui/alert-dialog" import { useToast } from "@/hooks/use-toast" import { Loader2 } from "lucide-react" export function AccountSettings() { const router = useRouter() const { toast } = useToast() const supabase = getSupabaseClient() const [fullName, setFullName] = useState("") const [email, setEmail] = useState("") const [currentPassword, setCurrentPassword] = useState("") const [newPassword, setNewPassword] = useState("") const [confirmPassword, setConfirmPassword] = useState("") const [loadingName, setLoadingName] = useState(false) const [loadingEmail, setLoadingEmail] = useState(false) const [loadingPassword, setLoadingPassword] = useState(false) const [loadingDelete, setLoadingDelete] = useState(false) const [isLoaded, setIsLoaded] = useState(false) if (!isLoaded) { const loadUserData = async () => { const { data: { user }, } = await supabase.auth.getUser() if (user) { setFullName(user.user_metadata?.full_name || "") setEmail(user.email || "") } setIsLoaded(true) } loadUserData() } const handleUpdateName = async (e: React.FormEvent) => { e.preventDefault() if (!fullName.trim()) { toast({ title: "Error", description: "Name cannot be empty", variant: "destructive" }) return } setLoadingName(true) try { const { error } = await supabase.auth.updateUser({ data: { full_name: fullName }, }) if (error) throw error toast({ title: "Success", description: "Name updated successfully" }) } catch (error: any) { toast({ title: "Error", description: error.message, variant: "destructive" }) } finally { setLoadingName(false) } } const handleUpdateEmail = async (e: React.FormEvent) => { e.preventDefault() if (!email.trim()) { toast({ title: "Error", description: "Email cannot be empty", variant: "destructive" }) return } setLoadingEmail(true) try { const { error } = await supabase.auth.updateUser({ email }) if (error) throw error toast({ title: "Success", description: "Email update confirmation sent to your new email" }) } catch (error: any) { toast({ title: "Error", description: error.message, variant: "destructive" }) } finally { setLoadingEmail(false) } } const handleUpdatePassword = async (e: React.FormEvent) => { e.preventDefault() if (!currentPassword || !newPassword || !confirmPassword) { toast({ title: "Error", description: "All password fields are required", variant: "destructive" }) return } if (newPassword !== confirmPassword) { toast({ title: "Error", description: "New passwords do not match", variant: "destructive" }) return } if (newPassword.length < 6) { toast({ title: "Error", description: "Password must be at least 6 characters", variant: "destructive" }) return } setLoadingPassword(true) try { const { error } = await supabase.auth.updateUser({ password: newPassword }) if (error) throw error const { data: { user }, } = await supabase.auth.getUser() if (user) { await supabase.from("profiles").update({ last_password_change: new Date().toISOString() }).eq("id", user.id) } setCurrentPassword("") setNewPassword("") setConfirmPassword("") toast({ title: "Success", description: "Password updated successfully" }) } catch (error: any) { toast({ title: "Error", description: error.message, variant: "destructive" }) } finally { setLoadingPassword(false) } } const handleDeleteAccount = async () => { setLoadingDelete(true) try { const response = await fetch("/api/account/delete", { method: "POST", headers: { "Content-Type": "application/json", }, }) if (!response.ok) { const data = await response.json() throw new Error(data.error || "Failed to delete account") } await supabase.auth.signOut() toast({ title: "Success", description: "Account deleted successfully" }) router.push("/auth/login") } catch (error: any) { console.error("[v0] Delete account error:", error) toast({ title: "Error", description: error.message, variant: "destructive" }) } finally { setLoadingDelete(false) } } return (

Account Settings

Manage your account information and security

For any Information / Query / Support / Feedback regarding Cash_MS, Please Contact at link.inv.help@gmail.com

{/* Update Name */}

Change Full Name

{/* Update Email */}

Change Email Address

{/* Update Password */}

Change Password

{/* Delete Account */}

Delete Account

This action cannot be undone. All your data will be permanently deleted.

For any Information / Query / Support / Feedback regarding Cash_MS, Please Contact at link.inv.help@gmail.com

Delete Account Are you sure you want to delete your account? This action cannot be undone and all your data will be permanently deleted.

Cancel {loadingDelete && } Delete

) } [V0_FILE]typescript:file="hooks/use-inactivity-logout.ts" isEdit="true" isMerged="true" "use client" import { useEffect, useRef } from "react" import { useRouter } from "next/navigation" import { createBrowserClient } from "@supabase/ssr" const supabase = createBrowserClient(process.env.NEXT_PUBLIC_SUPABASE_URL!, process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!) const INACTIVITY_TIMEOUT = 30 * 60 * 1000 // 30 minutes in milliseconds export function useInactivityLogout() { const router = useRouter() const timeoutRef = useRef(null) const lastActivityRef = useRef(Date.now()) const isInitializedRef = useRef(false) const resetInactivityTimer = () => { lastActivityRef.current = Date.now() console.log("[v0] Activity detected, resetting inactivity timer") // Clear existing timeout if (timeoutRef.current) { clearTimeout(timeoutRef.current) } // Set new timeout timeoutRef.current = setTimeout(async () => { console.log("[v0] Inactivity timeout reached (30 minutes), logging out user") try { await supabase.auth.signOut() console.log("[v0] User signed out successfully") router.push("/auth/login") } catch (error) { console.error("[v0] Error signing out:", error) router.push("/auth/login") } }, INACTIVITY_TIMEOUT) } useEffect(() => { // Only initialize once if (isInitializedRef.current) { return } isInitializedRef.current = true console.log("[v0] Initializing inactivity logout hook") // Track user activity const events = ["mousedown", "keydown", "scroll", "touchstart", "click", "mousemove"] const handleActivity = () => { resetInactivityTimer() } // Add event listeners events.forEach((event) => { document.addEventListener(event, handleActivity, true) }) // Initialize timer resetInactivityTimer() // Cleanup return () => { console.log("[v0] Cleaning up inactivity logout hook") events.forEach((event) => { document.removeEventListener(event, handleActivity, true) }) if (timeoutRef.current) { clearTimeout(timeoutRef.current) } } }, [router]) } [V0_FILE]typescriptreact:file="components/month-year-picker.tsx" isEdit="true" isMerged="true" "use client" import React from "react" import { useState } from "react" import { ChevronLeft, ChevronRight } from "lucide-react" import { Button } from "@/components/ui/button" interface MonthYearPickerProps { onDateChange: (startDate: string, endDate: string) => void } export function MonthYearPicker({ onDateChange }: MonthYearPickerProps) { const today = new Date() const [month, setMonth] = useState(today.getMonth()) const [year, setYear] = useState(today.getFullYear()) const handlePrevMonth = () => { if (month === 0) { setMonth(11) setYear(year - 1) } else { setMonth(month - 1) } } const handleNextMonth = () => { if (month === 11) { setMonth(0) setYear(year + 1) } else { setMonth(month + 1) } } const handleMonthChange = (e: React.ChangeEvent) => { setMonth(Number(e.target.value)) } const handleYearChange = (e: React.ChangeEvent) => { setYear(Number(e.target.value)) } // Now uses UTC date strings to avoid timezone conversion issues React.useEffect(() => { // Format: YYYY-MM-DD using UTC to avoid timezone shifts const startDate = `${year}-${String(month + 1).padStart(2, "0")}-01` // Get the last day of the month by going to the first day of next month and subtracting 1 day const nextMonth = month === 11 ? new Date(year + 1, 0, 1) : new Date(year, month + 1, 1) const lastDay = new Date(nextMonth.getTime() - 86400000) // Subtract 1 day in milliseconds const endDate = `${lastDay.getFullYear()}-${String(lastDay.getMonth() + 1).padStart(2, "0")}-${String(lastDay.getDate()).padStart(2, "0")}` onDateChange(startDate, endDate) }, [month, year, onDateChange]) const monthNames = [ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December", ] const currentYear = new Date().getFullYear() const years = Array.from({ length: currentYear - 2023 + 1 }, (_, i) => 2023 + i) return (

) } [V0_FILE]typescript:file="hooks/use-password-expiration.ts" isEdit="true" isMerged="true" "use client" import { useEffect, useState, useRef } from "react" import { useRouter } from "next/navigation" import { createBrowserClient } from "@supabase/ssr" const supabase = createBrowserClient(process.env.NEXT_PUBLIC_SUPABASE_URL!, process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!) export function usePasswordExpiration() { const router = useRouter() const [isExpired, setIsExpired] = useState(false) const [isLoading, setIsLoading] = useState(true) const isInitializedRef = useRef(false) useEffect(() => { const checkPasswordExpiration = async () => { try { const { data: { user }, } = await supabase.auth.getUser() if (!user) { console.log("[v0] No user found") setIsLoading(false) return } // Fetch user profile to check last password change const { data: profile, error } = await supabase .from("profiles") .select("last_password_change, created_at") .eq("id", user.id) .single() if (error) { console.error("[v0] Error fetching profile:", error) setIsLoading(false) return } let referenceDate = null if (profile?.last_password_change) { referenceDate = new Date(profile.last_password_change) } else if (profile?.created_at) { // If no password change date, use account creation date referenceDate = new Date(profile.created_at) console.log("[v0] No password change date found, using created_at:", referenceDate) } if (referenceDate) { const now = new Date() const daysSinceChange = Math.floor((now.getTime() - referenceDate.getTime()) / (1000 * 60 * 60 * 24)) console.log("[v0] Days since change:", daysSinceChange) if (daysSinceChange > 90) { console.log("[v0] Password expired! Redirecting to change password page") setIsExpired(true) if (!window.location.pathname.includes("change-password-required")) { router.push("/auth/change-password-required") } } } } catch (error) { console.error("[v0] Error checking password expiration:", error) } finally { setIsLoading(false) } } if (!isInitializedRef.current) { isInitializedRef.current = true checkPasswordExpiration() } }, [router]) return { isExpired, isLoading } } [V0_FILE]typescript:file="middleware.ts" isEdit="true" isMerged="true" import { type NextRequest, NextResponse } from "next/server" import { createServerClient } from "@supabase/ssr" export async function middleware(request: NextRequest) { const supabaseResponse = NextResponse.next({ request, }) const supabase = createServerClient( process.env.NEXT_PUBLIC_SUPABASE_URL!, process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!, { cookies: { getAll() { return request.cookies.getAll() }, setAll(cookiesToSet) { cookiesToSet.forEach(({ name, value, options }) => supabaseResponse.cookies.set(name, value, options)) }, }, }, ) const { data: { user }, } = await supabase.auth.getUser() // Redirect unauthenticated users to login if (!user && !request.nextUrl.pathname.startsWith("/auth") && !request.nextUrl.pathname.startsWith("/api")) { const url = request.nextUrl.clone() url.pathname = "/auth/login" return NextResponse.redirect(url) } if ( user && request.nextUrl.pathname.startsWith("/auth") && !request.nextUrl.pathname.includes("change-password-required") ) { const url = request.nextUrl.clone() url.pathname = "/" return NextResponse.redirect(url) } return supabaseResponse } export const config = { matcher: ["/((?!_next/static|_next/image|favicon.ico|.*\\.svg).*)"], } [V0_FILE]typescriptreact:file="app/auth/change-password-required/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { useRouter } from "next/navigation" import { createBrowserClient } from "@supabase/ssr" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { AlertCircle } from "lucide-react" const supabase = createBrowserClient(process.env.NEXT_PUBLIC_SUPABASE_URL!, process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!) export default function ChangePasswordRequiredPage() { const router = useRouter() const [newPassword, setNewPassword] = useState("") const [confirmPassword, setConfirmPassword] = useState("") const [error, setError] = useState("") const [isLoading, setIsLoading] = useState(false) const handleChangePassword = async (e: React.FormEvent) => { e.preventDefault() setError("") if (newPassword !== confirmPassword) { setError("Passwords do not match") return } if (newPassword.length < 8) { setError("Password must be at least 8 characters") return } setIsLoading(true) try { const { error: updateError } = await supabase.auth.updateUser({ password: newPassword, }) if (updateError) { setError(updateError.message) return } const { data: { user }, } = await supabase.auth.getUser() if (user) { const currentTime = new Date().toISOString() console.log("[v0] Updating password change date to:", currentTime) await supabase.from("profiles").update({ last_password_change: currentTime }).eq("id", user.id) } console.log("[v0] Password changed successfully, redirecting to dashboard") router.push("/") } catch (err) { setError("Failed to change password") console.error("[v0] Error changing password:", err) } finally { setIsLoading(false) } } return (

Password Change Required

Your password hasn't been changed in 90 days. For security reasons, you must change it now.

) } [V0_FILE]sql:file="scripts/add_bank_accounts_table.sql" isMerged="true" -- Create bank_accounts table CREATE TABLE IF NOT EXISTS public.bank_accounts ( id UUID PRIMARY KEY DEFAULT gen_random_uuid(), user_id UUID NOT NULL REFERENCES auth.users(id) ON DELETE CASCADE, bank_name TEXT NOT NULL, account_number TEXT NOT NULL, account_holder_name TEXT NOT NULL, created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(), updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(), UNIQUE(user_id, account_number) ); -- Enable RLS ALTER TABLE public.bank_accounts ENABLE ROW LEVEL SECURITY; -- Create RLS policies CREATE POLICY "Users can view their own bank accounts" ON public.bank_accounts FOR SELECT USING (auth.uid() = user_id); CREATE POLICY "Users can insert their own bank accounts" ON public.bank_accounts FOR INSERT WITH CHECK (auth.uid() = user_id); CREATE POLICY "Users can update their own bank accounts" ON public.bank_accounts FOR UPDATE USING (auth.uid() = user_id); CREATE POLICY "Users can delete their own bank accounts" ON public.bank_accounts FOR DELETE USING (auth.uid() = user_id); -- Create index for faster queries CREATE INDEX idx_bank_accounts_user_id ON public.bank_accounts(user_id); [V0_FILE]typescriptreact:file="app/(app)/settings/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState } from "react" import { AccountSettings } from "@/components/account-settings" import { Button } from "@/components/ui/button" export default function SettingsPage() { const [activeTab, setActiveTab] = useState("account") return (

Settings

{/* Sidebar Navigation */}

{/* Content Area */}

{activeTab === "account" && }

) } [V0_FILE]typescriptreact:file="components/app-shell.tsx" isEdit="true" isMerged="true" "use client" import type React from "react" import Link from "next/link" import { usePathname } from "next/navigation" import { cn } from "@/lib/utils" import { Button } from "@/components/ui/button" import { UserProfileMenu } from "@/components/user-profile-menu" import { usePasswordExpiration } from "@/hooks/use-password-expiration" import { useInactivityLogout } from "@/hooks/use-inactivity-logout" const NAV = [ { href: "/", label: "Dashboard" }, { href: "/transactions", label: "Transactions" }, { href: "/reports", label: "Reports" }, { href: "/categories", label: "Categories" }, { href: "/bank-accounts", label: "Bank Wallet" }, { href: "/settings", label: "Settings" }, ] export function AppShell({ children }: { children: React.ReactNode }) { const pathname = usePathname() usePasswordExpiration() useInactivityLogout() return (

Cash Management System

{children}

) } [V0_FILE]sql:file="scripts/02-create-bank-accounts.sql" isMerged="true" -- Create bank_accounts table CREATE TABLE IF NOT EXISTS bank_accounts ( id UUID PRIMARY KEY DEFAULT gen_random_uuid(), user_id UUID NOT NULL REFERENCES auth.users(id) ON DELETE CASCADE, bank_name VARCHAR(255) NOT NULL, account_number VARCHAR(255) NOT NULL, account_holder_name VARCHAR(255) NOT NULL, created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW() ); -- Enable RLS ALTER TABLE bank_accounts ENABLE ROW LEVEL SECURITY; -- Drop existing policies if they exist DROP POLICY IF EXISTS "Users can view their own bank accounts" ON bank_accounts; DROP POLICY IF EXISTS "Users can insert their own bank accounts" ON bank_accounts; DROP POLICY IF EXISTS "Users can delete their own bank accounts" ON bank_accounts; -- Create RLS policies CREATE POLICY "Users can view their own bank accounts" ON bank_accounts FOR SELECT USING (auth.uid() = user_id); CREATE POLICY "Users can insert their own bank accounts" ON bank_accounts FOR INSERT WITH CHECK (auth.uid() = user_id); CREATE POLICY "Users can delete their own bank accounts" ON bank_accounts FOR DELETE USING (auth.uid() = user_id); -- Create index for performance CREATE INDEX IF NOT EXISTS idx_bank_accounts_user_id ON bank_accounts(user_id); [V0_FILE]typescriptreact:file="components/bank-accounts.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import { useState } from "react" import useSWR from "swr" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Card } from "@/components/ui/card" import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, } from "@/components/ui/alert-dialog" import { useToast } from "@/hooks/use-toast" import { Loader2, Trash2 } from "lucide-react" interface BankAccount { id: string bank_name: string account_number: string account_holder_name: string created_at: string } const fetcher = (url: string) => fetch(url).then((res) => res.json()) export function BankAccounts() { const { toast } = useToast() const [bankName, setBankName] = useState("") const [accountNumber, setAccountNumber] = useState("") const [accountHolderName, setAccountHolderName] = useState("") const [isLoading, setIsLoading] = useState(false) const [isDeletingId, setIsDeletingId] = useState(null) const { data: accounts, mutate, isLoading: isDataLoading, error, } = useSWR("/api/bank-accounts", fetcher, { onError: (error) => { console.error("[v0] Failed to fetch bank accounts:", error) toast({ title: "Error", description: "Failed to load bank accounts. Please try again.", variant: "destructive", }) }, }) const handleAddAccount = async (e: React.FormEvent) => { e.preventDefault() if (!bankName.trim() || !accountNumber.trim() || !accountHolderName.trim()) { toast({ title: "Error", description: "All fields are required", variant: "destructive" }) return } setIsLoading(true) try { const response = await fetch("/api/bank-accounts", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ bank_name: bankName, account_number: accountNumber, account_holder_name: accountHolderName, }), }) if (!response.ok) { const error = await response.json() throw new Error(error.error || "Failed to add bank account") } await mutate() setBankName("") setAccountNumber("") setAccountHolderName("") toast({ title: "Success", description: "Bank account added successfully" }) } catch (error: any) { toast({ title: "Error", description: error.message, variant: "destructive" }) } finally { setIsLoading(false) } } const handleDeleteAccount = async (accountId: string) => { setIsDeletingId(accountId) try { const response = await fetch("/api/bank-accounts", { method: "DELETE", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ account_id: accountId }), }) if (!response.ok) { const error = await response.json() throw new Error(error.error || "Failed to delete bank account") } await mutate() toast({ title: "Success", description: "Bank account deleted successfully" }) } catch (error: any) { toast({ title: "Error", description: error.message, variant: "destructive" }) } finally { setIsDeletingId(null) } } return (

Bank Accounts

Add and manage your bank accounts

{/* Add Bank Account Form */}

Add Bank Account

{/* Bank Accounts List */}

Your Bank Accounts

{error ? (

Failed to load bank accounts. Please refresh the page.

) : isDataLoading ? (

Loading bank accounts...

) : !accounts || accounts.length === 0 ? (

No bank accounts added yet

) : (

{accounts.map((account) => (

Bank Name

{account.bank_name}

Account Number

{account.account_number}

Account Holder

{account.account_holder_name}

Delete Bank Account Are you sure you want to delete this bank account? This action cannot be undone.

Cancel handleDeleteAccount(account.id)} disabled={isDeletingId === account.id} className="transition-all hover:shadow-lg hover:shadow-red-600 border border-red-500 bg-gray-800 text-white hover:text-red-500 cursor-pointer" > {isDeletingId === account.id && } Delete

))}

)}

) } [V0_FILE]sql:file="scripts/03-create-bank-accounts-table.sql" isMerged="true" -- Create bank_accounts table CREATE TABLE IF NOT EXISTS public.bank_accounts ( id UUID PRIMARY KEY DEFAULT uuid_generate_v4(), user_id UUID NOT NULL REFERENCES auth.users(id) ON DELETE CASCADE, bank_name TEXT NOT NULL, account_number TEXT NOT NULL, account_holder_name TEXT NOT NULL, created_at TIMESTAMP WITH TIME ZONE DEFAULT now(), updated_at TIMESTAMP WITH TIME ZONE DEFAULT now() ); -- Enable RLS ALTER TABLE public.bank_accounts ENABLE ROW LEVEL SECURITY; -- Create policies CREATE POLICY "Users can view their own bank accounts" ON public.bank_accounts FOR SELECT USING (auth.uid() = user_id); CREATE POLICY "Users can insert their own bank accounts" ON public.bank_accounts FOR INSERT WITH CHECK (auth.uid() = user_id); CREATE POLICY "Users can update their own bank accounts" ON public.bank_accounts FOR UPDATE USING (auth.uid() = user_id); CREATE POLICY "Users can delete their own bank accounts" ON public.bank_accounts FOR DELETE USING (auth.uid() = user_id); -- Create index for faster queries CREATE INDEX IF NOT EXISTS idx_bank_accounts_user_id ON public.bank_accounts(user_id); [V0_FILE]sql:file="scripts/04-add-bank-account-to-transactions.sql" isMerged="true" -- Add bank_account_id column to transactions table ALTER TABLE transactions ADD COLUMN IF NOT EXISTS bank_account_id UUID REFERENCES bank_accounts(id) ON DELETE SET NULL; -- Create index for faster queries CREATE INDEX IF NOT EXISTS transactions_bank_account_id_idx ON transactions(bank_account_id); [V0_FILE]typescript:file="app/api/bank-accounts/route.ts" isEdit="true" isQuickEdit="true" isMerged="true" import { createServerClient } from "@supabase/ssr" import { cookies } from "next/headers" import { type NextRequest, NextResponse } from "next/server" export async function GET(req: NextRequest) { const cookieStore = await cookies() const supabase = createServerClient(process.env.NEXT_PUBLIC_SUPABASE_URL || "", process.env.SUPABASE_ANON_KEY || "", { cookies: { getAll() { return cookieStore.getAll() }, setAll(cookiesToSet) { cookieStore.getAll().forEach((cookie) => { cookieStore.delete(cookie.name) }) cookiesToSet.forEach(({ name, value, options }) => { cookieStore.set(name, value, options) }) }, }, }) const { data: { user }, } = await supabase.auth.getUser() if (!user) { return NextResponse.json({ error: "Unauthorized" }, { status: 401 }) } try { const { data, error } = await supabase .from("bank_accounts") .select("*") .eq("user_id", user.id) .order("created_at", { ascending: false }) if (error) throw error return NextResponse.json({ accounts: data || [] }) } catch (error: any) { console.error("[v0] Error fetching bank accounts:", error) return NextResponse.json({ error: error.message }, { status: 500 }) } } export async function POST(req: NextRequest) { const cookieStore = await cookies() const supabase = createServerClient(process.env.NEXT_PUBLIC_SUPABASE_URL || "", process.env.SUPABASE_ANON_KEY || "", { cookies: { getAll() { return cookieStore.getAll() }, setAll(cookiesToSet) { cookieStore.getAll().forEach((cookie) => { cookieStore.delete(cookie.name) }) cookiesToSet.forEach(({ name, value, options }) => { cookieStore.set(name, value, options) }) }, }, }) const { data: { user }, } = await supabase.auth.getUser() if (!user) { return NextResponse.json({ error: "Unauthorized" }, { status: 401 }) } try { const { bank_name, account_number, account_holder_name } = await req.json() if (!bank_name || !account_number || !account_holder_name) { return NextResponse.json({ error: "Missing required fields" }, { status: 400 }) } const { data, error } = await supabase .from("bank_accounts") .insert([ { user_id: user.id, bank_name, account_number, account_holder_name, }, ]) .select() if (error) throw error return NextResponse.json(data[0]) } catch (error: any) { console.error("[v0] Error creating bank account:", error) return NextResponse.json({ error: error.message }, { status: 500 }) } } export async function PUT(req: NextRequest) { const cookieStore = await cookies() const supabase = createServerClient(process.env.NEXT_PUBLIC_SUPABASE_URL || "", process.env.SUPABASE_ANON_KEY || "", { cookies: { getAll() { return cookieStore.getAll() }, setAll(cookiesToSet) { cookieStore.getAll().forEach((cookie) => { cookieStore.delete(cookie.name) }) cookiesToSet.forEach(({ name, value, options }) => { cookieStore.set(name, value, options) }) }, }, }) const { data: { user }, } = await supabase.auth.getUser() if (!user) { return NextResponse.json({ error: "Unauthorized" }, { status: 401 }) } try { const { account_id, bank_name, account_number, account_holder_name } = await req.json() if (!account_id || !bank_name || !account_number || !account_holder_name) { return NextResponse.json({ error: "Missing required fields" }, { status: 400 }) } const { data, error } = await supabase .from("bank_accounts") .update({ bank_name, account_number, account_holder_name, }) .eq("id", account_id) .eq("user_id", user.id) .select() if (error) throw error return NextResponse.json(data[0]) } catch (error: any) { console.error("[v0] Error updating bank account:", error) return NextResponse.json({ error: error.message }, { status: 500 }) } } export async function DELETE(req: NextRequest) { const cookieStore = await cookies() const supabase = createServerClient(process.env.NEXT_PUBLIC_SUPABASE_URL || "", process.env.SUPABASE_ANON_KEY || "", { cookies: { getAll() { return cookieStore.getAll() }, setAll(cookiesToSet) { cookieStore.getAll().forEach((cookie) => { cookieStore.delete(cookie.name) }) cookiesToSet.forEach(({ name, value, options }) => { cookieStore.set(name, value, options) }) }, }, }) const { data: { user }, } = await supabase.auth.getUser() if (!user) { return NextResponse.json({ error: "Unauthorized" }, { status: 401 }) } try { const { account_id } = await req.json() if (!account_id) { return NextResponse.json({ error: "Missing account_id" }, { status: 400 }) } const { error } = await supabase.from("bank_accounts").delete().eq("id", account_id).eq("user_id", user.id) if (error) throw error return NextResponse.json({ success: true }) } catch (error: any) { console.error("[v0] Error deleting bank account:", error) return NextResponse.json({ error: error.message }, { status: 500 }) } } [V0_FILE]typescriptreact:file="components/new-transaction-dialog.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import { useState } from "react" import useSWR from "swr" import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { useToast } from "@/hooks/use-toast" const fetcher = (url: string) => fetch(url).then((r) => r.json()) export function NewTransactionDialog({ onCreated }: { onCreated?: () => void }) { const [open, setOpen] = useState(false) const [date, setDate] = useState(new Date().toISOString().slice(0, 10)) const [description, setDescription] = useState("") const [category, setCategory] = useState("") const [paymentMethod, setPaymentMethod] = useState("") const [type, setType] = useState<"income" | "expense">("expense") const [amount, setAmount] = useState("") const [bankAccount, setBankAccount] = useState("") const [submitting, setSubmitting] = useState(false) const { toast } = useToast() const { data: catResp } = useSWR("/api/categories", fetcher) const { data: pmResp } = useSWR("/api/payment-methods", fetcher) const { data: bankResp } = useSWR("/api/bank-accounts", fetcher) async function handleSubmit(e: React.FormEvent) { e.preventDefault() if (!description || !category || !paymentMethod || !amount || !date || !bankAccount) { toast({ title: "Error", description: "Please fill in all fields including bank account", variant: "destructive", }) return } setSubmitting(true) try { const res = await fetch("/api/transactions", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ date, description, category, paymentMethod, type, amount: Number(amount), bankAccountId: bankAccount, }), }) if (!res.ok) { const errorData = await res.json().catch(() => ({})) throw new Error(errorData.error || "Failed to create transaction") } toast({ title: "Success", description: "Transaction created successfully", }) onCreated?.() setOpen(false) setDescription("") setAmount("") setCategory("") setPaymentMethod("") setBankAccount("") setDate(new Date().toISOString().slice(0, 10)) } catch (error: any) { console.error("[v0] Transaction creation error:", error) toast({ title: "Error", description: error.message || "Failed to create transaction", variant: "destructive", }) } finally { setSubmitting(false) } } return ( ) } export default NewTransactionDialog [V0_FILE]typescriptreact:file="app/(app)/bank-accounts/page.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 { Card } from "@/components/ui/card" import { useToast } from "@/hooks/use-toast" import { Loader2, Trash2, Edit2 } from "lucide-react" import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, } from "@/components/ui/alert-dialog" import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger, } from "@/components/ui/dialog" interface BankAccount { id: string bank_name: string account_number: string account_holder_name: string created_at: string } export default function BankAccountsPage() { const { toast } = useToast() const [accounts, setAccounts] = useState([]) const [bankName, setBankName] = useState("") const [accountNumber, setAccountNumber] = useState("") const [accountHolderName, setAccountHolderName] = useState("") const [isLoading, setIsLoading] = useState(false) const [isDataLoading, setIsDataLoading] = useState(true) const [isDeletingId, setIsDeletingId] = useState(null) const [editingId, setEditingId] = useState(null) const [editBankName, setEditBankName] = useState("") const [editAccountNumber, setEditAccountNumber] = useState("") const [editAccountHolderName, setEditAccountHolderName] = useState("") const [isEditDialogOpen, setIsEditDialogOpen] = useState(false) useEffect(() => { loadAccounts() }, []) const loadAccounts = async () => { try { setIsDataLoading(true) const response = await fetch("/api/bank-accounts") if (!response.ok) throw new Error("Failed to load accounts") const data = await response.json() setAccounts(data.accounts && Array.isArray(data.accounts) ? data.accounts : []) } catch (error) { console.error("Error loading accounts:", error) toast({ title: "Error", description: "Failed to load bank accounts", variant: "destructive", }) setAccounts([]) } finally { setIsDataLoading(false) } } const handleAddAccount = async (e: React.FormEvent) => { e.preventDefault() if (!bankName.trim() || !accountNumber.trim() || !accountHolderName.trim()) { toast({ title: "Error", description: "All fields are required", variant: "destructive" }) return } setIsLoading(true) try { console.log("[v0] Adding bank account:", { bankName, accountNumber, accountHolderName }) const response = await fetch("/api/bank-accounts", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ bank_name: bankName, account_number: accountNumber, account_holder_name: accountHolderName, }), }) console.log("[v0] Response status:", response.status) if (!response.ok) { const error = await response.json() console.error("[v0] Error response:", error) throw new Error(error.error || "Failed to add bank account") } const data = await response.json() console.log("[v0] Bank account added:", data) await loadAccounts() setBankName("") setAccountNumber("") setAccountHolderName("") toast({ title: "Success", description: "Bank account added successfully" }) } catch (error: any) { console.error("[v0] Error adding account:", error) toast({ title: "Error", description: error.message, variant: "destructive" }) } finally { setIsLoading(false) } } const handleEditAccount = (account: BankAccount) => { setEditingId(account.id) setEditBankName(account.bank_name) setEditAccountNumber(account.account_number) setEditAccountHolderName(account.account_holder_name) setIsEditDialogOpen(true) } const handleSaveEdit = async () => { if (!editBankName.trim() || !editAccountNumber.trim() || !editAccountHolderName.trim()) { toast({ title: "Error", description: "All fields are required", variant: "destructive" }) return } setIsLoading(true) try { const response = await fetch("/api/bank-accounts", { method: "PUT", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ account_id: editingId, bank_name: editBankName, account_number: editAccountNumber, account_holder_name: editAccountHolderName, }), }) if (!response.ok) { const error = await response.json() throw new Error(error.error || "Failed to update bank account") } await loadAccounts() setIsEditDialogOpen(false) setEditingId(null) toast({ title: "Success", description: "Bank account updated successfully" }) } catch (error: any) { console.error("[v0] Error updating account:", error) toast({ title: "Error", description: error.message, variant: "destructive" }) } finally { setIsLoading(false) } } const handleDeleteAccount = async (accountId: string) => { setIsDeletingId(accountId) try { const response = await fetch("/api/bank-accounts", { method: "DELETE", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ account_id: accountId }), }) if (!response.ok) { const error = await response.json() throw new Error(error.error || "Failed to delete bank account") } await loadAccounts() toast({ title: "Success", description: "Bank account deleted successfully" }) } catch (error: any) { console.error("[v0] Error deleting account:", error) toast({ title: "Error", description: error.message, variant: "destructive" }) } finally { setIsDeletingId(null) } } return (

Bank Accounts

{/* Add Bank Account Form */}

Add Bank Account

{/* Bank Accounts List */}

Your Bank Accounts

{isDataLoading ? (

Loading bank accounts...

) : accounts.length === 0 ? (

No bank accounts added yet

) : (

{accounts.map((account) => (

Bank Name

{account.bank_name}

Account Number

{account.account_number}

Account Holder

{account.account_holder_name}

Delete Bank Account Are you sure you want to delete {account.bank_name}? This action cannot be undone.

Cancel handleDeleteAccount(account.id)} disabled={isDeletingId === account.id} className="transition-all hover:shadow-lg hover:shadow-red-600 border border-red-500 bg-gray-800 text-red-500 cursor-pointer" > {isDeletingId === account.id && } Delete

))}

)}

) } [V0_FILE]typescriptreact:file="components/transactions-table.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import type { Transaction } from "@/lib/data" import { Button } from "@/components/ui/button" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu" import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog" import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, } from "@/components/ui/alert-dialog" import EditTransactionDialog from "@/components/edit-transaction-dialog" import { useState } from "react" export function currency(n: number) { return new Intl.NumberFormat("en-IN", { style: "currency", currency: "INR", maximumFractionDigits: 2, }).format(n) } export function TransactionsTable({ data, page, pageSize, total, onPageChange, onMutate, }: { data: Transaction[] page: number pageSize: number total: number onPageChange?: (page: number) => void onMutate?: () => Promise }) { const pages = Math.max(1, Math.ceil(total / pageSize)) return (

{/* Actions column */} {data.map((t) => ( ))}

Date	Description	Category	Payment Method	Bank Account	Type	Amount	Actions

Page {page} of {pages} • {total} items

) } function shareTx(t: Transaction) { const text = `Transaction #${t.id} Date: ${new Date(t.date).toLocaleDateString()} Type: ${t.type} Category: ${t.category} Payment Method: ${t.payment_method || "N/A"} Bank Account: ${t.bank_name && t.account_number ? `${t.bank_name} - ${t.account_number.slice(-4)}` : "N/A"} Description: ${t.description} Amount: ${currency(t.amount)}` const navAny = navigator as any if (navigator.share && (navAny.canShare ? navAny.canShare({ text }) : true)) { navigator.share({ title: "Transaction", text }).catch(() => {}) return } const copyViaClipboard = async () => { try { await navigator.clipboard?.writeText(text) alert("Transaction details copied to clipboard.") return true } catch { return false } } const copyViaTextarea = () => { const ta = document.createElement("textarea") ta.value = text ta.setAttribute("readonly", "") ta.style.position = "absolute" ta.style.left = "-9999px" document.body.appendChild(ta) ta.select() try { document.execCommand("copy") alert("Transaction details copied to clipboard.") } catch { alert("Unable to share. Please copy details manually:\n\n" + text) } finally { document.body.removeChild(ta) } } copyViaClipboard().then((ok) => { if (!ok) copyViaTextarea() }) } function Row({ t, onMutate, shareTx, }: { t: Transaction onMutate?: () => Promise shareTx: (t: Transaction) => void }) { const [confirmOpen, setConfirmOpen] = useState(false) const [isDeleting, setIsDeleting] = useState(false) const handleConfirmDelete = async () => { setIsDeleting(true) try { const res = await fetch(`/api/transactions?id=${encodeURIComponent(t.id)}`, { method: "DELETE" }) if (!res.ok) { alert("Failed to delete transaction") setIsDeleting(false) return } // Close dialog immediately for responsive UI setConfirmOpen(false) setIsDeleting(false) // Refresh data in background if (onMutate) { onMutate().catch((error) => { console.error("[v0] Background refresh error:", error) }) } } catch (error) { console.error("[v0] Delete error:", error) alert("Error deleting transaction") setIsDeleting(false) } } return ( {new Date(t.date).toLocaleDateString()} {t.description} {t.category} {t.payment_method || "—"} {t.bank_name && t.account_number ? `${t.bank_name} - ${t.account_number.slice(-4)}` : "—"} {t.type} {currency(t.amount)} {/* View */} {/* Edit */} e.preventDefault()} className="cursor-pointer transition-all hover:shadow-lg hover:shadow-blue-600 border hover:border-blue-500" > Edit } /> {/* Share */} { e.preventDefault() shareTx(t) }} > Share {/* Delete */} { e.preventDefault() setConfirmOpen(true) }} > Delete Delete this transaction?

This action cannot be undone.

Cancel {isDeleting ? "Deleting..." : "Delete"} ) } export default TransactionsTable [V0_FILE]typescript:file="app/api/metrics/route.ts" isEdit="true" isQuickEdit="true" isMerged="true" import { NextResponse } from "next/server" import { createServerClient } from "@/lib/supabase/server" export async function GET(req: Request) { try { const supabase = await createServerClient() const { data: { user }, } = await supabase.auth.getUser() if (!user) { return NextResponse.json({ error: "Unauthorized" }, { status: 401 }) } const { searchParams } = new URL(req.url) const startDate = searchParams.get("startDate") const endDate = searchParams.get("endDate") const bankAccountId = searchParams.get("bankAccountId") let monthQuery = supabase.from("transactions").select("*").eq("user_id", user.id) if (bankAccountId) { monthQuery = monthQuery.eq("bank_account_id", bankAccountId) } if (startDate) { monthQuery = monthQuery.gte("date", startDate) } if (endDate) { monthQuery = monthQuery.lte("date", endDate) } const { data: monthTxs, error: monthError } = await monthQuery if (monthError) { console.error("[v0] Error:", monthError) return NextResponse.json({ error: "Failed to fetch metrics" }, { status: 500 }) } const monthTransactions = monthTxs || [] const inflow = monthTransactions .filter((t: any) => t.type === "income" || t.type === "balance") .reduce((s: number, t: any) => s + t.amount, 0) const outflow = monthTransactions .filter((t: any) => t.type === "expense") .reduce((s: number, t: any) => s + t.amount, 0) let cumulativeQuery = supabase.from("transactions").select("*").eq("user_id", user.id) if (bankAccountId) { cumulativeQuery = cumulativeQuery.eq("bank_account_id", bankAccountId) } if (endDate) { cumulativeQuery = cumulativeQuery.lte("date", endDate) } const { data: allTxs, error: allError } = await cumulativeQuery if (allError) { console.error("[v0] Error:", allError) return NextResponse.json({ error: "Failed to fetch metrics" }, { status: 500 }) } const allTransactions = allTxs || [] const cumulativeInflow = allTransactions .filter((t: any) => t.type === "income" || t.type === "balance") .reduce((s: number, t: any) => s + t.amount, 0) const cumulativeOutflow = allTransactions .filter((t: any) => t.type === "expense") .reduce((s: number, t: any) => s + t.amount, 0) const balance = cumulativeInflow - cumulativeOutflow // Monthly series for last 12 months const byMonth = new Map() for (const t of allTransactions) { const d = new Date(t.date) const key = `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}` if (!byMonth.has(key)) { byMonth.set(key, { month: key, income: 0, expense: 0 }) } const bucket = byMonth.get(key)! if (t.type === "income" || t.type === "balance") bucket.income += t.amount else bucket.expense += t.amount } const series = Array.from(byMonth.values()).sort((a, b) => (a.month < b.month ? -1 : 1)) // By category breakdown const byCategory = new Map() for (const t of allTransactions) { if (!byCategory.has(t.category)) { byCategory.set(t.category, { category: t.category, income: 0, expense: 0 }) } const bucket = byCategory.get(t.category)! if (t.type === "income" || t.type === "balance") bucket.income += t.amount else bucket.expense += t.amount } const categories = Array.from(byCategory.values()).sort((a, b) => (a.category < b.category ? -1 : 1)) return NextResponse.json({ totals: { inflow, outflow, balance }, series, categories, }) } catch (e: any) { console.error("[v0] Error:", e) return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } [V0_FILE]sql:file="scripts/05-add-transaction-status.sql" isMerged="true" -- Add status column to transactions table ALTER TABLE transactions ADD COLUMN IF NOT EXISTS status text DEFAULT 'completed'; -- Create an index for faster queries CREATE INDEX IF NOT EXISTS idx_transactions_status ON transactions(user_id, status); -- Add a transfer_history table to track transfers CREATE TABLE IF NOT EXISTS transfer_history ( id uuid PRIMARY KEY DEFAULT gen_random_uuid(), user_id uuid NOT NULL REFERENCES auth.users(id) ON DELETE CASCADE, from_bank_account_id uuid REFERENCES bank_accounts(id) ON DELETE SET NULL, to_bank_account_id uuid REFERENCES bank_accounts(id) ON DELETE SET NULL, amount numeric NOT NULL, transfer_date date NOT NULL DEFAULT CURRENT_DATE, description text, created_at timestamp with time zone DEFAULT now(), updated_at timestamp with time zone DEFAULT now() ); -- Enable RLS on transfer_history ALTER TABLE transfer_history ENABLE ROW LEVEL SECURITY; -- RLS policies for transfer_history CREATE POLICY "Users can view their own transfers" ON transfer_history FOR SELECT USING (auth.uid() = user_id); CREATE POLICY "Users can create transfers" ON transfer_history FOR INSERT WITH CHECK (auth.uid() = user_id); CREATE POLICY "Users can update their own transfers" ON transfer_history FOR UPDATE USING (auth.uid() = user_id); CREATE POLICY "Users can delete their own transfers" ON transfer_history FOR DELETE USING (auth.uid() = user_id); [V0_FILE]typescriptreact:file="app/(app)/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import { useState, useCallback } from "react" import useSWR from "swr" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { TransactionsTable, currency } from "@/components/transactions-table" import { MonthYearPicker } from "@/components/month-year-picker" import { Wallet, TrendingUp, TrendingDown } from "lucide-react" import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from "@/components/ui/select" import { Button } from "@/components/ui/button" import { ArrowRight } from "lucide-react" import { TransferDialog } from "@/components/transfer-dialog" const fetcher = (url: string) => fetch(url).then((r) => r.json()) export default function DashboardPage() { const [selectedBank, setSelectedBank] = useState("all") const [startDate, setStartDate] = useState(() => { const today = new Date() return new Date(today.getFullYear(), today.getMonth(), 1).toISOString().split("T")[0] }) const [endDate, setEndDate] = useState(() => { const today = new Date() return new Date(today.getFullYear(), today.getMonth() + 1, 0).toISOString().split("T")[0] }) const [transferOpen, setTransferOpen] = useState(false) const handleDateChange = useCallback((newStartDate: string, newEndDate: string) => { setStartDate(newStartDate) setEndDate(newEndDate) }, []) const { data: bankResp } = useSWR("/api/bank-accounts", fetcher) const { data: metrics } = useSWR( `/api/metrics?startDate=${startDate}&endDate=${endDate}${selectedBank !== "all" ? `&bankAccountId=${selectedBank}` : ""}`, fetcher, ) const { data: pendingMetrics } = useSWR( `/api/metrics/pending?${selectedBank !== "all" ? `bankAccountId=${selectedBank}` : ""}`, fetcher, ) const { data: tx } = useSWR( `/api/transactions?page=1&pageSize=8&sort=date_desc&startDate=${startDate}&endDate=${endDate}${selectedBank !== "all" ? `&bankAccountId=${selectedBank}` : ""}`, fetcher, ) return (

{pendingMetrics?.pendingBalance > 0 && (

Pending Balance

{currency(pendingMetrics?.pendingBalance ?? 0)}

Amount ready to transfer to bank account

)}

Recent Transactions

) } function Kpi({ title, value, className, subtitle, icon: Icon, }: { title: string value: string className?: string subtitle?: string icon?: React.ComponentType<{ className?: string }> }) { return (

{Icon && } {title}

{subtitle &&

{subtitle}

}

{value}

) } [V0_FILE]typescriptreact:file="components/transfer-dialog.tsx" isMerged="true" "use client" import { useState } from "react" import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog" import { Button } from "@/components/ui/button" import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from "@/components/ui/select" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import useSWR from "swr" import { useToast } from "@/hooks/use-toast" const fetcher = (url: string) => fetch(url).then((r) => r.json()) interface TransferDialogProps { open: boolean onOpenChange: (open: boolean) => void selectedBank?: string } export function TransferDialog({ open, onOpenChange, selectedBank }: TransferDialogProps) { const [toBankId, setToBankId] = useState("") const [amount, setAmount] = useState("") const [description, setDescription] = useState("") const [isLoading, setIsLoading] = useState(false) const { toast } = useToast() const { data: bankResp } = useSWR(open ? "/api/bank-accounts" : null, fetcher) const { data: pendingMetrics } = useSWR(open ? "/api/metrics/pending" : null, fetcher) const handleTransfer = async () => { if (!toBankId || !amount) { toast({ title: "Error", description: "Please fill in all required fields", variant: "destructive", }) return } setIsLoading(true) try { const response = await fetch("/api/transfers", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ toBankAccountId: toBankId, amount: Number.parseFloat(amount), description: description || "Pending balance transfer", }), }) if (!response.ok) { throw new Error("Transfer failed") } toast({ title: "Success", description: `Transferred ₹${amount} to selected bank account`, }) onOpenChange(false) setToBankId("") setAmount("") setDescription("") } catch (error) { toast({ title: "Error", description: "Failed to transfer pending balance", variant: "destructive", }) } finally { setIsLoading(false) } } return ( ) } [V0_FILE]typescript:file="app/api/metrics/pending/route.ts" isMerged="true" import { NextResponse } from "next/server" import { createServerClient } from "@/lib/supabase/server" export async function GET(req: Request) { try { const supabase = await createServerClient() const { data: { user }, } = await supabase.auth.getUser() if (!user) { return NextResponse.json({ error: "Unauthorized" }, { status: 401 }) } const { searchParams } = new URL(req.url) const bankAccountId = searchParams.get("bankAccountId") let query = supabase.from("transactions").select("amount").eq("user_id", user.id).eq("status", "pending") if (bankAccountId && bankAccountId !== "all") { query = query.eq("bank_account_id", bankAccountId) } const { data: pendingTxs, error } = await query if (error) { console.error("[v0] Error fetching pending transactions:", error) return NextResponse.json({ error: "Failed to fetch pending balance" }, { status: 500 }) } const pendingBalance = (pendingTxs || []).reduce((sum: number, tx: any) => sum + tx.amount, 0) return NextResponse.json({ pendingBalance }) } catch (e: any) { console.error("[v0] Error:", e) return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/transfers/route.ts" isMerged="true" import { NextResponse } from "next/server" import { createServerClient } from "@/lib/supabase/server" export async function POST(req: Request) { try { const supabase = await createServerClient() const { data: { user }, } = await supabase.auth.getUser() if (!user) { return NextResponse.json({ error: "Unauthorized" }, { status: 401 }) } const body = await req.json() const { toBankAccountId, amount, description } = body if (!toBankAccountId || typeof amount !== "number" || amount <= 0) { return NextResponse.json({ error: "Invalid transfer data" }, { status: 400 }) } // Get pending transactions const { data: pendingTxs, error: fetchError } = await supabase .from("transactions") .select("id, amount") .eq("user_id", user.id) .eq("status", "pending") if (fetchError) { console.error("[v0] Error fetching pending transactions:", fetchError) return NextResponse.json({ error: "Failed to fetch pending transactions" }, { status: 500 }) } const totalPending = (pendingTxs || []).reduce((sum: number, tx: any) => sum + tx.amount, 0) if (amount > totalPending) { return NextResponse.json({ error: "Transfer amount exceeds pending balance" }, { status: 400 }) } // Create transfer history record const { data: transfer, error: transferError } = await supabase .from("transfer_history") .insert({ user_id: user.id, to_bank_account_id: toBankAccountId, amount, description: description || "Pending balance transfer", }) .select() .single() if (transferError) { console.error("[v0] Error creating transfer:", transferError) return NextResponse.json({ error: "Failed to create transfer" }, { status: 500 }) } // Create a balance transaction for the transfer const { error: txError } = await supabase.from("transactions").insert({ user_id: user.id, bank_account_id: toBankAccountId, type: "balance", amount, category: "Transfer", description: description || "Pending balance transfer", payment_method: "Transfer", date: new Date().toISOString().split("T")[0], status: "completed", }) if (txError) { console.error("[v0] Error creating transaction:", txError) return NextResponse.json({ error: "Failed to create transaction" }, { status: 500 }) } // Mark pending transactions as transferred const { error: updateError } = await supabase .from("transactions") .update({ status: "transferred" }) .eq("user_id", user.id) .eq("status", "pending") if (updateError) { console.error("[v0] Error updating pending transactions:", updateError) return NextResponse.json({ error: "Failed to update pending transactions" }, { status: 500 }) } return NextResponse.json(transfer, { status: 201 }) } catch (e: any) { console.error("[v0] Error:", e) return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } [V0_FILE]typescriptreact:file="components/edit-transaction-dialog.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import { useState } from "react" import useSWR from "swr" import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { useToast } from "@/hooks/use-toast" type Tx = { id: string date: string description: string category: string type: "income" | "expense" amount: number payment_method?: string bank_name?: string account_number?: string } const fetcher = (url: string) => fetch(url).then((r) => r.json()) export default function EditTransactionDialog({ tx, onUpdated, trigger, }: { tx: Tx onUpdated?: () => void trigger?: React.ReactNode }) { const { toast } = useToast() const [open, setOpen] = useState(false) const [date, setDate] = useState(tx.date.slice(0, 10)) const [description, setDescription] = useState(tx.description) const [category, setCategory] = useState(tx.category) const [type, setType] = useState<"income" | "expense">(tx.type) const [amount, setAmount] = useState(String(tx.amount)) const [paymentMethod, setPaymentMethod] = useState(tx.payment_method || "None") const [bankAccount, setBankAccount] = useState(tx.bank_name ? tx.id : "") const [submitting, setSubmitting] = useState(false) const { data: catResp } = useSWR("/api/categories", fetcher) const { data: pmResp } = useSWR("/api/payment-methods", fetcher) const { data: bankResp } = useSWR("/api/bank-accounts", fetcher) async function handleSubmit(e: React.FormEvent) { e.preventDefault() if (!description.trim()) { toast({ title: "Error", description: "Description is required", variant: "destructive" }) return } setSubmitting(true) try { const res = await fetch("/api/transactions", { method: "PUT", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ id: tx.id, date, description, category, type, amount: Number(amount), payment_method: paymentMethod === "None" ? null : paymentMethod, bankAccountId: bankAccount || null, }), }) if (!res.ok) throw new Error("Failed to update") toast({ title: "Success", description: "Transaction updated successfully" }) onUpdated?.() setOpen(false) } catch (error: any) { toast({ title: "Error", description: error.message, variant: "destructive" }) } finally { setSubmitting(false) } } return ( ) } [V0_FILE]typescript:file="app/api/transactions/route.ts" isEdit="true" isQuickEdit="true" import { NextResponse } from "next/server" import { createServerClient } from "@/lib/supabase/server" export async function GET(req: Request) { try { const supabase = await createServerClient() const { data: { user }, } = await supabase.auth.getUser() if (!user) { return NextResponse.json({ error: "Unauthorized" }, { status: 401 }) } const { searchParams } = new URL(req.url) const q = (searchParams.get("q") || "").toLowerCase() const type = searchParams.get("type") as "income" | "expense" | "all" | null const category = searchParams.get("category") const minAmount = Number(searchParams.get("minAmount") || "") || null const maxAmount = Number(searchParams.get("maxAmount") || "") || null const startDate = searchParams.get("startDate") const endDate = searchParams.get("endDate") const bankAccountId = searchParams.get("bankAccountId") const sort = (searchParams.get("sort") || "date_desc") as "date_desc" | "date_asc" | "amount_desc" | "amount_asc" const page = Math.max(1, Number(searchParams.get("page") || 1)) const pageSize = Math.min(100, Math.max(5, Number(searchParams.get("pageSize") || 20))) // Build query let query = supabase .from("transactions") .select( "id, user_id, date, description, category, payment_method, type, amount, bank_account_id, bank_accounts(bank_name, account_number)", { count: "exact" }, ) .eq("user_id", user.id) // Apply filters if (type && type !== "all") { query = query.eq("type", type) } if (category && category !== "all") { query = query.eq("category", category) } if (bankAccountId && bankAccountId !== "all") { query = query.eq("bank_account_id", bankAccountId) } if (minAmount !== null) { query = query.gte("amount", minAmount) } if (maxAmount !== null) { query = query.lte("amount", maxAmount) } if (startDate) { query = query.gte("date", startDate) } if (endDate) { query = query.lte("date", endDate) } // Sort const orderBy = sort === "date_asc" ? "date" : sort === "date_desc" ? "date" : "amount" const ascending = sort === "date_asc" || sort === "amount_asc" query = query.order(orderBy, { ascending }) // Pagination const start = (page - 1) * pageSize query = query.range(start, start + pageSize - 1) const { data, count, error } = await query if (error) { console.error("[v0] Supabase error:", error) return NextResponse.json({ error: "Failed to fetch transactions" }, { status: 500 }) } const transformed = (data || []).map((t: any) => ({ ...t, bank_name: t.bank_accounts?.bank_name || null, account_number: t.bank_accounts?.account_number || null, })) // Filter by search query (client-side for now) let filtered = transformed if (q) { filtered = filtered.filter((t: any) => { const dateISO = new Date(t.date).toISOString().slice(0, 10) const dateLocal = new Date(t.date).toLocaleDateString().toLowerCase() const amountStr = String(t.amount) const hay = `${t.description} ${t.category} ${t.type} ${dateISO} ${dateLocal} ${amountStr}`.toLowerCase() return hay.includes(q) }) } // Calculate summary const inflow = filtered.filter((t: any) => t.type === "income").reduce((s: number, t: any) => s + t.amount, 0) const outflow = filtered.filter((t: any) => t.type === "expense").reduce((s: number, t: any) => s + t.amount, 0) return NextResponse.json({ data: filtered, total: count || 0, page, pageSize, summary: { inflow, outflow, net: inflow - outflow }, }) } catch (e: any) { console.error("[v0] Error:", e) return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } export async function POST(req: Request) { try { const supabase = await createServerClient() const { data: { user }, } = await supabase.auth.getUser() if (!user) { return NextResponse.json({ error: "Unauthorized" }, { status: 401 }) } const body = await req.json() const { date, description, category, paymentMethod, type, amount, bankAccountId } = body || {} if (!date || !description || !category || !paymentMethod || !type || typeof amount !== "number" || !bankAccountId) { return NextResponse.json({ error: "Invalid payload" }, { status: 400 }) } if (!["income", "expense"].includes(type)) { return NextResponse.json({ error: "Invalid type" }, { status: 400 }) } const { data, error } = await supabase .from("transactions") .insert({ user_id: user.id, date: new Date(date).toISOString(), description: String(description), category: String(category), payment_method: String(paymentMethod), type, amount: Math.max(0, Number(amount)), bank_account_id: bankAccountId, }) .select() .single() if (error) { console.error("[v0] Insert error:", error) return NextResponse.json({ error: "Failed to create transaction" }, { status: 500 }) } return NextResponse.json(data, { status: 201 }) } catch (e: any) { console.error("[v0] Error:", e) return NextResponse.json({ error: "Failed to create transaction" }, { status: 500 }) } } export async function PUT(req: Request) { try { const supabase = await createServerClient() const { data: { user }, } = await supabase.auth.getUser() if (!user) { return NextResponse.json({ error: "Unauthorized" }, { status: 401 }) } const body = await req.json() const { id, date, description, category, type, amount, bankAccountId } = body || {} if (!id) { return NextResponse.json({ error: "Missing id" }, { status: 400 }) } const { data, error } = await supabase .from("transactions") .update({ date: date ? new Date(date).toISOString() : undefined, description, category, type, amount: typeof amount === "number" ? Math.max(0, amount) : undefined, bank_account_id: bankAccountId || null, }) .eq("id", id) .eq("user_id", user.id) .select() .single() if (error || !data) { return NextResponse.json({ error: "Not found or unauthorized" }, { status: 404 }) } return NextResponse.json(data) } catch (e: any) { console.error("[v0] Error:", e) return NextResponse.json({ error: "Failed to update" }, { status: 500 }) } } export async function DELETE(req: Request) { try { const supabase = await createServerClient() const { data: { user }, } = await supabase.auth.getUser() if (!user) { return NextResponse.json({ error: "Unauthorized" }, { status: 401 }) } const { searchParams } = new URL(req.url) const id = searchParams.get("id") if (!id) { return NextResponse.json({ error: "Missing id" }, { status: 400 }) } const { error } = await supabase.from("transactions").delete().eq("id", id).eq("user_id", user.id) if (error) { return NextResponse.json({ error: "Not found or unauthorized" }, { status: 404 }) } return NextResponse.json({ success: true }) } catch (e: any) { console.error("[v0] Error:", e) return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } }

About

Tags

Share

More Templates Like This

About

Tags

Share

About

Tags

Share

More Templates Like This