[V0_FILE]plaintext:file=".gitignore" isMerged="true" # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. # dependencies /node_modules # next.js /.next/ /out/ # production /build # debug npm-debug.log* yarn-debug.log* yarn-error.log* .pnpm-debug.log* # env files .env* # vercel .vercel # typescript *.tsbuildinfo next-env.d.ts [V0_FILE]markdown:file="README.md" isMerged="true" # Crypto Dashboard *Automatically synced with your [v0.app](https://v0.app) deployments* [![Deployed on Vercel](https://img.shields.io/badge/Deployed%20on-Vercel-black?style=for-the-badge&logo=vercel)](https://vercel.com/breeziguys-projects/v0-crypto-dashboard) [![Built with v0](https://img.shields.io/badge/Built%20with-v0.app-black?style=for-the-badge)](https://v0.app/chat/ShPoIKeL6PC) ## Overview This repository will stay in sync with your deployed chats on [v0.app](https://v0.app). Any changes you make to your deployed app will be automatically pushed to this repository from [v0.app](https://v0.app). ## Deployment Your project is live at: **[https://vercel.com/breeziguys-projects/v0-crypto-dashboard](https://vercel.com/breeziguys-projects/v0-crypto-dashboard)** ## Build your app Continue building your app on: **[https://v0.app/chat/ShPoIKeL6PC](https://v0.app/chat/ShPoIKeL6PC)** ## How It Works 1. Create and modify your project using [v0.app](https://v0.app) 2. Deploy your chats from the v0 interface 3. Changes are automatically pushed to this repository 4. Vercel deploys the latest version from this repository [V0_FILE]typescriptreact:file="app/auth/error/page.tsx" isMerged="true" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" export default async function ErrorPage({ searchParams, }: { searchParams: Promise<{ error: string }> }) { const params = await searchParams return (

Sorry, something went wrong. {params?.error ? (

Error: {params.error}

) : (

An unspecified error occurred.

)}

) } [V0_FILE]typescriptreact:file="app/auth/login/page.tsx" isMerged="true" "use client" import type React from "react" import { createClient } from "@/lib/supabase/client" import { Button } from "@/components/ui/button" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import Link from "next/link" import { useRouter } from "next/navigation" import { useState } from "react" export default function LoginPage() { const [email, setEmail] = useState("") const [password, setPassword] = useState("") const [error, setError] = useState(null) const [isLoading, setIsLoading] = useState(false) const [isAuthenticating, setIsAuthenticating] = useState(false) const router = useRouter() const handleLogin = async (e: React.FormEvent) => { e.preventDefault() const supabase = createClient() setIsLoading(true) setError(null) try { // Step 1: Sign in with credentials const { error: signInError } = await supabase.auth.signInWithPassword({ email, password, }) if (signInError) throw signInError // Step 2: Show authenticating state setIsLoading(false) setIsAuthenticating(true) // Step 3: Wait for session to be fully established and cookies to be set let attempts = 0 const maxAttempts = 10 while (attempts < maxAttempts) { const { data: { session }, } = await supabase.auth.getSession() if (session) { // Session is ready, redirect to dashboard window.location.href = "/dashboard" return } // Wait a bit before checking again await new Promise((resolve) => setTimeout(resolve, 200)) attempts++ } // If we get here, session wasn't established, try redirect anyway window.location.href = "/dashboard" } catch (error: unknown) { setError(error instanceof Error ? error.message : "An error occurred") setIsLoading(false) setIsAuthenticating(false) } } return (

{isAuthenticating ? (

Authenticating... Please wait

) : (

)}

) } [V0_FILE]typescriptreact:file="app/auth/sign-up-success/page.tsx" isMerged="true" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" export default function SignUpSuccessPage() { return (

Thank you for signing up! Check your email to confirm

You've successfully signed up. Please check your email to confirm your account before signing in.

) } [V0_FILE]typescriptreact:file="app/auth/sign-up/page.tsx" isMerged="true" "use client" import type React from "react" import { createClient } from "@/lib/supabase/client" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import Link from "next/link" import { useRouter } from "next/navigation" import { useState } from "react" export default function SignUpPage() { const [email, setEmail] = useState("") const [password, setPassword] = useState("") const [fullName, setFullName] = useState("") const [error, setError] = useState(null) const [isLoading, setIsLoading] = useState(false) const router = useRouter() const handleSignUp = async (e: React.FormEvent) => { e.preventDefault() const supabase = createClient() setIsLoading(true) setError(null) try { const { error } = await supabase.auth.signUp({ email, password, options: { emailRedirectTo: process.env.NEXT_PUBLIC_DEV_SUPABASE_REDIRECT_URL || `${window.location.origin}/dashboard`, data: { full_name: fullName, }, }, }) if (error) throw error router.push("/auth/sign-up-success") } catch (error: unknown) { setError(error instanceof Error ? error.message : "An error occurred") } finally { setIsLoading(false) } } return (

Full Name setFullName(e.target.value)} className="bg-background/50" />

Email setEmail(e.target.value)} className="bg-background/50" />

Password setPassword(e.target.value)} className="bg-background/50" />

{error &&

{error}

}

Already have an account?{" "} Login

) } [V0_FILE]typescriptreact:file="app/dashboard/budgets/page.tsx" isMerged="true" import { redirect } from "next/navigation" import { createClient } from "@/lib/supabase/server" import { DashboardLayout } from "@/components/dashboard-layout" import { CompanySwitcher } from "@/components/company-switcher" import { BudgetSummaryTable } from "@/components/budget-summary-table" import { SpreadsheetButton } from "@/components/spreadsheet-button" export default async function BudgetsPage() { const supabase = await createClient() const { data: { user }, } = await supabase.auth.getUser() if (!user) { redirect("/auth/login") } const handleSignOut = async () => { "use server" const supabase = await createClient() await supabase.auth.signOut() redirect("/auth/login") } return (

Budget by Department

View budget totals grouped by department

) } [V0_FILE]typescriptreact:file="app/dashboard/companies/page.tsx" isMerged="true" import { redirect } from "next/navigation" import { createClient } from "@/lib/supabase/server" import { DashboardLayout } from "@/components/dashboard-layout" import { CompanySwitcher } from "@/components/company-switcher" import { DepartmentManager } from "@/components/department-manager" export default async function CompaniesPage() { const supabase = await createClient() const { data: { user }, } = await supabase.auth.getUser() if (!user) { redirect("/auth/login") } const handleSignOut = async () => { "use server" const supabase = await createClient() await supabase.auth.signOut() redirect("/auth/login") } return (

Company Management

Manage companies and departments

) } [V0_FILE]typescriptreact:file="app/dashboard/page.tsx" isMerged="true" import { redirect } from "next/navigation" import { createClient } from "@/lib/supabase/server" import { DashboardLayout } from "@/components/dashboard-layout" import { CompanySwitcher } from "@/components/company-switcher" import { SpreadsheetButton } from "@/components/spreadsheet-button" import { BudgetStats } from "@/components/budget-stats" import { BudgetChart } from "@/components/budget-chart" import { BudgetTable } from "@/components/budget-table" import type { Metadata } from "next" export const metadata: Metadata = { title: "Dashboard", description: "View your budget overview, statistics, and departmental breakdowns", } export default async function DashboardPage() { const supabase = await createClient() const { data: { user }, } = await supabase.auth.getUser() if (!user) { redirect("/auth/login") } const handleSignOut = async () => { "use server" const supabase = await createClient() await supabase.auth.signOut() redirect("/auth/login") } return (

Budget Overview

{new Date().toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric", })}

Budget by Department

) } [V0_FILE]typescriptreact:file="app/dashboard/reports/page.tsx" isMerged="true" import { redirect } from "next/navigation" import { createClient } from "@/lib/supabase/server" import { DashboardLayout } from "@/components/dashboard-layout" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { CompanySwitcher } from "@/components/company-switcher" export default async function ReportsPage() { const supabase = await createClient() const { data: { user }, } = await supabase.auth.getUser() if (!user) { redirect("/auth/login") } const handleSignOut = async () => { "use server" const supabase = await createClient() await supabase.auth.signOut() redirect("/auth/login") } return (

Reports & Analytics

View detailed budget reports and insights

Coming Soon Advanced reporting and analytics features are under development

This section will include detailed budget reports, spending trends, forecasting, and export capabilities.

) } [V0_FILE]typescriptreact:file="app/dashboard/settings/page.tsx" isMerged="true" import { redirect } from "next/navigation" import { createClient } from "@/lib/supabase/server" import { DashboardLayout } from "@/components/dashboard-layout" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { CompanySwitcher } from "@/components/company-switcher" import { ProfileSettings } from "@/components/profile-settings" import { CompanySettings } from "@/components/company-settings" export default async function SettingsPage() { const supabase = await createClient() const { data: { user }, } = await supabase.auth.getUser() if (!user) { redirect("/auth/login") } const handleSignOut = async () => { "use server" const supabase = await createClient() await supabase.auth.signOut() redirect("/auth/login") } return (

Settings

Manage your account and company settings

Profile Companies & Departments ) } [V0_FILE]css:file="app/globals.css" isMerged="true" @tailwind base; @tailwind components; @tailwind utilities; @layer utilities { .text-balance { text-wrap: balance; } } @layer base { :root { --font-sans: var(--font-geist-sans); --font-mono: var(--font-geist-mono); --background: 0 0% 100%; --foreground: 0 0% 3.9%; --card: 0 0% 100%; --card-foreground: 0 0% 3.9%; --popover: 0 0% 100%; --popover-foreground: 0 0% 3.9%; --primary: 0 0% 9%; --primary-foreground: 0 0% 98%; --secondary: 0 0% 96.1%; --secondary-foreground: 0 0% 9%; --muted: 0 0% 96.1%; --muted-foreground: 0 0% 45.1%; --accent: 0 0% 96.1%; --accent-foreground: 0 0% 9%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 0 0% 98%; --border: 0 0% 89.8%; --input: 0 0% 89.8%; --ring: 0 0% 3.9%; --chart-1: 12 76% 61%; --chart-2: 173 58% 39%; --chart-3: 197 37% 24%; --chart-4: 43 74% 66%; --chart-5: 27 87% 67%; --radius: 0.5rem; --sidebar-background: 0 0% 98%; --sidebar-foreground: 240 5.3% 26.1%; --sidebar-primary: 240 5.9% 10%; --sidebar-primary-foreground: 0 0% 98%; --sidebar-accent: 240 4.8% 95.9%; --sidebar-accent-foreground: 240 5.9% 10%; --sidebar-border: 220 13% 91%; --sidebar-ring: 217.2 91.2% 59.8%; } .dark { --background: 0 0% 3.9%; --foreground: 0 0% 98%; --card: 0 0% 3.9%; --card-foreground: 0 0% 98%; --popover: 0 0% 3.9%; --popover-foreground: 0 0% 98%; --primary: 0 0% 98%; --primary-foreground: 0 0% 9%; --secondary: 0 0% 14.9%; --secondary-foreground: 0 0% 98%; --muted: 0 0% 14.9%; --muted-foreground: 0 0% 63.9%; --accent: 0 0% 14.9%; --accent-foreground: 0 0% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 0 0% 98%; --border: 0 0% 14.9%; --input: 0 0% 14.9%; --ring: 0 0% 83.1%; --chart-1: 220 70% 50%; --chart-2: 160 60% 45%; --chart-3: 30 80% 55%; --chart-4: 280 65% 60%; --chart-5: 340 75% 55%; --sidebar-background: 240 5.9% 10%; --sidebar-foreground: 240 4.8% 95.9%; --sidebar-primary: 224.3 76.3% 48%; --sidebar-primary-foreground: 0 0% 100%; --sidebar-accent: 240 3.7% 15.9%; --sidebar-accent-foreground: 240 4.8% 95.9%; --sidebar-border: 240 3.7% 15.9%; --sidebar-ring: 217.2 91.2% 59.8%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } [V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true" import "@/styles/globals.css" import { Inter } from "next/font/google" import type React from "react" import { CompanyProvider } from "@/lib/contexts/company-context" const inter = Inter({ subsets: ["latin"] }) export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {children} ) } export const metadata = { title: { default: "01-budget - Budget Management System", template: "%s | 01-budget" }, description: "Manage your budget, track expenses, and analyze financial data across departments with 01-budget.", keywords: ["budget", "expense tracking", "financial management", "budget planning", "department budgeting"], authors: [{ name: "01Labs" }], creator: "01Labs", publisher: "01Labs", formatDetection: { email: false, address: false, telephone: false, }, metadataBase: new URL(process.env.NEXT_PUBLIC_SITE_URL || "http://localhost:3000"), openGraph: { type: "website", locale: "en_US", url: "/", title: "01-budget - Budget Management System", description: "Manage your budget, track expenses, and analyze financial data across departments with 01-budget.", siteName: "01-budget", }, twitter: { card: "summary_large_image", title: "01-budget - Budget Management System", description: "Manage your budget, track expenses, and analyze financial data across departments with 01-budget.", }, robots: { index: true, follow: true, googleBot: { index: true, follow: true, "max-video-preview": -1, "max-image-preview": "large", "max-snippet": -1, }, }, generator: "Next.js", }; [V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" import { redirect } from "next/navigation" import { createClient } from "@/lib/supabase/server" export default async function HomePage() { const supabase = await createClient() const { data: { user }, } = await supabase.auth.getUser() if (user) { redirect("/dashboard") } else { redirect("/auth/login") } } [V0_FILE]typescriptreact:file="app/shared/[token]/page.tsx" isMerged="true" "use client" import { useState } from "react" import { useParams } from "next/navigation" import { createClient } from "@/lib/supabase/client" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { Lock, Download } from "lucide-react" import { toast } from "sonner" import * as XLSX from "xlsx" import type { BudgetItem, Department, Company } from "@/lib/types" export default function SharedBudgetPage() { const params = useParams() const token = params.token as string const [password, setPassword] = useState("") const [isAuthenticated, setIsAuthenticated] = useState(false) const [isVerifying, setIsVerifying] = useState(false) const [budgetItems, setBudgetItems] = useState([]) const [departments, setDepartments] = useState([]) const [company, setCompany] = useState(null) const [year, setYear] = useState(0) const verifyPassword = async () => { if (!password) { toast.error("Please enter the password") return } setIsVerifying(true) const supabase = createClient() try { // Get shared budget info const { data: sharedBudget, error } = await supabase .from("01-budgeting-shared_budgets") .select("*") .eq("share_token", token) .single() if (error || !sharedBudget) { toast.error("Invalid or expired share link") return } // Verify password (simple base64 comparison - use bcrypt in production) const passwordHash = btoa(password) if (passwordHash !== sharedBudget.password_hash) { toast.error("Incorrect password") return } // Load company info const { data: companyData } = await supabase .from("01-budgeting-companies") .select("*") .eq("id", sharedBudget.company_id) .single() // Load departments const { data: deptData } = await supabase .from("01-budgeting-departments") .select("*") .eq("company_id", sharedBudget.company_id) // Load budget items for the year const { data: budgetData } = await supabase .from("01-budgeting-budget_items") .select("*") .eq("company_id", sharedBudget.company_id) .gte("created_at", `${sharedBudget.year}-01-01`) .lt("created_at", `${sharedBudget.year + 1}-01-01`) .order("created_at", { ascending: false }) if (companyData) setCompany(companyData) if (deptData) setDepartments(deptData) if (budgetData) setBudgetItems(budgetData) setYear(sharedBudget.year) setIsAuthenticated(true) toast.success("Access granted!") } catch (error) { console.error("Error verifying password:", error) toast.error("Failed to verify password") } finally { setIsVerifying(false) } } const getDepartmentName = (deptId: string | null) => { if (!deptId) return "Uncategorized" const dept = departments.find((d) => d.id === deptId) return dept?.name || "Uncategorized" } const calculateDepartmentTotals = () => { const departmentMap = new Map() budgetItems.forEach((item) => { const deptId = item.department_id || "uncategorized" if (!departmentMap.has(deptId)) { departmentMap.set(deptId, []) } departmentMap.get(deptId)!.push(item) }) const departmentTotals = Array.from(departmentMap.entries()).map(([deptId, items]) => { const monthlyTotal = items .filter((item) => item.billing_frequency === "Monthly") .reduce((sum, item) => sum + Number(item.cost_local), 0) const yearlyTotal = items .filter((item) => item.billing_frequency === "Yearly") .reduce((sum, item) => sum + Number(item.cost_local), 0) const perUseTotal = items .filter((item) => item.billing_frequency === "Per-Use") .reduce((sum, item) => sum + Number(item.cost_local), 0) const totalCost = monthlyTotal + yearlyTotal + perUseTotal const totalUsd = items.reduce((sum, item) => sum + (Number(item.cost_usd) || 0), 0) return { departmentId: deptId, departmentName: getDepartmentName(deptId), itemCount: items.length, monthlyTotal, yearlyTotal, perUseTotal, totalCost, totalUsd, } }) return departmentTotals.sort((a, b) => b.totalCost - a.totalCost) } const handleExport = () => { if (!company) return const departmentTotals = calculateDepartmentTotals() const exportData = departmentTotals.map((dept) => ({ Department: dept.departmentName, "Item Count": dept.itemCount, "Monthly Total (₦)": dept.monthlyTotal, "Yearly Total (₦)": dept.yearlyTotal, "Per-Use Total (₦)": dept.perUseTotal, "Total Cost (₦)": dept.totalCost, "Total Cost ($)": dept.totalUsd || "", })) const wb = XLSX.utils.book_new() const wsData: any[][] = [ [`${company.name} - Budget Report`], [`Year: ${year}`], [`Generated: ${new Date().toLocaleDateString()}`], [], [ "Department", "Item Count", "Monthly Total (₦)", "Yearly Total (₦)", "Per-Use Total (₦)", "Total Cost (₦)", "Total Cost ($)", ], ...exportData.map((row) => [ row.Department, row["Item Count"], row["Monthly Total (₦)"], row["Yearly Total (₦)"], row["Per-Use Total (₦)"], row["Total Cost (₦)"], row["Total Cost ($)"], ]), ] const ws = XLSX.utils.aoa_to_sheet(wsData) ws["!cols"] = [{ wch: 25 }, { wch: 12 }, { wch: 18 }, { wch: 18 }, { wch: 18 }, { wch: 18 }, { wch: 18 }] ws["!merges"] = [ { s: { r: 0, c: 0 }, e: { r: 0, c: 6 } }, { s: { r: 1, c: 0 }, e: { r: 1, c: 6 } }, { s: { r: 2, c: 0 }, e: { r: 2, c: 6 } }, ] XLSX.utils.book_append_sheet(wb, ws, `Budget ${year}`) XLSX.writeFile(wb, `${company.name}_Budget_${year}.xlsx`) toast.success("Budget exported!") } if (!isAuthenticated) { return (

Protected Budget Enter the password to view this shared budget

Password setPassword(e.target.value)} onKeyDown={(e) => { if (e.key === "Enter") verifyPassword() }} />

) } const departmentTotals = calculateDepartmentTotals() const overallTotal = departmentTotals.reduce((sum, dept) => sum + dept.totalCost, 0) return (

{company?.name} - Budget {year}

Shared budget view

Total Departments {departmentTotals.length} Total Items {budgetItems.length} Total Budget ₦{overallTotal.toLocaleString()}

Budget by Department

Department Items Monthly (₦) Yearly (₦) Per-Use (₦) Total (₦) Total ($) {departmentTotals.map((dept) => ( {dept.departmentName} {dept.itemCount} ₦{dept.monthlyTotal.toLocaleString()} ₦{dept.yearlyTotal.toLocaleString()} ₦{dept.perUseTotal.toLocaleString()} ₦{dept.totalCost.toLocaleString()} {dept.totalUsd > 0 ? `$${dept.totalUsd.toLocaleString()}` : "—"} ))}

) } [V0_FILE]json:file="components.json" isMerged="true" { "$schema": "https://ui.shadcn.com/schema.json", "style": "default", "rsc": true, "tsx": true, "tailwind": { "config": "tailwind.config.ts", "css": "app/globals.css", "baseColor": "neutral", "cssVariables": true, "prefix": "" }, "aliases": { "components": "@/components", "utils": "@/lib/utils", "ui": "@/components/ui", "lib": "@/lib", "hooks": "@/hooks" }, "iconLibrary": "lucide" } [V0_FILE]typescriptreact:file="components/budget-chart.tsx" isMerged="true" "use client" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { createClient } from "@/lib/supabase/client" import { useCompany } from "@/lib/contexts/company-context" import type { BudgetItem, Department } from "@/lib/types" import { useEffect, useState } from "react" import { Bar, BarChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts" export function BudgetChart() { const { selectedCompany } = useCompany() const [chartData, setChartData] = useState<{ name: string; amount: number }[]>([]) useEffect(() => { const loadChartData = async () => { if (!selectedCompany) return const supabase = createClient() const { data: budgetItems } = await supabase .from("01-budgeting-budget_items") .select("*") .eq("company_id", selectedCompany.id) const { data: departments } = await supabase .from("01-budgeting-departments") .select("*") .eq("company_id", selectedCompany.id) if (budgetItems && departments) { const deptMap = new Map() budgetItems.forEach((item: BudgetItem) => { const deptId = item.department_id || "unassigned" const current = deptMap.get(deptId) || 0 deptMap.set(deptId, current + Number(item.cost_local)) }) const data = Array.from(deptMap.entries()).map(([deptId, amount]) => { const dept = departments.find((d: Department) => d.id === deptId) return { name: dept?.name || "Unassigned", amount, } }) setChartData(data.sort((a, b) => b.amount - a.amount)) } } loadChartData() }, [selectedCompany]) return ( Budget by Department

`₦${value.toLocaleString()}`} /> { if (active && payload && payload.length) { return (

{payload[0].payload.name} ₦{Number(payload[0].value).toLocaleString()}

) } return null }} />

) } [V0_FILE]typescriptreact:file="components/budget-spreadsheet.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState, useEffect, useRef } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { createClient } from "@/lib/supabase/client" import { useCompany } from "@/lib/contexts/company-context" import type { Department, BudgetTemplate } from "@/lib/types" import { Download, Save, Plus, Share2, ReplaceIcon as TemplateIcon } from "lucide-react" import { toast } from "sonner" import * as XLSX from "xlsx" import { ShareBudgetDialog } from "./share-budget-dialog" import { BudgetTemplateSelector } from "./budget-template-selector" const COLUMNS = ["Service", "Billing Frequency", "Cost (₦)", "Cost ($)", "Department", "Notes"] const INITIAL_ROWS = 20 interface SpreadsheetCell { value: string isEditing: boolean } interface SpreadsheetRow { id: string cells: SpreadsheetCell[] } interface BudgetSpreadsheetProps { year: number hideTitle?: boolean } export function BudgetSpreadsheet({ year, hideTitle = false }: BudgetSpreadsheetProps) { const { selectedCompany } = useCompany() const [rows, setRows] = useState([]) const [departments, setDepartments] = useState([]) const [activeCell, setActiveCell] = useState<{ row: number; col: number } | null>(null) const [isLoading, setIsLoading] = useState(false) const [showShareDialog, setShowShareDialog] = useState(false) const [showTemplateSelector, setShowTemplateSelector] = useState(false) const tableRef = useRef(null) const rowsRef = useRef([]) useEffect(() => { initializeSpreadsheet() loadDepartments() }, [selectedCompany, year]) useEffect(() => { const handlePaste = (e: ClipboardEvent) => { // Check if paste is happening within our table const target = e.target as Node if (!tableRef.current?.contains(target)) return e.preventDefault() e.stopPropagation() const pastedData = e.clipboardData?.getData("text") if (!pastedData) return // Close any editing cells setRows((prev) => prev.map((row) => ({ ...row, cells: row.cells.map((cell) => ({ ...cell, isEditing: false })), })), ) // Parse pasted data (tab-separated values from Excel/spreadsheets) const pastedRows = pastedData .split("\n") .map((row) => row.split("\t").map((cell) => cell.trim())) .filter((row) => row.some((cell) => cell !== "")) if (pastedRows.length === 0) return // Determine starting position let startRow = activeCell?.row ?? 0 let startCol = activeCell?.col ?? 0 // If no active cell, find first empty row if (!activeCell) { const firstEmptyRowIndex = rowsRef.current.findIndex((row) => row.cells.every((cell) => !cell.value.trim())) if (firstEmptyRowIndex !== -1) { startRow = firstEmptyRowIndex startCol = 0 } } setRows((prev) => { const newRows = [...prev] const currentRow = startRow // Add rows if needed while (currentRow + pastedRows.length > newRows.length) { newRows.push({ id: `new-${Date.now()}-${newRows.length}`, cells: COLUMNS.map(() => ({ value: "", isEditing: false })), }) } // Fill cells with pasted data pastedRows.forEach((pastedRow, rowOffset) => { const targetRowIndex = currentRow + rowOffset if (targetRowIndex >= newRows.length) return pastedRow.forEach((cellValue, colOffset) => { const targetColIndex = startCol + colOffset if (targetColIndex >= COLUMNS.length) return // Skip department column (index 4) if we're pasting a department name - try to match it if (targetColIndex === 4) { // Try to find department by name const matchedDept = departments.find((dept) => dept.name.toLowerCase() === cellValue.toLowerCase()) if (matchedDept) { newRows[targetRowIndex].cells[targetColIndex].value = matchedDept.id } else { newRows[targetRowIndex].cells[targetColIndex].value = cellValue } } else { newRows[targetRowIndex].cells[targetColIndex].value = cellValue } }) }) rowsRef.current = newRows return newRows }) toast.success(`Pasted ${pastedRows.length} row(s)`) } const tableElement = tableRef.current if (tableElement) { tableElement.addEventListener("paste", handlePaste) return () => { tableElement.removeEventListener("paste", handlePaste) } } }, [activeCell, departments]) const initializeSpreadsheet = async () => { if (!selectedCompany) return const supabase = createClient() // Load existing budget items for this year const { data: budgetItems } = await supabase .from("01-budgeting-budget_items") .select("*") .eq("company_id", selectedCompany.id) .gte("created_at", `${year}-01-01`) .lt("created_at", `${year + 1}-01-01`) .order("created_at", { ascending: true }) const initialRows: SpreadsheetRow[] = [] // Add existing items budgetItems?.forEach((item, index) => { initialRows.push({ id: item.id, cells: [ { value: item.service_name, isEditing: false }, { value: item.billing_frequency, isEditing: false }, { value: item.cost_local?.toString() || "", isEditing: false }, { value: item.cost_usd?.toString() || "", isEditing: false }, { value: item.department_id || "", isEditing: false }, { value: item.notes || "", isEditing: false }, ], }) }) // Fill remaining rows with empty cells const remainingRows = INITIAL_ROWS - initialRows.length for (let i = 0; i < remainingRows; i++) { initialRows.push({ id: `new-${i}`, cells: COLUMNS.map(() => ({ value: "", isEditing: false })), }) } setRows(initialRows) rowsRef.current = initialRows } const loadDepartments = async () => { if (!selectedCompany) return const supabase = createClient() const { data } = await supabase.from("01-budgeting-departments").select("*").eq("company_id", selectedCompany.id) if (data) setDepartments(data) } const handleCellClick = (rowIndex: number, colIndex: number) => { setActiveCell({ row: rowIndex, col: colIndex }) setRows((prev) => prev.map((row, rIdx) => ({ ...row, cells: row.cells.map((cell, cIdx) => ({ ...cell, isEditing: rIdx === rowIndex && cIdx === colIndex, })), })), ) // Focus the table container for paste events tableRef.current?.focus() } const handleCellChange = (rowIndex: number, colIndex: number, value: string) => { setRows((prev) => { const updated = prev.map((row, rIdx) => rIdx === rowIndex ? { ...row, cells: row.cells.map((cell, cIdx) => (cIdx === colIndex ? { ...cell, value } : cell)), } : row, ) rowsRef.current = updated return updated }) } const handleCellBlur = () => { setRows((prev) => prev.map((row) => ({ ...row, cells: row.cells.map((cell) => ({ ...cell, isEditing: false })), })), ) setActiveCell(null) } const handleSave = async () => { if (!selectedCompany) return setIsLoading(true) const supabase = createClient() const { data: { user }, } = await supabase.auth.getUser() if (!user) { toast.error("You must be logged in to save") setIsLoading(false) return } try { // Filter rows with data const filledRows = rows.filter((row) => row.cells[0].value.trim() !== "") for (const row of filledRows) { const [service, frequency, costLocal, costUsd, deptId, notes] = row.cells.map((c) => c.value) if (!service || !costLocal) continue const budgetData = { company_id: selectedCompany.id, service_name: service, billing_frequency: frequency || "Monthly", cost_local: Number.parseFloat(costLocal) || 0, cost_usd: costUsd ? Number.parseFloat(costUsd) : null, department_id: deptId || null, notes: notes || null, created_by: user.id, } if (row.id.startsWith("new-")) { // Insert new item await supabase.from("01-budgeting-budget_items").insert(budgetData) } else { // Update existing item await supabase.from("01-budgeting-budget_items").update(budgetData).eq("id", row.id) } } toast.success("Budget saved successfully!") await initializeSpreadsheet() } catch (error) { console.error("Error saving budget:", error) toast.error("Failed to save budget") } finally { setIsLoading(false) } } const handleExport = () => { if (!selectedCompany) return const exportData = rows .filter((row) => row.cells[0].value.trim() !== "") .map((row) => ({ Service: row.cells[0].value, "Billing Frequency": row.cells[1].value, "Cost (₦)": row.cells[2].value, "Cost ($)": row.cells[3].value, Department: departments.find((d) => d.id === row.cells[4].value)?.name || row.cells[4].value, Notes: row.cells[5].value, })) // Create workbook with styling const wb = XLSX.utils.book_new() // Create worksheet data with headers const wsData: any[][] = [ // Company header [`${selectedCompany.name} - Budget Report`], [`Year: ${year}`], [`Generated: ${new Date().toLocaleDateString()}`], [], // Empty row // Column headers ["Service", "Billing Frequency", "Cost (₦)", "Cost ($)", "Department", "Notes"], // Data rows ...exportData.map((row) => [ row.Service, row["Billing Frequency"], row["Cost (₦)"], row["Cost ($)"], row.Department, row.Notes, ]), ] const ws = XLSX.utils.aoa_to_sheet(wsData) // Set column widths ws["!cols"] = [ { wch: 30 }, // Service { wch: 18 }, // Billing Frequency { wch: 15 }, // Cost (₦) { wch: 15 }, // Cost ($) { wch: 20 }, // Department { wch: 40 }, // Notes ] // Merge cells for title ws["!merges"] = [ { s: { r: 0, c: 0 }, e: { r: 0, c: 5 } }, // Title row { s: { r: 1, c: 0 }, e: { r: 1, c: 5 } }, // Year row { s: { r: 2, c: 0 }, e: { r: 2, c: 5 } }, // Date row ] XLSX.utils.book_append_sheet(wb, ws, `Budget ${year}`) // Download XLSX.writeFile(wb, `${selectedCompany.name}_Budget_${year}.xlsx`) toast.success("Budget exported successfully!") } const addRow = () => { setRows((prev) => { const updated = [ ...prev, { id: `new-${Date.now()}`, cells: COLUMNS.map(() => ({ value: "", isEditing: false })), }, ] rowsRef.current = updated return updated }) } const handleSelectTemplate = (template: BudgetTemplate) => { if (!Array.isArray(template.template_data)) return const newRows = template.template_data.map((item: any, index: number) => ({ id: `template-${Date.now()}-${index}`, cells: [ { value: item.service || "", isEditing: false }, { value: item.frequency || "Monthly", isEditing: false }, { value: item.costLocal || "", isEditing: false }, { value: item.costUSD || "", isEditing: false }, { value: item.department || "", isEditing: false }, { value: item.notes || "", isEditing: false }, ], })) // Append template rows to existing data setRows((prev) => { const updated = [...prev, ...newRows] rowsRef.current = updated return updated }) toast.success("Template loaded! Fill in the details and save.") } if (!selectedCompany) { return

Please select a company

} return (

{!hideTitle &&

Budget Spreadsheet - {year}

} {hideTitle &&

}

{ // Make the table focusable for paste events }} > {COLUMNS.map((col, idx) => ( ))} {rows.map((row, rowIndex) => ( {row.cells.map((cell, colIndex) => ( ))} ))}

#	{col}
{rowIndex + 1}	handleCellClick(rowIndex, colIndex)} > {cell.isEditing ? ( colIndex === 1 ? ( ) : colIndex === 4 ? ( ) : ( handleCellChange(rowIndex, colIndex, e.target.value)} onBlur={handleCellBlur} className="h-8 border-0 focus-visible:ring-0" type={colIndex === 2 \|\| colIndex === 3 ? "number" : "text"} /> ) ) : ( {colIndex === 4 && cell.value ? departments.find((d) => d.id === cell.value)?.name \|\| cell.value : cell.value \|\| ""} )}

{col}

{rowIndex + 1}

handleCellClick(rowIndex, colIndex)} > {cell.isEditing ? ( colIndex === 1 ? ( ) : colIndex === 4 ? ( ) : ( handleCellChange(rowIndex, colIndex, e.target.value)} onBlur={handleCellBlur} className="h-8 border-0 focus-visible:ring-0" type={colIndex === 2 || colIndex === 3 ? "number" : "text"} /> ) ) : (

{colIndex === 4 && cell.value ? departments.find((d) => d.id === cell.value)?.name || cell.value : cell.value || ""}

)}

) } [V0_FILE]typescriptreact:file="components/budget-stats.tsx" isMerged="true" "use client" import { Card } from "@/components/ui/card" import { createClient } from "@/lib/supabase/client" import { useCompany } from "@/lib/contexts/company-context" import type { BudgetItem } from "@/lib/types" import { useEffect, useState } from "react" export function BudgetStats() { const { selectedCompany } = useCompany() const [budgetItems, setBudgetItems] = useState([]) useEffect(() => { const loadBudgetItems = async () => { if (!selectedCompany) return const supabase = createClient() const { data } = await supabase.from("01-budgeting-budget_items").select("*").eq("company_id", selectedCompany.id) if (data) setBudgetItems(data) } loadBudgetItems() }, [selectedCompany]) const calculateStats = () => { const monthlyRecurring = budgetItems .filter((item) => item.billing_frequency === "Monthly") .reduce((sum, item) => sum + Number(item.cost_local), 0) const yearlyRecurring = budgetItems .filter((item) => item.billing_frequency === "Yearly") .reduce((sum, item) => sum + Number(item.cost_local), 0) const variableCosts = budgetItems .filter((item) => item.billing_frequency === "Per-Use") .reduce((sum, item) => sum + Number(item.cost_local), 0) const annualizedTotal = monthlyRecurring * 12 + yearlyRecurring + variableCosts * 12 return { monthlyRecurring, yearlyRecurring, variableCosts, annualizedTotal, totalItems: budgetItems.length, } } const stats = calculateStats() return (

Monthly Recurring

₦{stats.monthlyRecurring.toLocaleString()}

₦{(stats.monthlyRecurring * 12).toLocaleString()}/year

Yearly Costs

₦{stats.yearlyRecurring.toLocaleString()}

₦{(stats.yearlyRecurring / 12).toLocaleString()}/month

Variable Costs

₦{stats.variableCosts.toLocaleString()}

Per-use services

Annualized Total

₦{stats.annualizedTotal.toLocaleString()}

{stats.totalItems} budget items

) } [V0_FILE]typescriptreact:file="components/budget-summary-table.tsx" isMerged="true" "use client" import { Button } from "@/components/ui/button" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { createClient } from "@/lib/supabase/client" import { useCompany } from "@/lib/contexts/company-context" import type { BudgetItem, Department } from "@/lib/types" import { Download, Share2 } from "lucide-react" import { useEffect, useState } from "react" import { toast } from "sonner" import * as XLSX from "xlsx" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { ShareBudgetDialog } from "./share-budget-dialog" export function BudgetSummaryTable() { const { selectedCompany } = useCompany() const [budgetItems, setBudgetItems] = useState([]) const [departments, setDepartments] = useState([]) const [selectedYear, setSelectedYear] = useState("all") const [isLoading, setIsLoading] = useState(false) const [showShareDialog, setShowShareDialog] = useState(false) const loadData = async () => { if (!selectedCompany) return const supabase = createClient() // Load budget items let query = supabase.from("01-budgeting-budget_items").select("*").eq("company_id", selectedCompany.id) // Filter by year if selected if (selectedYear !== "all") { const year = Number.parseInt(selectedYear) query = query.gte("created_at", `${year}-01-01`).lt("created_at", `${year + 1}-01-01`) } const { data: budgetData } = await query.order("created_at", { ascending: false }) // Load departments const { data: deptData } = await supabase .from("01-budgeting-departments") .select("*") .eq("company_id", selectedCompany.id) if (budgetData) setBudgetItems(budgetData) if (deptData) setDepartments(deptData) } useEffect(() => { loadData() }, [selectedCompany, selectedYear]) const handleDeleteItem = async (id: string) => { const supabase = createClient() const { error } = await supabase.from("01-budgeting-budget_items").delete().eq("id", id) if (!error) { toast.success("Budget item deleted") await loadData() } else { toast.error("Failed to delete item") } } const getDepartmentName = (deptId: string | null) => { if (!deptId || deptId === "uncategorized") return "Uncategorized" const dept = departments.find((d) => d.id === deptId) return dept?.name || "Uncategorized" } const calculateDepartmentTotals = () => { // Group items by department const departmentMap = new Map() // Add items with departments budgetItems.forEach((item) => { const deptId = item.department_id || "uncategorized" if (!departmentMap.has(deptId)) { departmentMap.set(deptId, []) } departmentMap.get(deptId)!.push(item) }) // Calculate totals for each department const departmentTotals = Array.from(departmentMap.entries()).map(([deptId, items]) => { const monthlyTotal = items .filter((item) => item.billing_frequency === "Monthly") .reduce((sum, item) => sum + Number(item.cost_local), 0) const yearlyTotal = items .filter((item) => item.billing_frequency === "Yearly") .reduce((sum, item) => sum + Number(item.cost_local), 0) const perUseTotal = items .filter((item) => item.billing_frequency === "Per-Use") .reduce((sum, item) => sum + Number(item.cost_local), 0) const totalCost = monthlyTotal + yearlyTotal + perUseTotal const totalUsd = items.reduce((sum, item) => sum + (Number(item.cost_usd) || 0), 0) return { departmentId: deptId, departmentName: getDepartmentName(deptId), itemCount: items.length, monthlyTotal, yearlyTotal, perUseTotal, totalCost, totalUsd, } }) // Sort by total cost descending return departmentTotals.sort((a, b) => b.totalCost - a.totalCost) } const calculateOverallTotals = () => { const monthlyTotal = budgetItems .filter((item) => item.billing_frequency === "Monthly") .reduce((sum, item) => sum + Number(item.cost_local), 0) const yearlyTotal = budgetItems .filter((item) => item.billing_frequency === "Yearly") .reduce((sum, item) => sum + Number(item.cost_local), 0) const perUseTotal = budgetItems .filter((item) => item.billing_frequency === "Per-Use") .reduce((sum, item) => sum + Number(item.cost_local), 0) return { monthlyTotal, yearlyTotal, perUseTotal, grandTotal: monthlyTotal + yearlyTotal + perUseTotal } } const departmentTotals = calculateDepartmentTotals() const overallTotals = calculateOverallTotals() const handleExport = () => { if (!selectedCompany) return const exportData = departmentTotals.map((dept) => ({ Department: dept.departmentName, "Item Count": dept.itemCount, "Monthly Total (₦)": dept.monthlyTotal, "Yearly Total (₦)": dept.yearlyTotal, "Per-Use Total (₦)": dept.perUseTotal, "Total Cost (₦)": dept.totalCost, "Total Cost ($)": dept.totalUsd || "", })) // Add overall totals row exportData.push({ Department: "TOTAL", "Item Count": budgetItems.length, "Monthly Total (₦)": overallTotals.monthlyTotal, "Yearly Total (₦)": overallTotals.yearlyTotal, "Per-Use Total (₦)": overallTotals.perUseTotal, "Total Cost (₦)": overallTotals.grandTotal, "Total Cost ($)": budgetItems.reduce((sum, item) => sum + (Number(item.cost_usd) || 0), 0), }) // Create workbook with styling const wb = XLSX.utils.book_new() // Create worksheet data with headers const wsData: any[][] = [ // Company header [`${selectedCompany.name} - Departmental Budget Summary`], [`Year: ${selectedYear === "all" ? "All Years" : selectedYear}`], [`Generated: ${new Date().toLocaleDateString()}`], [`Total Items: ${budgetItems.length}`], [], // Empty row // Column headers [ "Department", "Item Count", "Monthly Total (₦)", "Yearly Total (₦)", "Per-Use Total (₦)", "Total Cost (₦)", "Total Cost ($)", ], // Data rows ...exportData.map((row) => [ row.Department, row["Item Count"], row["Monthly Total (₦)"], row["Yearly Total (₦)"], row["Per-Use Total (₦)"], row["Total Cost (₦)"], row["Total Cost ($)"], ]), ] const ws = XLSX.utils.aoa_to_sheet(wsData) // Set column widths ws["!cols"] = [ { wch: 25 }, // Department { wch: 12 }, // Item Count { wch: 18 }, // Monthly Total { wch: 18 }, // Yearly Total { wch: 18 }, // Per-Use Total { wch: 18 }, // Total Cost (₦) { wch: 18 }, // Total Cost ($) ] // Merge cells for title rows ws["!merges"] = [ { s: { r: 0, c: 0 }, e: { r: 0, c: 6 } }, // Title row { s: { r: 1, c: 0 }, e: { r: 1, c: 6 } }, // Year row { s: { r: 2, c: 0 }, e: { r: 2, c: 6 } }, // Date row { s: { r: 3, c: 0 }, e: { r: 3, c: 6 } }, // Total items row ] XLSX.utils.book_append_sheet(wb, ws, "Budget by Department") XLSX.writeFile(wb, `${selectedCompany.name}_Departments_${selectedYear}.xlsx`) toast.success("Budget exported successfully!") } // Get unique years from budget items const years = Array.from(new Set(budgetItems.map((item) => new Date(item.created_at).getFullYear()))).sort( (a, b) => b - a, ) if (!selectedCompany) { return

Please select a company to view budgets

} return (

Filter by year:

{selectedYear !== "all" && ( )}

Department Items Monthly (₦) Yearly (₦) Per-Use (₦) Total (₦) Total ($) {departmentTotals.length === 0 ? ( No budget items found. Click "Open Spreadsheet" to add budget entries. ) : ( <> {departmentTotals.map((dept) => ( {dept.departmentName} {dept.itemCount} ₦{dept.monthlyTotal.toLocaleString()} ₦{dept.yearlyTotal.toLocaleString()} ₦{dept.perUseTotal.toLocaleString()} ₦{dept.totalCost.toLocaleString()} {dept.totalUsd > 0 ? `$${dept.totalUsd.toLocaleString()}` : "—"} ))} {/* Overall Totals row */} TOTAL ({budgetItems.length} items) {budgetItems.length} ₦{overallTotals.monthlyTotal.toLocaleString()} ₦{overallTotals.yearlyTotal.toLocaleString()} ₦{overallTotals.perUseTotal.toLocaleString()} ₦{overallTotals.grandTotal.toLocaleString()} {budgetItems.reduce((sum, item) => sum + (Number(item.cost_usd) || 0), 0) > 0 ? `$${budgetItems.reduce((sum, item) => sum + (Number(item.cost_usd) || 0), 0).toLocaleString()}` : "—"} )}

{selectedYear !== "all" && ( )}

) } [V0_FILE]typescriptreact:file="components/budget-table.tsx" isMerged="true" "use client" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { createClient } from "@/lib/supabase/client" import { useCompany } from "@/lib/contexts/company-context" import type { BudgetItem, Department } from "@/lib/types" import { useEffect, useState } from "react" export function BudgetTable() { const { selectedCompany } = useCompany() const [budgetItems, setBudgetItems] = useState([]) const [departments, setDepartments] = useState([]) const loadData = async () => { if (!selectedCompany) return const supabase = createClient() // Load budget items const { data: budgetData } = await supabase .from("01-budgeting-budget_items") .select("*") .eq("company_id", selectedCompany.id) .order("created_at", { ascending: false }) // Load departments const { data: deptData } = await supabase .from("01-budgeting-departments") .select("*") .eq("company_id", selectedCompany.id) if (budgetData) setBudgetItems(budgetData) if (deptData) setDepartments(deptData) } useEffect(() => { loadData() }, [selectedCompany]) const getDepartmentName = (deptId: string | null) => { if (!deptId || deptId === "uncategorized") return "Uncategorized" const dept = departments.find((d) => d.id === deptId) return dept?.name || "Uncategorized" } const calculateDepartmentTotals = () => { // Group items by department const departmentMap = new Map() // Add items with departments budgetItems.forEach((item) => { const deptId = item.department_id || "uncategorized" if (!departmentMap.has(deptId)) { departmentMap.set(deptId, []) } departmentMap.get(deptId)!.push(item) }) // Calculate totals for each department const departmentTotals = Array.from(departmentMap.entries()).map(([deptId, items]) => { const monthlyTotal = items .filter((item) => item.billing_frequency === "Monthly") .reduce((sum, item) => sum + Number(item.cost_local), 0) const yearlyTotal = items .filter((item) => item.billing_frequency === "Yearly") .reduce((sum, item) => sum + Number(item.cost_local), 0) const perUseTotal = items .filter((item) => item.billing_frequency === "Per-Use") .reduce((sum, item) => sum + Number(item.cost_local), 0) const totalCost = monthlyTotal + yearlyTotal + perUseTotal const totalUsd = items.reduce((sum, item) => sum + (Number(item.cost_usd) || 0), 0) return { departmentId: deptId, departmentName: getDepartmentName(deptId), itemCount: items.length, monthlyTotal, yearlyTotal, perUseTotal, totalCost, totalUsd, } }) // Sort by total cost descending return departmentTotals.sort((a, b) => b.totalCost - a.totalCost) } const calculateOverallTotals = () => { const monthlyTotal = budgetItems .filter((item) => item.billing_frequency === "Monthly") .reduce((sum, item) => sum + Number(item.cost_local), 0) const yearlyTotal = budgetItems .filter((item) => item.billing_frequency === "Yearly") .reduce((sum, item) => sum + Number(item.cost_local), 0) const perUseTotal = budgetItems .filter((item) => item.billing_frequency === "Per-Use") .reduce((sum, item) => sum + Number(item.cost_local), 0) return { monthlyTotal, yearlyTotal, perUseTotal, grandTotal: monthlyTotal + yearlyTotal + perUseTotal } } const departmentTotals = calculateDepartmentTotals() const overallTotals = calculateOverallTotals() if (!selectedCompany) { return

Please select a company to view budgets

} return (

Department Items Monthly (₦) Yearly (₦) Per-Use (₦) Total (₦) Total ($) {departmentTotals.length === 0 ? ( No budget items found. Click "Open Spreadsheet" to add budget entries. ) : ( <> {departmentTotals.map((dept) => ( {dept.departmentName} {dept.itemCount} ₦{dept.monthlyTotal.toLocaleString()} ₦{dept.yearlyTotal.toLocaleString()} ₦{dept.perUseTotal.toLocaleString()} ₦{dept.totalCost.toLocaleString()} {dept.totalUsd > 0 ? `$${dept.totalUsd.toLocaleString()}` : "—"} ))} {/* Overall Totals row */} TOTAL ({budgetItems.length} items) {budgetItems.length} ₦{overallTotals.monthlyTotal.toLocaleString()} ₦{overallTotals.yearlyTotal.toLocaleString()} ₦{overallTotals.perUseTotal.toLocaleString()} ₦{overallTotals.grandTotal.toLocaleString()} {budgetItems.reduce((sum, item) => sum + (Number(item.cost_usd) || 0), 0) > 0 ? `$${budgetItems .reduce((sum, item) => sum + (Number(item.cost_usd) || 0), 0) .toLocaleString()}` : "—"} )}

) } [V0_FILE]typescriptreact:file="components/company-settings.tsx" isMerged="true" "use client" import type React from "react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { createClient } from "@/lib/supabase/client" import { useCompany } from "@/lib/contexts/company-context" import type { Company } from "@/lib/types" import { Pencil, Trash2, Upload } from "lucide-react" import { useEffect, useState } from "react" import { DepartmentManager } from "./department-manager" export function CompanySettings() { const { companies, selectedCompany, refreshCompanies } = useCompany() const [editingCompany, setEditingCompany] = useState(null) const [name, setName] = useState("") const [type, setType] = useState("") const [logoUrl, setLogoUrl] = useState("") const [isLoading, setIsLoading] = useState(false) const [message, setMessage] = useState<{ type: "success" | "error"; text: string } | null>(null) useEffect(() => { if (editingCompany) { setName(editingCompany.name) setType(editingCompany.type) setLogoUrl(editingCompany.logo_url || "") } }, [editingCompany]) const handleUpdateCompany = async (e: React.FormEvent) => { e.preventDefault() if (!editingCompany) return setIsLoading(true) setMessage(null) const supabase = createClient() const { error } = await supabase .from("01-budgeting-companies") .update({ name, type, logo_url: logoUrl || null, updated_at: new Date().toISOString(), }) .eq("id", editingCompany.id) if (error) { setMessage({ type: "error", text: error.message }) } else { setMessage({ type: "success", text: "Company updated successfully" }) await refreshCompanies() setEditingCompany(null) } setIsLoading(false) } const handleDeleteCompany = async (id: string) => { if ( !confirm( "Are you sure you want to delete this company? This will also delete all associated departments and budget items.", ) ) { return } const supabase = createClient() const { error } = await supabase.from("01-budgeting-companies").delete().eq("id", id) if (!error) { await refreshCompanies() setMessage({ type: "success", text: "Company deleted successfully" }) } else { setMessage({ type: "error", text: error.message }) } } return (

Your Companies Manage your companies and their settings

{companies.length === 0 ? (

No companies yet. Create one using the company switcher.

) : (

{companies.map((company) => (

{company.logo_url && (

)}

{company.name}

{company.type}

))}

)}

{editingCompany && ( Edit Company Update company information

Company Name setName(e.target.value)} required />

Company Type

Logo URL

setLogoUrl(e.target.value)} placeholder="https://example.com/logo.png" />

{message && (

{message.text}

)}

) } [V0_FILE]typescriptreact:file="components/company-switcher.tsx" isMerged="true" "use client" import { Button } from "@/components/ui/button" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu" import { useCompany } from "@/lib/contexts/company-context" import { ChevronDown, Plus } from "lucide-react" import { useState } from "react" import { CreateCompanyDialog } from "./create-company-dialog" export function CompanySwitcher() { const { companies, selectedCompany, setSelectedCompany } = useCompany() const [showCreateDialog, setShowCreateDialog] = useState(false) return ( <> Companies {companies.map((company) => ( setSelectedCompany(company)} className="cursor-pointer"> {company.name} ))} setShowCreateDialog(true)} className="cursor-pointer"> Create Company ) } [V0_FILE]typescriptreact:file="components/create-company-dialog.tsx" isMerged="true" "use client" import type React from "react" import { Button } from "@/components/ui/button" import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, } from "@/components/ui/dialog" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { createClient } from "@/lib/supabase/client" import { useCompany } from "@/lib/contexts/company-context" import { useState } from "react" import { Upload } from "lucide-react" interface CreateCompanyDialogProps { open: boolean onOpenChange: (open: boolean) => void } export function CreateCompanyDialog({ open, onOpenChange }: CreateCompanyDialogProps) { const [name, setName] = useState("") const [type, setType] = useState("") const [logoUrl, setLogoUrl] = useState("") const [isLoading, setIsLoading] = useState(false) const [error, setError] = useState(null) const { refreshCompanies } = useCompany() const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() setIsLoading(true) setError(null) const supabase = createClient() const { data: { user }, } = await supabase.auth.getUser() if (!user) { setError("You must be logged in to create a company") setIsLoading(false) return } const { error: insertError } = await supabase.from("01-budgeting-companies").insert({ name, type, logo_url: logoUrl || null, created_by: user.id, }) if (insertError) { setError(insertError.message) setIsLoading(false) return } await refreshCompanies() setName("") setType("") setLogoUrl("") onOpenChange(false) setIsLoading(false) } return ( ) } [V0_FILE]typescriptreact:file="components/dashboard-layout.tsx" isMerged="true" "use client" import type React from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet" import { BarChart3, Building2, FileText, LayoutDashboard, LogOut, Menu, Settings } from "lucide-react" import Link from "next/link" import { usePathname } from "next/navigation" import { useState } from "react" interface DashboardLayoutProps { children: React.ReactNode onSignOut: () => void } export function DashboardLayout({ children, onSignOut }: DashboardLayoutProps) { const [open, setOpen] = useState(false) const pathname = usePathname() const navigation = [ { name: "Dashboard", href: "/dashboard", icon: LayoutDashboard }, { name: "Budget Items", href: "/dashboard/budgets", icon: FileText }, { name: "Reports & Analytics", href: "/dashboard/reports", icon: BarChart3 }, { name: "Companies", href: "/dashboard/companies", icon: Building2 }, { name: "Settings", href: "/dashboard/settings", icon: Settings }, ] const Sidebar = () => ( <>

) return (

{children}

) } [V0_FILE]typescriptreact:file="components/department-manager.tsx" isMerged="true" "use client" import type React from "react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Textarea } from "@/components/ui/textarea" import { createClient } from "@/lib/supabase/client" import { useCompany } from "@/lib/contexts/company-context" import type { Department } from "@/lib/types" import { Trash2 } from "lucide-react" import { useEffect, useState } from "react" export function DepartmentManager() { const { selectedCompany } = useCompany() const [departments, setDepartments] = useState([]) const [name, setName] = useState("") const [description, setDescription] = useState("") const [isLoading, setIsLoading] = useState(false) const loadDepartments = async () => { if (!selectedCompany) return const supabase = createClient() const { data } = await supabase .from("01-budgeting-departments") .select("*") .eq("company_id", selectedCompany.id) .order("created_at", { ascending: false }) if (data) { setDepartments(data) } } useEffect(() => { loadDepartments() }, [selectedCompany]) const handleAddDepartment = async (e: React.FormEvent) => { e.preventDefault() if (!selectedCompany) return setIsLoading(true) const supabase = createClient() const { error } = await supabase.from("01-budgeting-departments").insert({ company_id: selectedCompany.id, name, description: description || null, }) if (!error) { setName("") setDescription("") await loadDepartments() } setIsLoading(false) } const handleDeleteDepartment = async (id: string) => { const supabase = createClient() const { error } = await supabase.from("01-budgeting-departments").delete().eq("id", id) if (!error) { await loadDepartments() } } if (!selectedCompany) { return ( Departments Please select a company first ) } return ( Departments Manage departments for {selectedCompany.name}

Department Name setName(e.target.value)} required />

Description (optional)

setDescription(e.target.value)}
              rows={2}
            />
          </div>
          <Button type="submit" disabled={isLoading}>
            {isLoading ? "Adding..." : "Add Department"}
          </Button>
        </form>

<div className="space-y-2">
          <h4 className="text-sm font-medium">Existing Departments</h4>
          {departments.length === 0 ? (
            <p className="text-sm text-muted-foreground">No departments yet</p>
          ) : (
            <div className="space-y-2">
              {departments.map((dept) => (
                <div key={dept.id} className="flex items-center justify-between p-3 border rounded-lg">
                  <div>
                    <p className="font-medium">{dept.name}</p>
                    {dept.description && <p className="text-sm text-muted-foreground">{dept.description}</p>}
                  </div>
                  <Button variant="ghost" size="icon" onClick={() => handleDeleteDepartment(dept.id)}>
                    <Trash2 className="h-4 w-4 text-red-500" />
                  </Button>
                </div>
              ))}
            </div>
          )}
        </div>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="components/metrics-card.tsx" isMerged="true"
import { Card } from "@/components/ui/card"
import { ArrowUpRight } from "lucide-react"
import type React from "react" // Added import for React

interface MetricsCardProps {
  title: string
  value: string
  change: {
    value: string
    percentage: string
    isPositive: boolean
  }
  chart?: React.ReactNode
}

export function MetricsCard({ title, value, change, chart }: MetricsCardProps) {
  return (
    <Card className="p-4 bg-background/50 backdrop-blur">
      <div className="flex items-center justify-between mb-4">
        <h3 className="text-sm text-muted-foreground">{title}</h3>
        {chart ? <ArrowUpRight className="h-4 w-4 text-muted-foreground" /> : null}
      </div>
      <div className="flex items-end justify-between">
        <div>
          <p className="text-2xl font-bold">{value}</p>
          <div className="flex items-center gap-1 mt-1">
            <span className="text-sm">+{change.value}</span>
            <span className={`text-sm ${change.isPositive ? "text-green-500" : "text-red-500"}`}>
              {change.percentage}
            </span>
          </div>
        </div>
        {chart}
      </div>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="components/profile-settings.tsx" isMerged="true"
"use client"

import type React from "react"

import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { createClient } from "@/lib/supabase/client"
import { useEffect, useState } from "react"

export function ProfileSettings() {
  const [email, setEmail] = useState("")
  const [fullName, setFullName] = useState("")
  const [isLoading, setIsLoading] = useState(false)
  const [message, setMessage] = useState<{ type: "success" | "error"; text: string } | null>(null)

useEffect(() => {
    const loadProfile = async () => {
      const supabase = createClient()
      const {
        data: { user },
      } = await supabase.auth.getUser()

if (user) {
        setEmail(user.email || "")

const { data: profile } = await supabase.from("01-budgeting-profiles").select("*").eq("id", user.id).single()

if (profile) {
          setFullName(profile.full_name || "")
        }
      }
    }

loadProfile()
  }, [])

const handleUpdateProfile = async (e: React.FormEvent) => {
    e.preventDefault()
    setIsLoading(true)
    setMessage(null)

const supabase = createClient()
    const {
      data: { user },
    } = await supabase.auth.getUser()

if (!user) {
      setMessage({ type: "error", text: "Not authenticated" })
      setIsLoading(false)
      return
    }

const { error } = await supabase.from("01-budgeting-profiles").update({ full_name: fullName }).eq("id", user.id)

if (error) {
      setMessage({ type: "error", text: error.message })
    } else {
      setMessage({ type: "success", text: "Profile updated successfully" })
    }

setIsLoading(false)
  }

return (
    <Card className="bg-background/50 backdrop-blur">
      <CardHeader>
        <CardTitle>Profile Information</CardTitle>
        <CardDescription>Update your personal information</CardDescription>
      </CardHeader>
      <CardContent>
        <form onSubmit={handleUpdateProfile} className="space-y-4">
          <div className="grid gap-2">
            <Label htmlFor="email">Email</Label>
            <Input id="email" type="email" value={email} disabled className="bg-muted" />
            <p className="text-xs text-muted-foreground">Email cannot be changed</p>
          </div>

<div className="grid gap-2">
            <Label htmlFor="fullName">Full Name</Label>
            <Input
              id="fullName"
              type="text"
              value={fullName}
              onChange={(e) => setFullName(e.target.value)}
              placeholder="John Doe"
            />
          </div>

{message && (
            <div className={`text-sm ${message.type === "success" ? "text-green-500" : "text-red-500"}`}>
              {message.text}
            </div>
          )}

<Button type="submit" disabled={isLoading}>
            {isLoading ? "Saving..." : "Save Changes"}
          </Button>
        </form>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="components/share-budget-dialog.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { createClient } from "@/lib/supabase/client"
import { useCompany } from "@/lib/contexts/company-context"
import { Copy, Check, Share2, Loader2 } from "lucide-react"
import { toast } from "sonner"

interface ShareBudgetDialogProps {
  open: boolean
  onOpenChange: (open: boolean) => void
  year: number
}

export function ShareBudgetDialog({ open, onOpenChange, year }: ShareBudgetDialogProps) {
  const { selectedCompany } = useCompany()
  const [password, setPassword] = useState("")
  const [shareUrl, setShareUrl] = useState("")
  const [copied, setCopied] = useState(false)
  const [isGenerating, setIsGenerating] = useState(false)

const generateShareLink = async () => {
    if (!selectedCompany || !password) {
      toast.error("Please enter a password")
      return
    }

if (password.length < 6) {
      toast.error("Password must be at least 6 characters")
      return
    }

setIsGenerating(true)
    const supabase = createClient()

try {
      const {
        data: { user },
      } = await supabase.auth.getUser()

if (!user) {
        toast.error("You must be logged in")
        return
      }

// Generate a unique token
      const token = crypto.randomUUID()

// Hash the password (simple base64 encoding for demo - use bcrypt in production)
      const passwordHash = btoa(password)

// Create shared budget entry
      const { data, error } = await supabase
        .from("01-budgeting-shared_budgets")
        .insert({
          company_id: selectedCompany.id,
          share_token: token,
          password_hash: passwordHash,
          year: year,
          created_by: user.id,
        })
        .select()
        .single()

if (error) throw error

// Generate the shareable URL
      const url = `${window.location.origin}/shared/${token}`
      setShareUrl(url)
      toast.success("Share link generated!")
    } catch (error) {
      console.error("Error generating share link:", error)
      toast.error("Failed to generate share link")
    } finally {
      setIsGenerating(false)
    }
  }

const copyToClipboard = async () => {
    try {
      await navigator.clipboard.writeText(shareUrl)
      setCopied(true)
      toast.success("Link copied to clipboard!")
      setTimeout(() => setCopied(false), 2000)
    } catch (error) {
      toast.error("Failed to copy link")
    }
  }

const handleClose = () => {
    setPassword("")
    setShareUrl("")
    setCopied(false)
    onOpenChange(false)
  }

return (
    <Dialog open={open} onOpenChange={handleClose}>
      <DialogContent className="sm:max-w-md">
        <DialogHeader>
          <DialogTitle>Share Budget</DialogTitle>
          <DialogDescription>
            Create a password-protected link to share this budget with others. Anyone with the link and password can
            view the budget data.
          </DialogDescription>
        </DialogHeader>

<div className="space-y-4">
          {!shareUrl ? (
            <>
              <div className="space-y-2">
                <Label htmlFor="password">Set Password</Label>
                <Input
                  id="password"
                  type="password"
                  placeholder="Enter a password (min 6 characters)"
                  value={password}
                  onChange={(e) => setPassword(e.target.value)}
                  onKeyDown={(e) => {
                    if (e.key === "Enter") generateShareLink()
                  }}
                />
                <p className="text-xs text-muted-foreground">
                  This password will be required to view the shared budget
                </p>
              </div>

<Button onClick={generateShareLink} disabled={isGenerating || !password} className="w-full">
                {isGenerating ? (
                  <>
                    <Loader2 className="h-4 w-4 mr-2 animate-spin" />
                    Generating...
                  </>
                ) : (
                  <>
                    <Share2 className="h-4 w-4 mr-2" />
                    Generate Share Link
                  </>
                )}
              </Button>
            </>
          ) : (
            <>
              <div className="space-y-2">
                <Label>Share Link</Label>
                <div className="flex gap-2">
                  <Input value={shareUrl} readOnly className="flex-1" />
                  <Button onClick={copyToClipboard} size="icon" variant="outline">
                    {copied ? <Check className="h-4 w-4" /> : <Copy className="h-4 w-4" />}
                  </Button>
                </div>
              </div>

<div className="space-y-2">
                <Label>Password</Label>
                <div className="flex gap-2">
                  <Input value={password} readOnly className="flex-1" />
                  <Button
                    onClick={async () => {
                      await navigator.clipboard.writeText(password)
                      toast.success("Password copied!")
                    }}
                    size="icon"
                    variant="outline"
                  >
                    <Copy className="h-4 w-4" />
                  </Button>
                </div>
                <p className="text-xs text-muted-foreground">Share this password with the link recipients</p>
              </div>

<Button onClick={handleClose} variant="outline" className="w-full bg-transparent">
                Done
              </Button>
            </>
          )}
        </div>
      </DialogContent>
    </Dialog>
  )
}
[V0_FILE]typescriptreact:file="components/spreadsheet-button.tsx" isMerged="true"
"use client"

import { Button } from "@/components/ui/button"
import { FileSpreadsheet } from "lucide-react"
import { useState } from "react"
import { SpreadsheetDialog } from "./spreadsheet-dialog"

export function SpreadsheetButton() {
  const [open, setOpen] = useState(false)

return (
    <>
      <Button onClick={() => setOpen(true)} variant="outline" className="gap-2">
        <FileSpreadsheet className="h-4 w-4" />
        <span className="hidden sm:inline">Open Spreadsheet</span>
      </Button>
      <SpreadsheetDialog open={open} onOpenChange={setOpen} />
    </>
  )
}
[V0_FILE]typescriptreact:file="components/stats-chart.tsx" isMerged="true"
"use client"

import { Line, LineChart, ResponsiveContainer, Tooltip } from "recharts"

const data = [
  { date: "Mar", value: 300 },
  { date: "Apr", value: 350 },
  { date: "May", value: 200 },
  { date: "Jun", value: 400 },
  { date: "Jul", value: 300 },
  { date: "Aug", value: 200 },
  { date: "Sep", value: 450 },
  { date: "Oct", value: 500 },
  { date: "Nov", value: 480 },
  { date: "Dec", value: 400 },
  { date: "Jan", value: 350 },
  { date: "Feb", value: 400 },
]

export function StatsChart() {
  return (
    <div className="h-[300px] w-full">
      <ResponsiveContainer width="100%" height="100%">
        <LineChart data={data}>
          <Tooltip
            content={({ active, payload }) => {
              if (active && payload && payload.length) {
                return (
                  <div className="rounded-lg border bg-background p-2 shadow-sm">
                    <div className="grid grid-cols-2 gap-2">
                      <div className="flex flex-col">
                        <span className="text-[0.70rem] uppercase text-muted-foreground">Value</span>
                        <span className="font-bold text-muted-foreground">{payload[0].value}</span>
                      </div>
                      <div className="flex flex-col">
                        <span className="text-[0.70rem] uppercase text-muted-foreground">Date</span>
                        <span className="font-bold">{payload[0].payload.date}</span>
                      </div>
                    </div>
                  </div>
                )
              }
              return null
            }}
          />
          <Line type="monotone" dataKey="value" stroke="#ff6b00" strokeWidth={2} dot={false} />
        </LineChart>
      </ResponsiveContainer>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/theme-provider.tsx" isMerged="true"
'use client'

import * as React from 'react'
import {
  ThemeProvider as NextThemesProvider,
  type ThemeProviderProps,
} from 'next-themes'

export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
  return <NextThemesProvider {...props}>{children}</NextThemesProvider>
}
[V0_FILE]typescriptreact:file="components/ui/button.tsx" isMerged="true"
import * 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 ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
  {
    variants: {
      variant: {
        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
        destructive:
          'bg-destructive text-destructive-foreground hover:bg-destructive/90',
        outline:
          'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
        secondary:
          'bg-secondary text-secondary-foreground hover:bg-secondary/80',
        ghost: 'hover:bg-accent hover:text-accent-foreground',
        link: 'text-primary underline-offset-4 hover:underline',
      },
      size: {
        default: 'h-10 px-4 py-2',
        sm: 'h-9 rounded-md px-3',
        lg: 'h-11 rounded-md px-8',
        icon: 'h-10 w-10',
      },
    },
    defaultVariants: {
      variant: 'default',
      size: 'default',
    },
  },
)

export interface ButtonProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
    VariantProps<typeof buttonVariants> {
  asChild?: boolean
}

const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
  ({ className, variant, size, asChild = false, ...props }, ref) => {
    const Comp = asChild ? Slot : 'button'
    return (
      <Comp
        className={cn(buttonVariants({ variant, size, className }))}
        ref={ref}
        {...props}
      />
    )
  },
)
Button.displayName = 'Button'

export { Button, buttonVariants }
[V0_FILE]typescriptreact:file="components/ui/card.tsx" isMerged="true"
import * as React from 'react'

import { cn } from '@/lib/utils'

const Card = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
  <div
    ref={ref}
    className={cn(
      'rounded-lg border bg-card text-card-foreground shadow-sm',
      className,
    )}
    {...props}
  />
))
Card.displayName = 'Card'

const CardHeader = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
  <div
    ref={ref}
    className={cn('flex flex-col space-y-1.5 p-6', className)}
    {...props}
  />
))
CardHeader.displayName = 'CardHeader'

const CardTitle = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
  <div
    ref={ref}
    className={cn(
      'text-2xl font-semibold leading-none tracking-tight',
      className,
    )}
    {...props}
  />
))
CardTitle.displayName = 'CardTitle'

const CardDescription = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
  <div
    ref={ref}
    className={cn('text-sm text-muted-foreground', className)}
    {...props}
  />
))
CardDescription.displayName = 'CardDescription'

const CardContent = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
  <div ref={ref} className={cn('p-6 pt-0', className)} {...props} />
))
CardContent.displayName = 'CardContent'

const CardFooter = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
  <div
    ref={ref}
    className={cn('flex items-center p-6 pt-0', className)}
    {...props}
  />
))
CardFooter.displayName = 'CardFooter'

export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
[V0_FILE]typescriptreact:file="components/ui/dialog.tsx" isMerged="true"
'use client'

import * as React from 'react'
import * as DialogPrimitive from '@radix-ui/react-dialog'
import { X } from 'lucide-react'

import { cn } from '@/lib/utils'

const Dialog = DialogPrimitive.Root

const DialogTrigger = DialogPrimitive.Trigger

const DialogPortal = DialogPrimitive.Portal

const DialogClose = DialogPrimitive.Close

const DialogOverlay = React.forwardRef<
  React.ElementRef<typeof DialogPrimitive.Overlay>,
  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
>(({ className, ...props }, ref) => (
  <DialogPrimitive.Overlay
    ref={ref}
    className={cn(
      'fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
      className,
    )}
    {...props}
  />
))
DialogOverlay.displayName = DialogPrimitive.Overlay.displayName

const DialogContent = React.forwardRef<
  React.ElementRef<typeof DialogPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
>(({ className, children, ...props }, ref) => (
  <DialogPortal>
    <DialogOverlay />
    <DialogPrimitive.Content
      ref={ref}
      className={cn(
        'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
        className,
      )}
      {...props}
    >
      {children}
      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
        <X className="h-4 w-4" />
        <span className="sr-only">Close</span>
      </DialogPrimitive.Close>
    </DialogPrimitive.Content>
  </DialogPortal>
))
DialogContent.displayName = DialogPrimitive.Content.displayName

const DialogHeader = ({
  className,
  ...props
}: React.HTMLAttributes<HTMLDivElement>) => (
  <div
    className={cn(
      'flex flex-col space-y-1.5 text-center sm:text-left',
      className,
    )}
    {...props}
  />
)
DialogHeader.displayName = 'DialogHeader'

const DialogFooter = ({
  className,
  ...props
}: React.HTMLAttributes<HTMLDivElement>) => (
  <div
    className={cn(
      'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2',
      className,
    )}
    {...props}
  />
)
DialogFooter.displayName = 'DialogFooter'

const DialogTitle = React.forwardRef<
  React.ElementRef<typeof DialogPrimitive.Title>,
  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
>(({ className, ...props }, ref) => (
  <DialogPrimitive.Title
    ref={ref}
    className={cn(
      'text-lg font-semibold leading-none tracking-tight',
      className,
    )}
    {...props}
  />
))
DialogTitle.displayName = DialogPrimitive.Title.displayName

const DialogDescription = React.forwardRef<
  React.ElementRef<typeof DialogPrimitive.Description>,
  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
>(({ className, ...props }, ref) => (
  <DialogPrimitive.Description
    ref={ref}
    className={cn('text-sm text-muted-foreground', className)}
    {...props}
  />
))
DialogDescription.displayName = DialogPrimitive.Description.displayName

export {
  Dialog,
  DialogPortal,
  DialogOverlay,
  DialogClose,
  DialogTrigger,
  DialogContent,
  DialogHeader,
  DialogFooter,
  DialogTitle,
  DialogDescription,
}
[V0_FILE]typescriptreact:file="components/ui/dropdown-menu.tsx" isMerged="true"
'use client'

import * as React from 'react'
import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu'
import { Check, ChevronRight, Circle } from 'lucide-react'

import { cn } from '@/lib/utils'

const DropdownMenu = DropdownMenuPrimitive.Root

const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger

const DropdownMenuGroup = DropdownMenuPrimitive.Group

const DropdownMenuPortal = DropdownMenuPrimitive.Portal

const DropdownMenuSub = DropdownMenuPrimitive.Sub

const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup

const DropdownMenuSubTrigger = React.forwardRef<
  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
    inset?: boolean
  }
>(({ className, inset, children, ...props }, ref) => (
  <DropdownMenuPrimitive.SubTrigger
    ref={ref}
    className={cn(
      'flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
      inset && 'pl-8',
      className,
    )}
    {...props}
  >
    {children}
    <ChevronRight className="ml-auto" />
  </DropdownMenuPrimitive.SubTrigger>
))
DropdownMenuSubTrigger.displayName =
  DropdownMenuPrimitive.SubTrigger.displayName

const DropdownMenuSubContent = React.forwardRef<
  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
>(({ className, ...props }, ref) => (
  <DropdownMenuPrimitive.SubContent
    ref={ref}
    className={cn(
      'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
      className,
    )}
    {...props}
  />
))
DropdownMenuSubContent.displayName =
  DropdownMenuPrimitive.SubContent.displayName

const DropdownMenuContent = React.forwardRef<
  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
>(({ className, sideOffset = 4, ...props }, ref) => (
  <DropdownMenuPrimitive.Portal>
    <DropdownMenuPrimitive.Content
      ref={ref}
      sideOffset={sideOffset}
      className={cn(
        'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
        className,
      )}
      {...props}
    />
  </DropdownMenuPrimitive.Portal>
))
DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName

const DropdownMenuItem = React.forwardRef<
  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
    inset?: boolean
  }
>(({ className, inset, ...props }, ref) => (
  <DropdownMenuPrimitive.Item
    ref={ref}
    className={cn(
      'relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
      inset && 'pl-8',
      className,
    )}
    {...props}
  />
))
DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName

const DropdownMenuCheckboxItem = React.forwardRef<
  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
>(({ className, children, checked, ...props }, ref) => (
  <DropdownMenuPrimitive.CheckboxItem
    ref={ref}
    className={cn(
      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
      className,
    )}
    checked={checked}
    {...props}
  >
    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
      <DropdownMenuPrimitive.ItemIndicator>
        <Check className="h-4 w-4" />
      </DropdownMenuPrimitive.ItemIndicator>
    </span>
    {children}
  </DropdownMenuPrimitive.CheckboxItem>
))
DropdownMenuCheckboxItem.displayName =
  DropdownMenuPrimitive.CheckboxItem.displayName

const DropdownMenuRadioItem = React.forwardRef<
  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
>(({ className, children, ...props }, ref) => (
  <DropdownMenuPrimitive.RadioItem
    ref={ref}
    className={cn(
      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
      className,
    )}
    {...props}
  >
    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
      <DropdownMenuPrimitive.ItemIndicator>
        <Circle className="h-2 w-2 fill-current" />
      </DropdownMenuPrimitive.ItemIndicator>
    </span>
    {children}
  </DropdownMenuPrimitive.RadioItem>
))
DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName

const DropdownMenuLabel = React.forwardRef<
  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
    inset?: boolean
  }
>(({ className, inset, ...props }, ref) => (
  <DropdownMenuPrimitive.Label
    ref={ref}
    className={cn(
      'px-2 py-1.5 text-sm font-semibold',
      inset && 'pl-8',
      className,
    )}
    {...props}
  />
))
DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName

const DropdownMenuSeparator = React.forwardRef<
  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
>(({ className, ...props }, ref) => (
  <DropdownMenuPrimitive.Separator
    ref={ref}
    className={cn('-mx-1 my-1 h-px bg-muted', className)}
    {...props}
  />
))
DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName

const DropdownMenuShortcut = ({
  className,
  ...props
}: React.HTMLAttributes<HTMLSpanElement>) => {
  return (
    <span
      className={cn('ml-auto text-xs tracking-widest opacity-60', className)}
      {...props}
    />
  )
}
DropdownMenuShortcut.displayName = 'DropdownMenuShortcut'

export {
  DropdownMenu,
  DropdownMenuTrigger,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuCheckboxItem,
  DropdownMenuRadioItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuShortcut,
  DropdownMenuGroup,
  DropdownMenuPortal,
  DropdownMenuSub,
  DropdownMenuSubContent,
  DropdownMenuSubTrigger,
  DropdownMenuRadioGroup,
}
[V0_FILE]typescriptreact:file="components/ui/input.tsx" isMerged="true"
import * as React from 'react'

import { cn } from '@/lib/utils'

const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<'input'>>(
  ({ className, type, ...props }, ref) => {
    return (
      <input
        type={type}
        className={cn(
          'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
          className,
        )}
        ref={ref}
        {...props}
      />
    )
  },
)
Input.displayName = 'Input'

export { Input }
[V0_FILE]typescriptreact:file="components/ui/label.tsx" isMerged="true"
'use client'

import * as React from 'react'
import * as LabelPrimitive from '@radix-ui/react-label'
import { cva, type VariantProps } from 'class-variance-authority'

import { cn } from '@/lib/utils'

const labelVariants = cva(
  'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
)

const Label = React.forwardRef<
  React.ElementRef<typeof LabelPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
    VariantProps<typeof labelVariants>
>(({ className, ...props }, ref) => (
  <LabelPrimitive.Root
    ref={ref}
    className={cn(labelVariants(), className)}
    {...props}
  />
))
Label.displayName = LabelPrimitive.Root.displayName

export { Label }
[V0_FILE]typescriptreact:file="components/ui/select.tsx" isMerged="true"
'use client'

import * as React from 'react'
import * as SelectPrimitive from '@radix-ui/react-select'
import { Check, ChevronDown, ChevronUp } from 'lucide-react'

import { cn } from '@/lib/utils'

const Select = SelectPrimitive.Root

const SelectGroup = SelectPrimitive.Group

const SelectValue = SelectPrimitive.Value

const SelectTrigger = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.Trigger>,
  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
>(({ className, children, ...props }, ref) => (
  <SelectPrimitive.Trigger
    ref={ref}
    className={cn(
      'flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
      className,
    )}
    {...props}
  >
    {children}
    <SelectPrimitive.Icon asChild>
      <ChevronDown className="h-4 w-4 opacity-50" />
    </SelectPrimitive.Icon>
  </SelectPrimitive.Trigger>
))
SelectTrigger.displayName = SelectPrimitive.Trigger.displayName

const SelectScrollUpButton = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
>(({ className, ...props }, ref) => (
  <SelectPrimitive.ScrollUpButton
    ref={ref}
    className={cn(
      'flex cursor-default items-center justify-center py-1',
      className,
    )}
    {...props}
  >
    <ChevronUp className="h-4 w-4" />
  </SelectPrimitive.ScrollUpButton>
))
SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName

const SelectScrollDownButton = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
>(({ className, ...props }, ref) => (
  <SelectPrimitive.ScrollDownButton
    ref={ref}
    className={cn(
      'flex cursor-default items-center justify-center py-1',
      className,
    )}
    {...props}
  >
    <ChevronDown className="h-4 w-4" />
  </SelectPrimitive.ScrollDownButton>
))
SelectScrollDownButton.displayName =
  SelectPrimitive.ScrollDownButton.displayName

const SelectContent = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
>(({ className, children, position = 'popper', ...props }, ref) => (
  <SelectPrimitive.Portal>
    <SelectPrimitive.Content
      ref={ref}
      className={cn(
        'relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
        position === 'popper' &&
          'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
        className,
      )}
      position={position}
      {...props}
    >
      <SelectScrollUpButton />
      <SelectPrimitive.Viewport
        className={cn(
          'p-1',
          position === 'popper' &&
            'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]',
        )}
      >
        {children}
      </SelectPrimitive.Viewport>
      <SelectScrollDownButton />
    </SelectPrimitive.Content>
  </SelectPrimitive.Portal>
))
SelectContent.displayName = SelectPrimitive.Content.displayName

const SelectLabel = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.Label>,
  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
>(({ className, ...props }, ref) => (
  <SelectPrimitive.Label
    ref={ref}
    className={cn('py-1.5 pl-8 pr-2 text-sm font-semibold', className)}
    {...props}
  />
))
SelectLabel.displayName = SelectPrimitive.Label.displayName

const SelectItem = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.Item>,
  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
>(({ className, children, ...props }, ref) => (
  <SelectPrimitive.Item
    ref={ref}
    className={cn(
      'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
      className,
    )}
    {...props}
  >
    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
      <SelectPrimitive.ItemIndicator>
        <Check className="h-4 w-4" />
      </SelectPrimitive.ItemIndicator>
    </span>

<SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
  </SelectPrimitive.Item>
))
SelectItem.displayName = SelectPrimitive.Item.displayName

const SelectSeparator = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.Separator>,
  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
>(({ className, ...props }, ref) => (
  <SelectPrimitive.Separator
    ref={ref}
    className={cn('-mx-1 my-1 h-px bg-muted', className)}
    {...props}
  />
))
SelectSeparator.displayName = SelectPrimitive.Separator.displayName

export {
  Select,
  SelectGroup,
  SelectValue,
  SelectTrigger,
  SelectContent,
  SelectLabel,
  SelectItem,
  SelectSeparator,
  SelectScrollUpButton,
  SelectScrollDownButton,
}
[V0_FILE]typescriptreact:file="components/ui/sheet.tsx" isMerged="true"
'use client'

import * as React from 'react'
import * as SheetPrimitive from '@radix-ui/react-dialog'
import { cva, type VariantProps } from 'class-variance-authority'
import { X } from 'lucide-react'

import { cn } from '@/lib/utils'

const Sheet = SheetPrimitive.Root

const SheetTrigger = SheetPrimitive.Trigger

const SheetClose = SheetPrimitive.Close

const SheetPortal = SheetPrimitive.Portal

const SheetOverlay = React.forwardRef<
  React.ElementRef<typeof SheetPrimitive.Overlay>,
  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
>(({ className, ...props }, ref) => (
  <SheetPrimitive.Overlay
    className={cn(
      'fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
      className,
    )}
    {...props}
    ref={ref}
  />
))
SheetOverlay.displayName = SheetPrimitive.Overlay.displayName

const sheetVariants = cva(
  'fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
  {
    variants: {
      side: {
        top: 'inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top',
        bottom:
          'inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',
        left: 'inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm',
        right:
          'inset-y-0 right-0 h-full w-3/4  border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm',
      },
    },
    defaultVariants: {
      side: 'right',
    },
  },
)

interface SheetContentProps
  extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
    VariantProps<typeof sheetVariants> {}

const SheetContent = React.forwardRef<
  React.ElementRef<typeof SheetPrimitive.Content>,
  SheetContentProps
>(({ side = 'right', className, children, ...props }, ref) => (
  <SheetPortal>
    <SheetOverlay />
    <SheetPrimitive.Content
      ref={ref}
      className={cn(sheetVariants({ side }), className)}
      {...props}
    >
      {children}
      <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
        <X className="h-4 w-4" />
        <span className="sr-only">Close</span>
      </SheetPrimitive.Close>
    </SheetPrimitive.Content>
  </SheetPortal>
))
SheetContent.displayName = SheetPrimitive.Content.displayName

const SheetHeader = ({
  className,
  ...props
}: React.HTMLAttributes<HTMLDivElement>) => (
  <div
    className={cn(
      'flex flex-col space-y-2 text-center sm:text-left',
      className,
    )}
    {...props}
  />
)
SheetHeader.displayName = 'SheetHeader'

const SheetFooter = ({
  className,
  ...props
}: React.HTMLAttributes<HTMLDivElement>) => (
  <div
    className={cn(
      'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2',
      className,
    )}
    {...props}
  />
)
SheetFooter.displayName = 'SheetFooter'

const SheetTitle = React.forwardRef<
  React.ElementRef<typeof SheetPrimitive.Title>,
  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
>(({ className, ...props }, ref) => (
  <SheetPrimitive.Title
    ref={ref}
    className={cn('text-lg font-semibold text-foreground', className)}
    {...props}
  />
))
SheetTitle.displayName = SheetPrimitive.Title.displayName

const SheetDescription = React.forwardRef<
  React.ElementRef<typeof SheetPrimitive.Description>,
  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
>(({ className, ...props }, ref) => (
  <SheetPrimitive.Description
    ref={ref}
    className={cn('text-sm text-muted-foreground', className)}
    {...props}
  />
))
SheetDescription.displayName = SheetPrimitive.Description.displayName

export {
  Sheet,
  SheetPortal,
  SheetOverlay,
  SheetTrigger,
  SheetClose,
  SheetContent,
  SheetHeader,
  SheetFooter,
  SheetTitle,
  SheetDescription,
}
[V0_FILE]typescriptreact:file="components/ui/table.tsx" isMerged="true"
import * as React from 'react'

import { cn } from '@/lib/utils'

const Table = React.forwardRef<
  HTMLTableElement,
  React.HTMLAttributes<HTMLTableElement>
>(({ className, ...props }, ref) => (
  <div className="relative w-full overflow-auto">
    <table
      ref={ref}
      className={cn('w-full caption-bottom text-sm', className)}
      {...props}
    />
  </div>
))
Table.displayName = 'Table'

const TableHeader = React.forwardRef<
  HTMLTableSectionElement,
  React.HTMLAttributes<HTMLTableSectionElement>
>(({ className, ...props }, ref) => (
  <thead ref={ref} className={cn('[&_tr]:border-b', className)} {...props} />
))
TableHeader.displayName = 'TableHeader'

const TableBody = React.forwardRef<
  HTMLTableSectionElement,
  React.HTMLAttributes<HTMLTableSectionElement>
>(({ className, ...props }, ref) => (
  <tbody
    ref={ref}
    className={cn('[&_tr:last-child]:border-0', className)}
    {...props}
  />
))
TableBody.displayName = 'TableBody'

const TableFooter = React.forwardRef<
  HTMLTableSectionElement,
  React.HTMLAttributes<HTMLTableSectionElement>
>(({ className, ...props }, ref) => (
  <tfoot
    ref={ref}
    className={cn(
      'border-t bg-muted/50 font-medium [&>tr]:last:border-b-0',
      className,
    )}
    {...props}
  />
))
TableFooter.displayName = 'TableFooter'

const TableRow = React.forwardRef<
  HTMLTableRowElement,
  React.HTMLAttributes<HTMLTableRowElement>
>(({ className, ...props }, ref) => (
  <tr
    ref={ref}
    className={cn(
      'border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted',
      className,
    )}
    {...props}
  />
))
TableRow.displayName = 'TableRow'

const TableHead = React.forwardRef<
  HTMLTableCellElement,
  React.ThHTMLAttributes<HTMLTableCellElement>
>(({ className, ...props }, ref) => (
  <th
    ref={ref}
    className={cn(
      'h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0',
      className,
    )}
    {...props}
  />
))
TableHead.displayName = 'TableHead'

const TableCell = React.forwardRef<
  HTMLTableCellElement,
  React.TdHTMLAttributes<HTMLTableCellElement>
>(({ className, ...props }, ref) => (
  <td
    ref={ref}
    className={cn('p-4 align-middle [&:has([role=checkbox])]:pr-0', className)}
    {...props}
  />
))
TableCell.displayName = 'TableCell'

const TableCaption = React.forwardRef<
  HTMLTableCaptionElement,
  React.HTMLAttributes<HTMLTableCaptionElement>
>(({ className, ...props }, ref) => (
  <caption
    ref={ref}
    className={cn('mt-4 text-sm text-muted-foreground', className)}
    {...props}
  />
))
TableCaption.displayName = 'TableCaption'

export {
  Table,
  TableHeader,
  TableBody,
  TableFooter,
  TableHead,
  TableRow,
  TableCell,
  TableCaption,
}
[V0_FILE]typescriptreact:file="components/ui/tabs.tsx" isMerged="true"
'use client'

import * as React from 'react'
import * as TabsPrimitive from '@radix-ui/react-tabs'

import { cn } from '@/lib/utils'

const Tabs = TabsPrimitive.Root

const TabsList = React.forwardRef<
  React.ElementRef<typeof TabsPrimitive.List>,
  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
>(({ className, ...props }, ref) => (
  <TabsPrimitive.List
    ref={ref}
    className={cn(
      'inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground',
      className,
    )}
    {...props}
  />
))
TabsList.displayName = TabsPrimitive.List.displayName

const TabsTrigger = React.forwardRef<
  React.ElementRef<typeof TabsPrimitive.Trigger>,
  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
>(({ className, ...props }, ref) => (
  <TabsPrimitive.Trigger
    ref={ref}
    className={cn(
      'inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm',
      className,
    )}
    {...props}
  />
))
TabsTrigger.displayName = TabsPrimitive.Trigger.displayName

const TabsContent = React.forwardRef<
  React.ElementRef<typeof TabsPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
>(({ className, ...props }, ref) => (
  <TabsPrimitive.Content
    ref={ref}
    className={cn(
      'mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
      className,
    )}
    {...props}
  />
))
TabsContent.displayName = TabsPrimitive.Content.displayName

export { Tabs, TabsList, TabsTrigger, TabsContent }
[V0_FILE]typescriptreact:file="components/ui/textarea.tsx" isMerged="true"
import * as React from 'react'

import { cn } from '@/lib/utils'

const Textarea = React.forwardRef<
  HTMLTextAreaElement,
  React.ComponentProps<'textarea'>
>(({ className, ...props }, ref) => {
  return (
    <textarea
      className={cn(
        'flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
        className,
      )}
      ref={ref}
      {...props}
    />
  )
})
Textarea.displayName = 'Textarea'

export { Textarea }
[V0_FILE]typescriptreact:file="components/vault-table.tsx" isMerged="true"
import { Avatar } from "@/components/ui/avatar"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { MoreHorizontal } from "lucide-react"

const vaults = [
  {
    name: "Bitcoin",
    symbol: "BTC",
    price: "$13,643.21",
    daily: "+$213.8",
    balance: "$13,954.04",
    apy: "8.56%",
    state: "Fixed",
    startDate: "05.10.2023",
    liquidity: "high",
  },
  {
    name: "USDT",
    symbol: "USDT",
    price: "$1.00",
    daily: "+$45.1",
    balance: "$3,954.04",
    apy: "5.44%",
    state: "Fixed",
    startDate: "12.03.2023",
    liquidity: "medium",
  },
  {
    name: "Ethereum",
    symbol: "ETH",
    price: "$2,123.87",
    daily: "+$13.5",
    balance: "$3,954.04",
    apy: "4.12%",
    state: "Flexible",
    startDate: "21.01.2023",
    liquidity: "low",
  },
]

export function VaultTable() {
  return (
    <Table>
      <TableHeader>
        <TableRow>
          <TableHead>Vault</TableHead>
          <TableHead>Daily</TableHead>
          <TableHead>Balance ↓</TableHead>
          <TableHead>APY ↓</TableHead>
          <TableHead>State</TableHead>
          <TableHead>Start date</TableHead>
          <TableHead>Liquidity</TableHead>
          <TableHead></TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        {vaults.map((vault) => (
          <TableRow key={vault.symbol}>
            <TableCell className="font-medium">
              <div className="flex items-center gap-2">
                <Avatar className="h-6 w-6">
                  <img src={`/placeholder.svg?height=24&width=24`} alt={vault.name} />
                </Avatar>
                <div>
                  <div className="font-medium">{vault.name}</div>
                  <div className="text-xs text-muted-foreground">{vault.price}</div>
                </div>
              </div>
            </TableCell>
            <TableCell className="text-green-500">{vault.daily}</TableCell>
            <TableCell>{vault.balance}</TableCell>
            <TableCell>{vault.apy}</TableCell>
            <TableCell>
              <span
                className={`inline-flex items-center rounded-full px-2 py-1 text-xs ${
                  vault.state === "Fixed" ? "bg-yellow-500/10 text-yellow-500" : "bg-green-500/10 text-green-500"
                }`}
              >
                {vault.state}
              </span>
            </TableCell>
            <TableCell>{vault.startDate}</TableCell>
            <TableCell>
              <div className="flex gap-1">
                {Array.from({ length: 3 }).map((_, i) => (
                  <div
                    key={i}
                    className={`h-1.5 w-3 rounded-full ${
                      i < (vault.liquidity === "high" ? 3 : vault.liquidity === "medium" ? 2 : 1)
                        ? "bg-primary"
                        : "bg-muted"
                    }`}
                  />
                ))}
              </div>
            </TableCell>
            <TableCell>
              <MoreHorizontal className="h-4 w-4 text-muted-foreground" />
            </TableCell>
          </TableRow>
        ))}
      </TableBody>
    </Table>
  )
}
[V0_FILE]typescriptreact:file="lib/contexts/company-context.tsx" isMerged="true"
"use client"

import { createContext, useContext, useState, useEffect, type ReactNode } from "react"
import { createClient } from "@/lib/supabase/client"
import type { Company } from "@/lib/types"

interface CompanyContextType {
  companies: Company[]
  selectedCompany: Company | null
  setSelectedCompany: (company: Company | null) => void
  refreshCompanies: () => Promise<void>
  isLoading: boolean
}

const CompanyContext = createContext<CompanyContextType | undefined>(undefined)

export function CompanyProvider({ children }: { children: ReactNode }) {
  const [companies, setCompanies] = useState<Company[]>([])
  const [selectedCompany, setSelectedCompany] = useState<Company | null>(null)
  const [isLoading, setIsLoading] = useState(true)

const refreshCompanies = async () => {
    const supabase = createClient()
    const {
      data: { user },
    } = await supabase.auth.getUser()

if (!user) {
      setCompanies([])
      setSelectedCompany(null)
      setIsLoading(false)
      return
    }

const { data, error } = await supabase
      .from("01-budgeting-companies")
      .select("*")
      .order("created_at", { ascending: false })

if (!error && data) {
      setCompanies(data)
      // Auto-select first company if none selected
      if (!selectedCompany && data.length > 0) {
        setSelectedCompany(data[0])
        localStorage.setItem("selectedCompanyId", data[0].id)
      }
    }
    setIsLoading(false)
  }

useEffect(() => {
    refreshCompanies()

// Restore selected company from localStorage
    const savedCompanyId = localStorage.getItem("selectedCompanyId")
    if (savedCompanyId) {
      const company = companies.find((c) => c.id === savedCompanyId)
      if (company) {
        setSelectedCompany(company)
      }
    }
  }, [])

useEffect(() => {
    if (selectedCompany) {
      localStorage.setItem("selectedCompanyId", selectedCompany.id)
    }
  }, [selectedCompany])

return (
    <CompanyContext.Provider
      value={{
        companies,
        selectedCompany,
        setSelectedCompany,
        refreshCompanies,
        isLoading,
      }}
    >
      {children}
    </CompanyContext.Provider>
  )
}

export function useCompany() {
  const context = useContext(CompanyContext)
  if (context === undefined) {
    throw new Error("useCompany must be used within a CompanyProvider")
  }
  return context
}
[V0_FILE]typescript:file="lib/supabase/client.ts" isMerged="true"
import { createBrowserClient } from "@supabase/ssr"

export function createClient() {
  return createBrowserClient(process.env.NEXT_PUBLIC_SUPABASE_URL!, process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!)
}
[V0_FILE]typescript:file="lib/supabase/middleware.ts" isMerged="true"
import { createServerClient } from "@supabase/ssr"
import { NextResponse, type NextRequest } from "next/server"

export async function updateSession(request: NextRequest) {
  let 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 }) => request.cookies.set(name, value))
          supabaseResponse = NextResponse.next({
            request,
          })
          cookiesToSet.forEach(({ name, value, options }) => supabaseResponse.cookies.set(name, value, options))
        },
      },
    },
  )

const {
    data: { user },
  } = await supabase.auth.getUser()

if (!user && !request.nextUrl.pathname.startsWith("/auth") && request.nextUrl.pathname !== "/") {
    const url = request.nextUrl.clone()
    url.pathname = "/auth/login"
    return NextResponse.redirect(url)
  }

return supabaseResponse
}
[V0_FILE]typescript:file="lib/supabase/server.ts" isMerged="true"
import { createServerClient } from "@supabase/ssr"
import { cookies } from "next/headers"

export async function createClient() {
  const cookieStore = await cookies()

return createServerClient(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 {
          // The "setAll" method was called from a Server Component.
          // This can be ignored if you have middleware refreshing
          // user sessions.
        }
      },
    },
  })
}
[V0_FILE]typescript:file="lib/utils.ts" isMerged="true"
import { clsx, type ClassValue } from 'clsx'
import { twMerge } from 'tailwind-merge'

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}
[V0_FILE]typescript:file="lib/utils/spreadsheet.ts" isMerged="true"
// Spreadsheet utility functions for cell references and formulas

export interface CellData {
  id: string
  value: string | number
  formula: string
}

export interface RowData {
  id: string
  cells: CellData[]
}

// Convert column index to letter (0 -> A, 1 -> B, etc.)
export function getColumnLetter(index: number): string {
  let letter = ""
  while (index >= 0) {
    letter = String.fromCharCode(65 + (index % 26)) + letter
    index = Math.floor(index / 26) - 1
  }
  return letter
}

// Convert cell ID (e.g., "1-1") to reference (e.g., "A1")
export function getCellReference(cellId: string): string {
  const [row, col] = cellId.split("-").map((num) => Number.parseInt(num) - 1)
  return `${getColumnLetter(col)}${row + 1}`
}

// Convert cell reference (e.g., "A1") to ID (e.g., "1-1")
export function getCellId(reference: string): string {
  const match = reference.match(/^([A-Z]+)(\d+)$/)
  if (!match) return "1-1"

const col = match[1]
  const row = Number.parseInt(match[2])

let colIndex = 0
  for (let i = 0; i < col.length; i++) {
    colIndex = colIndex * 26 + (col.charCodeAt(i) - 64)
  }

return `${row}-${colIndex}`
}

// Evaluate a formula or return the value
export function evaluateFormula(formula: string, getCellValue: (ref: string) => string | number): string | number {
  if (!formula) return ""

// If it starts with =, it's a formula
  if (formula.toString().startsWith("=")) {
    try {
      const expression = formula.substring(1)
      // Replace cell references with their values
      const evaluated = expression.replace(/[A-Z]+\d+/g, (ref) => {
        const value = getCellValue(ref)
        return typeof value === "number" ? value.toString() : `"${value}"`
      })

// Evaluate the expression
      return eval(evaluated)
    } catch (error) {
      return "#ERROR!"
    }
  }

return formula
}
[V0_FILE]typescript:file="middleware.ts" isMerged="true"
import { updateSession } from "@/lib/supabase/middleware"
import type { NextRequest } from "next/server"

export async function middleware(request: NextRequest) {
  return await updateSession(request)
}

export const config = {
  matcher: ["/((?!_next/static|_next/image|favicon.ico|.*\\.(?:svg|png|jpg|jpeg|gif|webp)$).*)"],
}
[V0_FILE]javascript:file="next.config.mjs" isMerged="true"
/** @type {import('next').NextConfig} */
const nextConfig = {
  eslint: {
    ignoreDuringBuilds: true,
  },
  typescript: {
    ignoreBuildErrors: true,
  },
  images: {
    unoptimized: true,
  },
}

export default nextConfig
[V0_FILE]json:file="package.json" isMerged="true"
{
  "name": "my-v0-project",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "build": "next build",
    "dev": "next dev",
    "lint": "eslint .",
    "start": "next start"
  },
  "dependencies": {
    "@hookform/resolvers": "^3.9.1",
    "@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": "latest",
    "@radix-ui/react-dropdown-menu": "latest",
    "@radix-ui/react-hover-card": "1.1.4",
    "@radix-ui/react-label": "latest",
    "@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": "latest",
    "@radix-ui/react-separator": "1.1.1",
    "@radix-ui/react-slider": "1.2.2",
    "@radix-ui/react-slot": "latest",
    "@radix-ui/react-switch": "1.1.2",
    "@radix-ui/react-tabs": "latest",
    "@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",
    "@supabase/ssr": "latest",
    "@supabase/supabase-js": "latest",
    "@vercel/analytics": "1.3.1",
    "autoprefixer": "^10.4.20",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
    "cmdk": "1.0.4",
    "date-fns": "4.1.0",
    "embla-carousel-react": "8.5.1",
    "geist": "^1.3.1",
    "input-otp": "1.4.1",
    "lucide-react": "^0.454.0",
    "next": "14.2.35",
    "next-themes": "latest",
    "react": "^19",
    "react-day-picker": "9.8.0",
    "react-dom": "^19",
    "react-hook-form": "^7.54.1",
    "react-resizable-panels": "^2.1.7",
    "recharts": "latest",
    "sonner": "latest",
    "tailwind-merge": "^2.5.5",
    "tailwindcss-animate": "^1.0.7",
    "vaul": "^0.9.6",
    "xlsx": "latest",
    "zod": "^3.24.1"
  },
  "devDependencies": {
    "@types/node": "^22",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "postcss": "^8.5",
    "tailwindcss": "^3.4.17",
    "typescript": "^5"
  }
}
[V0_FILE]javascript:file="postcss.config.mjs" isMerged="true"
/** @type {import('postcss-load-config').Config} */
const config = {
  plugins: {
    tailwindcss: {},
  },
}

export default config
[V0_FILE]sql:file="scripts/001_create_budgeting_tables.sql" isMerged="true"
-- Create companies table with RLS
CREATE TABLE IF NOT EXISTS "01-budgeting-companies" (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  name TEXT NOT NULL,
  logo_url TEXT,
  type TEXT NOT NULL, -- e.g., "LLC", "Corporation", "Sole Proprietorship"
  created_by UUID NOT NULL REFERENCES auth.users(id) ON DELETE CASCADE,
  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
  updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

ALTER TABLE "01-budgeting-companies" ENABLE ROW LEVEL SECURITY;

CREATE POLICY "Users can view their own companies"
  ON "01-budgeting-companies" FOR SELECT
  USING (auth.uid() = created_by);

CREATE POLICY "Users can insert their own companies"
  ON "01-budgeting-companies" FOR INSERT
  WITH CHECK (auth.uid() = created_by);

CREATE POLICY "Users can update their own companies"
  ON "01-budgeting-companies" FOR UPDATE
  USING (auth.uid() = created_by);

CREATE POLICY "Users can delete their own companies"
  ON "01-budgeting-companies" FOR DELETE
  USING (auth.uid() = created_by);

-- Create departments table with RLS
CREATE TABLE IF NOT EXISTS "01-budgeting-departments" (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  company_id UUID NOT NULL REFERENCES "01-budgeting-companies"(id) ON DELETE CASCADE,
  name TEXT NOT NULL,
  description TEXT,
  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
  updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

ALTER TABLE "01-budgeting-departments" ENABLE ROW LEVEL SECURITY;

CREATE POLICY "Users can view departments of their companies"
  ON "01-budgeting-departments" FOR SELECT
  USING (
    EXISTS (
      SELECT 1 FROM "01-budgeting-companies"
      WHERE id = company_id AND created_by = auth.uid()
    )
  );

CREATE POLICY "Users can insert departments for their companies"
  ON "01-budgeting-departments" FOR INSERT
  WITH CHECK (
    EXISTS (
      SELECT 1 FROM "01-budgeting-companies"
      WHERE id = company_id AND created_by = auth.uid()
    )
  );

CREATE POLICY "Users can update departments of their companies"
  ON "01-budgeting-departments" FOR UPDATE
  USING (
    EXISTS (
      SELECT 1 FROM "01-budgeting-companies"
      WHERE id = company_id AND created_by = auth.uid()
    )
  );

CREATE POLICY "Users can delete departments of their companies"
  ON "01-budgeting-departments" FOR DELETE
  USING (
    EXISTS (
      SELECT 1 FROM "01-budgeting-companies"
      WHERE id = company_id AND created_by = auth.uid()
    )
  );

-- Create budget items table with RLS
CREATE TABLE IF NOT EXISTS "01-budgeting-budget_items" (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  company_id UUID NOT NULL REFERENCES "01-budgeting-companies"(id) ON DELETE CASCADE,
  department_id UUID REFERENCES "01-budgeting-departments"(id) ON DELETE SET NULL,
  service_name TEXT NOT NULL,
  billing_frequency TEXT NOT NULL, -- "Monthly", "Yearly", "Per-Use"
  cost_local NUMERIC(12, 2) NOT NULL,
  cost_usd NUMERIC(12, 2),
  currency_symbol TEXT DEFAULT '₦',
  notes TEXT,
  created_by UUID NOT NULL REFERENCES auth.users(id) ON DELETE CASCADE,
  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
  updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

ALTER TABLE "01-budgeting-budget_items" ENABLE ROW LEVEL SECURITY;

CREATE POLICY "Users can view budget items of their companies"
  ON "01-budgeting-budget_items" FOR SELECT
  USING (
    EXISTS (
      SELECT 1 FROM "01-budgeting-companies"
      WHERE id = company_id AND created_by = auth.uid()
    )
  );

CREATE POLICY "Users can insert budget items for their companies"
  ON "01-budgeting-budget_items" FOR INSERT
  WITH CHECK (
    auth.uid() = created_by AND
    EXISTS (
      SELECT 1 FROM "01-budgeting-companies"
      WHERE id = company_id AND created_by = auth.uid()
    )
  );

CREATE POLICY "Users can update budget items of their companies"
  ON "01-budgeting-budget_items" FOR UPDATE
  USING (
    EXISTS (
      SELECT 1 FROM "01-budgeting-companies"
      WHERE id = company_id AND created_by = auth.uid()
    )
  );

CREATE POLICY "Users can delete budget items of their companies"
  ON "01-budgeting-budget_items" FOR DELETE
  USING (
    EXISTS (
      SELECT 1 FROM "01-budgeting-companies"
      WHERE id = company_id AND created_by = auth.uid()
    )
  );

-- Create user profiles table
CREATE TABLE IF NOT EXISTS "01-budgeting-profiles" (
  id UUID PRIMARY KEY REFERENCES auth.users(id) ON DELETE CASCADE,
  email TEXT,
  full_name TEXT,
  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
  updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

ALTER TABLE "01-budgeting-profiles" ENABLE ROW LEVEL SECURITY;

CREATE POLICY "Users can view their own profile"
  ON "01-budgeting-profiles" FOR SELECT
  USING (auth.uid() = id);

CREATE POLICY "Users can insert their own profile"
  ON "01-budgeting-profiles" FOR INSERT
  WITH CHECK (auth.uid() = id);

CREATE POLICY "Users can update their own profile"
  ON "01-budgeting-profiles" FOR UPDATE
  USING (auth.uid() = id);

-- Create trigger to auto-create profile on signup
CREATE OR REPLACE FUNCTION public.handle_new_budgeting_user()
RETURNS TRIGGER
LANGUAGE plpgsql
SECURITY DEFINER
SET search_path = public
AS $$
BEGIN
  INSERT INTO "01-budgeting-profiles" (id, email, full_name)
  VALUES (
    new.id,
    new.email,
    COALESCE(new.raw_user_meta_data->>'full_name', null)
  )
  ON CONFLICT (id) DO NOTHING;
  RETURN new;
END;
$$;

DROP TRIGGER IF EXISTS on_auth_user_created_budgeting ON auth.users;

CREATE TRIGGER on_auth_user_created_budgeting
  AFTER INSERT ON auth.users
  FOR EACH ROW
  EXECUTE FUNCTION public.handle_new_budgeting_user();

-- Create indexes for better performance
CREATE INDEX IF NOT EXISTS idx_budgeting_companies_created_by ON "01-budgeting-companies"(created_by);
CREATE INDEX IF NOT EXISTS idx_budgeting_departments_company_id ON "01-budgeting-departments"(company_id);
CREATE INDEX IF NOT EXISTS idx_budgeting_budget_items_company_id ON "01-budgeting-budget_items"(company_id);
CREATE INDEX IF NOT EXISTS idx_budgeting_budget_items_department_id ON "01-budgeting-budget_items"(department_id);
[V0_FILE]sql:file="scripts/003_create_shared_budgets_table.sql" isMerged="true"
-- Create shared budgets table
CREATE TABLE IF NOT EXISTS "01-budgeting-shared_budgets" (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  company_id UUID NOT NULL REFERENCES "01-budgeting-companies"(id) ON DELETE CASCADE,
  share_token TEXT UNIQUE NOT NULL,
  password_hash TEXT NOT NULL,
  year INTEGER NOT NULL,
  created_by UUID NOT NULL REFERENCES auth.users(id) ON DELETE CASCADE,
  expires_at TIMESTAMP WITH TIME ZONE,
  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
  updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- Enable RLS
ALTER TABLE "01-budgeting-shared_budgets" ENABLE ROW LEVEL SECURITY;

-- Users can view their own shared budgets
CREATE POLICY "Users can view their own shared budgets"
  ON "01-budgeting-shared_budgets" FOR SELECT
  USING (auth.uid() = created_by);

-- Users can create shared budgets for their companies
CREATE POLICY "Users can create shared budgets"
  ON "01-budgeting-shared_budgets" FOR INSERT
  WITH CHECK (
    auth.uid() = created_by AND
    EXISTS (
      SELECT 1 FROM "01-budgeting-companies"
      WHERE id = company_id AND created_by = auth.uid()
    )
  );

-- Users can delete their own shared budgets
CREATE POLICY "Users can delete their own shared budgets"
  ON "01-budgeting-shared_budgets" FOR DELETE
  USING (auth.uid() = created_by);

-- Public can view shared budgets by token
CREATE POLICY "Public can view shared budgets by token"
  ON "01-budgeting-shared_budgets" FOR SELECT
  USING (true);

-- Indexes
CREATE INDEX IF NOT EXISTS idx_shared_budgets_token ON "01-budgeting-shared_budgets"(share_token);
CREATE INDEX IF NOT EXISTS idx_shared_budgets_company ON "01-budgeting-shared_budgets"(company_id);
[V0_FILE]css:file="styles/globals.css" isMerged="true"
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 0 0% 3.9%;
    --foreground: 0 0% 98%;
    --card: 0 0% 3.9%;
    --card-foreground: 0 0% 98%;
    --popover: 0 0% 3.9%;
    --popover-foreground: 0 0% 98%;
    --primary: 20.5 90.2% 48.2%;
    --primary-foreground: 60 9.1% 97.8%;
    --secondary: 12 6.5% 15.1%;
    --secondary-foreground: 60 9.1% 97.8%;
    --muted: 12 6.5% 15.1%;
    --muted-foreground: 24 5.4% 63.9%;
    --accent: 12 6.5% 15.1%;
    --accent-foreground: 60 9.1% 97.8%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 60 9.1% 97.8%;
    --border: 12 6.5% 15.1%;
    --input: 12 6.5% 15.1%;
    --ring: 20.5 90.2% 48.2%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}
[V0_FILE]typescript:file="tailwind.config.ts" isMerged="true"
import type { Config } from 'tailwindcss'

// all in fixtures is set to tailwind v3 as interims solutions

const config: Config = {
  darkMode: ['class'],
  content: [
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
    './app/**/*.{js,ts,jsx,tsx,mdx}',
    '*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {
      colors: {
        background: 'hsl(var(--background))',
        foreground: 'hsl(var(--foreground))',
        card: {
          DEFAULT: 'hsl(var(--card))',
          foreground: 'hsl(var(--card-foreground))',
        },
        popover: {
          DEFAULT: 'hsl(var(--popover))',
          foreground: 'hsl(var(--popover-foreground))',
        },
        primary: {
          DEFAULT: 'hsl(var(--primary))',
          foreground: 'hsl(var(--primary-foreground))',
        },
        secondary: {
          DEFAULT: 'hsl(var(--secondary))',
          foreground: 'hsl(var(--secondary-foreground))',
        },
        muted: {
          DEFAULT: 'hsl(var(--muted))',
          foreground: 'hsl(var(--muted-foreground))',
        },
        accent: {
          DEFAULT: 'hsl(var(--accent))',
          foreground: 'hsl(var(--accent-foreground))',
        },
        destructive: {
          DEFAULT: 'hsl(var(--destructive))',
          foreground: 'hsl(var(--destructive-foreground))',
        },
        border: 'hsl(var(--border))',
        input: 'hsl(var(--input))',
        ring: 'hsl(var(--ring))',
        chart: {
          '1': 'hsl(var(--chart-1))',
          '2': 'hsl(var(--chart-2))',
          '3': 'hsl(var(--chart-3))',
          '4': 'hsl(var(--chart-4))',
          '5': 'hsl(var(--chart-5))',
        },
        sidebar: {
          DEFAULT: 'hsl(var(--sidebar-background))',
          foreground: 'hsl(var(--sidebar-foreground))',
          primary: 'hsl(var(--sidebar-primary))',
          'primary-foreground': 'hsl(var(--sidebar-primary-foreground))',
          accent: 'hsl(var(--sidebar-accent))',
          'accent-foreground': 'hsl(var(--sidebar-accent-foreground))',
          border: 'hsl(var(--sidebar-border))',
          ring: 'hsl(var(--sidebar-ring))',
        },
      },
      borderRadius: {
        lg: 'var(--radius)',
        md: 'calc(var(--radius) - 2px)',
        sm: 'calc(var(--radius) - 4px)',
      },
      keyframes: {
        'accordion-down': {
          from: {
            height: '0',
          },
          to: {
            height: 'var(--radix-accordion-content-height)',
          },
        },
        'accordion-up': {
          from: {
            height: 'var(--radix-accordion-content-height)',
          },
          to: {
            height: '0',
          },
        },
      },
      animation: {
        'accordion-down': 'accordion-down 0.2s ease-out',
        'accordion-up': 'accordion-up 0.2s ease-out',
      },
    },
  },
  plugins: [require('tailwindcss-animate')],
}
export default config
[V0_FILE]json:file="tsconfig.json" isMerged="true"
{
  "compilerOptions": {
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "target": "ES6",
    "skipLibCheck": true,
    "strict": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "plugins": [
      {
        "name": "next"
      }
    ],
    "paths": {
      "@/*": ["./*"]
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
  "exclude": ["node_modules"]
}
[V0_FILE]png:file="public/01labs.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_Q9wWFxYZ0CeZfpHynqJN9tSvusgV/R50HkQjcPS_Dhoa7sW_NCd/public/01labs.png" isMerged="true"
[V0_FILE]png:file="public/logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_Q9wWFxYZ0CeZfpHynqJN9tSvusgV/_Kth1sNC_3bg9QpwcmAqLV/public/logo.png" isMerged="true"
[V0_FILE]png:file="public/placeholder-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_Q9wWFxYZ0CeZfpHynqJN9tSvusgV/1uv3SMJqY6_jxcFCTgTEak/public/placeholder-logo.png" isMerged="true"
[V0_FILE]xml:file="public/placeholder-logo.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_Q9wWFxYZ0CeZfpHynqJN9tSvusgV/XB_XF8ESrwbAjotfOd5Wmb/public/placeholder-logo.svg" isMerged="true"
[V0_FILE]jpg:file="public/placeholder-user.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_Q9wWFxYZ0CeZfpHynqJN9tSvusgV/ONejAluG3EJATcwwA61bXn/public/placeholder-user.jpg" isMerged="true"
[V0_FILE]jpg:file="public/placeholder.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_Q9wWFxYZ0CeZfpHynqJN9tSvusgV/BlrBc_c6JuPtjsBHFMcNJn/public/placeholder.jpg" isMerged="true"
[V0_FILE]xml:file="public/placeholder.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_Q9wWFxYZ0CeZfpHynqJN9tSvusgV/J0QvC3Vjlpi92ZtRdLC4Mx/public/placeholder.svg" isMerged="true"
[V0_FILE]sql:file="scripts/004_create_budget_templates_table.sql" isMerged="true"
-- Create budget templates table with predefined structures
CREATE TABLE IF NOT EXISTS "01-budgeting-templates" (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  name VARCHAR(255) NOT NULL,
  description TEXT,
  category VARCHAR(50),
  template_data JSONB NOT NULL,
  created_at TIMESTAMP DEFAULT NOW(),
  updated_at TIMESTAMP DEFAULT NOW()
);

-- Insert predefined templates
INSERT INTO "01-budgeting-templates" (name, description, category, template_data) VALUES
(
  'Monthly Recurring Costs',
  'Track monthly subscription and recurring service costs with variance analysis',
  'Standard',
  '[
    {"service": "Software Licenses", "frequency": "Monthly", "costLocal": "", "costUSD": "", "notes": ""},
    {"service": "Cloud Services", "frequency": "Monthly", "costLocal": "", "costUSD": "", "notes": ""},
    {"service": "Infrastructure", "frequency": "Monthly", "costLocal": "", "costUSD": "", "notes": ""},
    {"service": "Communications", "frequency": "Monthly", "costLocal": "", "costUSD": "", "notes": ""}
  ]'
),
(
  'IT & Operations',
  'IT infrastructure, hardware, and operations costs',
  'Department',
  '[
    {"service": "Server Maintenance", "frequency": "Monthly", "costLocal": "", "costUSD": "", "notes": ""},
    {"service": "Network Management", "frequency": "Monthly", "costLocal": "", "costUSD": "", "notes": ""},
    {"service": "Hardware Replacement", "frequency": "Yearly", "costLocal": "", "costUSD": "", "notes": ""},
    {"service": "Security & Compliance", "frequency": "Monthly", "costLocal": "", "costUSD": "", "notes": ""},
    {"service": "Support & Maintenance", "frequency": "Monthly", "costLocal": "", "costUSD": "", "notes": ""}
  ]'
),
(
  'Marketing & Advertising',
  'Digital marketing, advertising, and promotional expenses',
  'Department',
  '[
    {"service": "Social Media Ads", "frequency": "Monthly", "costLocal": "", "costUSD": "", "notes": ""},
    {"service": "Search Ads (SEM)", "frequency": "Monthly", "costLocal": "", "costUSD": "", "notes": ""},
    {"service": "Content Creation", "frequency": "Monthly", "costLocal": "", "costUSD": "", "notes": ""},
    {"service": "Analytics Tools", "frequency": "Monthly", "costLocal": "", "costUSD": "", "notes": ""},
    {"service": "Email Marketing Platform", "frequency": "Monthly", "costLocal": "", "costUSD": "", "notes": ""},
    {"service": "SEO & Blog Tools", "frequency": "Monthly", "costLocal": "", "costUSD": "", "notes": ""}
  ]'
),
(
  'Human Resources',
  'HR software, recruitment, and employee management costs',
  'Department',
  '[
    {"service": "HRIS System", "frequency": "Monthly", "costLocal": "", "costUSD": "", "notes": ""},
    {"service": "Recruitment Platform", "frequency": "Monthly", "costLocal": "", "costUSD": "", "notes": ""},
    {"service": "Training & Development", "frequency": "Monthly", "costLocal": "", "costUSD": "", "notes": ""},
    {"service": "Benefits Administration", "frequency": "Yearly", "costLocal": "", "costUSD": "", "notes": ""},
    {"service": "Payroll Processing", "frequency": "Monthly", "costLocal": "", "costUSD": "", "notes": ""}
  ]'
),
(
  'Finance & Accounting',
  'Accounting software, tax services, and financial management tools',
  'Department',
  '[
    {"service": "Accounting Software", "frequency": "Monthly", "costLocal": "", "costUSD": "", "notes": ""},
    {"service": "Invoice Management", "frequency": "Monthly", "costLocal": "", "costUSD": "", "notes": ""},
    {"service": "Tax Consultation", "frequency": "Quarterly", "costLocal": "", "costUSD": "", "notes": ""},
    {"service": "Audit Services", "frequency": "Yearly", "costLocal": "", "costUSD": "", "notes": ""},
    {"service": "Financial Planning Tools", "frequency": "Monthly", "costLocal": "", "costUSD": "", "notes": ""}
  ]'
),
(
  'Quarterly Cost Analysis',
  'Track costs by quarters with projections and actual spending',
  'Analysis',
  '[
    {"service": "Q1 Projection", "frequency": "Quarterly", "costLocal": "", "costUSD": "", "notes": ""},
    {"service": "Q1 Actual", "frequency": "Quarterly", "costLocal": "", "costUSD": "", "notes": ""},
    {"service": "Q2 Projection", "frequency": "Quarterly", "costLocal": "", "costUSD": "", "notes": ""},
    {"service": "Q2 Actual", "frequency": "Quarterly", "costLocal": "", "costUSD": "", "notes": ""},
    {"service": "Q3 Projection", "frequency": "Quarterly", "costLocal": "", "costUSD": "", "notes": ""},
    {"service": "Q3 Actual", "frequency": "Quarterly", "costLocal": "", "costUSD": "", "notes": ""},
    {"service": "Q4 Projection", "frequency": "Quarterly", "costLocal": "", "costUSD": "", "notes": ""},
    {"service": "Q4 Actual", "frequency": "Quarterly", "costLocal": "", "costUSD": "", "notes": ""}
  ]'
);

ALTER TABLE "01-budgeting-templates" ENABLE ROW LEVEL SECURITY;

-- Allow anyone to read public templates
CREATE POLICY "Anyone can read templates" ON "01-budgeting-templates"
  FOR SELECT USING (true);
[V0_FILE]typescriptreact:file="components/budget-template-selector.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from "@/components/ui/dialog"
import { createClient } from "@/lib/supabase/client"
import { toast } from "sonner"
import { useCompany } from "@/lib/contexts/company-context"
import type { BudgetTemplate } from "@/lib/types"

interface BudgetTemplateSelectorProps {
  open: boolean
  onOpenChange: (open: boolean) => void
  year: number
  onSelectTemplate: (template: BudgetTemplate) => void
}

export function BudgetTemplateSelector({ open, onOpenChange, year, onSelectTemplate }: BudgetTemplateSelectorProps) {
  const [templates, setTemplates] = useState<BudgetTemplate[]>([])
  const [isLoading, setIsLoading] = useState(false)
  const { selectedCompany } = useCompany()

useEffect(() => {
    if (open) {
      loadTemplates()
    }
  }, [open])

const loadTemplates = async () => {
    setIsLoading(true)
    try {
      const supabase = createClient()
      const { data, error } = await supabase.from("01-budgeting-templates").select("*").order("category")

if (error) throw error
      setTemplates(data || [])
    } catch (error) {
      console.error("Error loading templates:", error)
      toast.error("Failed to load templates")
    } finally {
      setIsLoading(false)
    }
  }

const handleSelectTemplate = (template: BudgetTemplate) => {
    onSelectTemplate(template)
    onOpenChange(false)
    toast.success(`Template "${template.name}" selected`)
  }

// Group templates by category
  const groupedTemplates = templates.reduce(
    (acc, template) => {
      const category = template.category || "Other"
      if (!acc[category]) {
        acc[category] = []
      }
      acc[category].push(template)
      return acc
    },
    {} as Record<string, BudgetTemplate[]>,
  )

return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-2xl max-h-[80vh] overflow-y-auto">
        <DialogHeader>
          <DialogTitle>Select Budget Template</DialogTitle>
          <DialogDescription>Choose a template to quickly populate your budget for {year}</DialogDescription>
        </DialogHeader>

<div className="space-y-6">
          {Object.entries(groupedTemplates).map(([category, categoryTemplates]) => (
            <div key={category}>
              <h3 className="text-sm font-semibold text-muted-foreground uppercase tracking-wide mb-3">{category}</h3>
              <div className="grid grid-cols-1 gap-3">
                {categoryTemplates.map((template) => (
                  <button
                    key={template.id}
                    onClick={() => handleSelectTemplate(template)}
                    className="text-left p-4 rounded-lg border border-input bg-card hover:bg-accent hover:border-accent transition-colors"
                  >
                    <h4 className="font-medium">{template.name}</h4>
                    <p className="text-sm text-muted-foreground mt-1">{template.description}</p>
                    <div className="mt-3">
                      <span className="inline-block text-xs px-2 py-1 bg-primary/10 text-primary rounded">
                        {Array.isArray(template.template_data) ? template.template_data.length : 0} items
                      </span>
                    </div>
                  </button>
                ))}
              </div>
            </div>
          ))}
        </div>

{isLoading && <div className="text-center py-8 text-muted-foreground">Loading templates...</div>}

{!isLoading && templates.length === 0 && (
          <div className="text-center py-8 text-muted-foreground">No templates available</div>
        )}
      </DialogContent>
    </Dialog>
  )
}
[V0_FILE]typescript:file="lib/types.ts" isEdit="true" isQuickEdit="true" isMerged="true"
export interface Company {
  id: string
  name: string
  logo_url: string | null
  type: string
  created_by: string
  created_at: string
  updated_at: string
}

export interface Department {
  id: string
  company_id: string
  name: string
  description: string | null
  created_at: string
  updated_at: string
}

export interface BudgetItem {
  id: string
  company_id: string
  department_id: string | null
  service_name: string
  billing_frequency: "Monthly" | "Yearly" | "Per-Use"
  cost_local: number
  cost_usd: number | null
  currency_symbol: string
  notes: string | null
  created_by: string
  created_at: string
  updated_at: string
}

export interface Profile {
  id: string
  email: string | null
  full_name: string | null
  created_at: string
  updated_at: string
}

export interface BudgetTemplate {
  id: string
  name: string
  description: string | null
  category: string | null
  template_data: Array<{
    service: string
    frequency: string
    costLocal: string
    costUSD: string
    department?: string
    notes: string
  }>
  created_at: string
  updated_at: string
}
[V0_FILE]typescriptreact:file="components/spreadsheet-dialog.tsx" isEdit="true" isQuickEdit="true"
"use client"

import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { BudgetSpreadsheet } from "./budget-spreadsheet"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { useState } from "react"

interface SpreadsheetDialogProps {
  open: boolean
  onOpenChange: (open: boolean) => void
}

export function SpreadsheetDialog({ open, onOpenChange }: SpreadsheetDialogProps) {
  const currentYear = new Date().getFullYear()
  const [selectedYear, setSelectedYear] = useState(currentYear)

const yearOptions = Array.from({ length: 11 }, (_, i) => currentYear - 5 + i)

return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-[95vw] max-h-[90vh] overflow-hidden flex flex-col">
        <DialogHeader className="flex flex-row items-center justify-between space-y-0 pb-4 pr-8">
          <DialogTitle className="flex-1">Budget Spreadsheet - {selectedYear}</DialogTitle>
          <div className="flex items-center gap-2">
            <span className="text-sm text-muted-foreground">Year:</span>
            <Select value={selectedYear.toString()} onValueChange={(value) => setSelectedYear(Number.parseInt(value))}>
              <SelectTrigger className="w-[120px]">
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                {yearOptions.map((year) => (
                  <SelectItem key={year} value={year.toString()}>
                    {year}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>
        </DialogHeader>
        <div className="flex-1 overflow-auto">
          <BudgetSpreadsheet year={selectedYear} hideTitle />
        </div>
      </DialogContent>
    </Dialog>
  )
}</article></body></html>