[V0_FILE]yaml:file=".github/workflows/manual.yml" # This is a basic workflow that is manually triggered name: Manual workflow # Controls when the action will run. Workflow runs when manually triggered using the UI # or API. on: workflow_dispatch: # Inputs the workflow accepts. inputs: name: # Friendly description to be shown in the UI instead of 'name' description: 'Person to greet' # Default value if no value is explicitly provided default: 'World' # Input has to be provided for the workflow to run required: true # The data type of the input type: string # A workflow run is made up of one or more jobs that can run sequentially or in parallel jobs: # This workflow contains a single job called "greet" greet: # The type of runner that the job will run on runs-on: ubuntu-latest # Steps represent a sequence of tasks that will be executed as part of the job steps: # Runs a single command using the runners shell - name: Send greeting run: echo "Hello ${{ inputs.name }}" [V0_FILE]plaintext:file=".gitignore" # 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" # New Project *Automatically synced with your [v0.dev](https://v0.dev) deployments* [![Deployed on Vercel](https://img.shields.io/badge/Deployed%20on-Vercel-black?style=for-the-badge&logo=vercel)](https://vercel.com/m2-creatives-projects/v0-new-project-neorwrjhbxp) [![Built with v0](https://img.shields.io/badge/Built%20with-v0.dev-black?style=for-the-badge)](https://v0.dev/chat/projects/NeORwrjHBxp) ## Overview This repository will stay in sync with your deployed chats on [v0.dev](https://v0.dev). Any changes you make to your deployed app will be automatically pushed to this repository from [v0.dev](https://v0.dev). ## Deployment Your project is live at: **[https://vercel.com/m2-creatives-projects/v0-new-project-neorwrjhbxp](https://vercel.com/m2-creatives-projects/v0-new-project-neorwrjhbxp)** ## Build your app Continue building your app on: **[https://v0.dev/chat/projects/NeORwrjHBxp](https://v0.dev/chat/projects/NeORwrjHBxp)** ## How It Works 1. Create and modify your project using [v0.dev](https://v0.dev) 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]typescript:file="app/api/auth/verify/route.ts" import { type NextRequest, NextResponse } from "next/server" export async function GET(request: NextRequest) { try { // In production, you would: // 1. Verify JWT token from Authorization header // 2. Check session validity in database // 3. Return user data if valid // For demo purposes, we'll check if there's a valid user in the request const authHeader = request.headers.get("authorization") if (!authHeader) { return NextResponse.json({ error: "No authorization header" }, { status: 401 }) } // Mock token verification (in production, use proper JWT verification) const token = authHeader.replace("Bearer ", "") if (token === "demo-token") { return NextResponse.json({ success: true, user: { id: 1, email: "admin@masscar.com", role: "admin", firstName: "System", lastName: "Administrator", }, }) } return NextResponse.json({ error: "Invalid token" }, { status: 401 }) } catch (error) { console.error("Auth verification error:", error) return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/login/route.ts" import { type NextRequest, NextResponse } from "next/server" import bcrypt from "bcryptjs" // Demo users data (in production, this would come from your database) const demoUsers = [ { id: 1, email: "admin@masscar.com", password: "$2a$10$92IXUNpkjO0rOQ5byMi.Ye4oKoEa3Ro9llC/.og/at2.uheWG/igi", // bcrypt hash of "123456" role: "admin", firstName: "System", lastName: "Administrator", phone: "+252-61-234-5678", isActive: true, createdAt: new Date().toISOString(), }, { id: 2, email: "staff@masscar.com", password: "$2a$10$92IXUNpkjO0rOQ5byMi.Ye4oKoEa3Ro9llC/.og/at2.uheWG/igi", // bcrypt hash of "123456" role: "staff", firstName: "Workshop", lastName: "Staff", phone: "+252-61-234-5679", isActive: true, createdAt: new Date().toISOString(), }, { id: 3, email: "tech@masscar.com", password: "$2a$10$92IXUNpkjO0rOQ5byMi.Ye4oKoEa3Ro9llC/.og/at2.uheWG/igi", // bcrypt hash of "123456" role: "technician", firstName: "Senior", lastName: "Technician", phone: "+252-61-234-5680", isActive: true, createdAt: new Date().toISOString(), }, { id: 4, email: "customer@masscar.com", password: "$2a$10$92IXUNpkjO0rOQ5byMi.Ye4oKoEa3Ro9llC/.og/at2.uheWG/igi", // bcrypt hash of "123456" role: "customer", firstName: "Demo", lastName: "Customer", phone: "+252-61-234-5681", isActive: true, createdAt: new Date().toISOString(), }, ] export async function POST(request: NextRequest) { try { const { email, password } = await request.json() // Validate input if (!email || !password) { return NextResponse.json({ error: "Email and password are required" }, { status: 400 }) } // Find user by email const user = demoUsers.find((u) => u.email.toLowerCase() === email.toLowerCase()) if (!user) { return NextResponse.json({ error: "Invalid credentials" }, { status: 401 }) } // Check if user is active if (!user.isActive) { return NextResponse.json({ error: "Account is deactivated" }, { status: 401 }) } // Verify password const isValidPassword = await bcrypt.compare(password, user.password) if (!isValidPassword) { return NextResponse.json({ error: "Invalid credentials" }, { status: 401 }) } // Create user session data (exclude password) const userData = { id: user.id, email: user.email, role: user.role, firstName: user.firstName, lastName: user.lastName, phone: user.phone, loginTime: new Date().toISOString(), } // In production, you would: // 1. Create a JWT token or session // 2. Store session in database // 3. Set secure HTTP-only cookies return NextResponse.json({ success: true, user: userData, message: "Login successful", }) } catch (error) { console.error("Login error:", error) return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/logout/route.ts" import { type NextRequest, NextResponse } from "next/server" export async function POST(request: NextRequest) { try { // In production, you would: // 1. Invalidate the JWT token // 2. Remove session from database // 3. Clear HTTP-only cookies return NextResponse.json({ success: true, message: "Logout successful", }) } catch (error) { console.error("Logout error:", error) return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/test-connection/route.ts" import { NextResponse } from "next/server" import { supabase } from "@/lib/supabase" export async function GET() { try { // Test basic connection const { data: connectionTest, error: connectionError } = await supabase .from("user_profiles") .select("count", { count: "exact" }) .limit(1) if (connectionError) { return NextResponse.json( { success: false, error: "Database connection failed", details: connectionError.message, }, { status: 500 }, ) } // Test table access const tables = [ "customers", "vehicles", "suppliers", "parts_catalog", "labor_guide", "inspection_templates", "estimates", ] const tableTests = await Promise.allSettled( tables.map(async (table) => { const { data, error } = await supabase.from(table).select("count", { count: "exact" }).limit(1) return { table, success: !error, count: data?.length || 0, error: error?.message, } }), ) const results = tableTests.map((result, index) => ({ table: tables[index], ...(result.status === "fulfilled" ? result.value : { success: false, error: "Test failed" }), })) return NextResponse.json({ success: true, message: "Connection test completed", results, summary: { totalTables: tables.length, successfulTables: results.filter((r) => r.success).length, failedTables: results.filter((r) => !r.success).length, }, }) } catch (error: any) { return NextResponse.json( { success: false, error: "Connection test failed", details: error.message, }, { status: 500 }, ) } } [V0_FILE]css:file="app/globals.css" @tailwind base; @tailwind components; @tailwind utilities; body { font-family: Arial, Helvetica, sans-serif; } @layer utilities { .text-balance { text-wrap: balance; } } @layer base { :root { --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" import type { Metadata } from 'next' import './globals.css' export const metadata: Metadata = { title: 'v0 App', description: 'Created with v0', generator: 'v0.dev', } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]typescriptreact:file="app/page.tsx" import dynamic from "next/dynamic" const MassWorkshopSystem = dynamic(() => import("../mass-workshop-system"), { ssr: false }) export default function Page() { return } [V0_FILE]typescriptreact:file="autoleap-landing.tsx" import { Header } from "./components/header" import { HeroSection } from "./components/hero-section" import { TrustedBySection } from "./components/trusted-by-section" export default function AutoLeapLanding() { return (

) } [V0_FILE]json:file="components.json" { "$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/admin/database-test.tsx" "use client" import { useState } from "react" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Alert, AlertDescription } from "@/components/ui/alert" import { CheckCircle, XCircle, AlertTriangle, Database, Loader2 } from "lucide-react" import { supabase } from "@/lib/supabase" interface TestResult { name: string status: "success" | "warning" | "error" message: string details?: string } export function DatabaseTest() { const [testing, setTesting] = useState(false) const [results, setResults] = useState([]) const runTests = async () => { setTesting(true) const testResults: TestResult[] = [] // Test 1: Basic Connection try { const { data, error } = await supabase.from("user_profiles").select("count", { count: "exact", head: true }) if (error) throw error testResults.push({ name: "Database Connection", status: "success", message: "Connected successfully to Supabase", details: `Connection established to ${supabase.supabaseUrl}`, }) } catch (error) { testResults.push({ name: "Database Connection", status: "error", message: "Failed to connect to database", details: error instanceof Error ? error.message : "Unknown error", }) } // Test 2: Authentication Status try { const { data: { user }, } = await supabase.auth.getUser() if (user) { testResults.push({ name: "Authentication", status: "success", message: `User authenticated: ${user.email}`, details: `User ID: ${user.id}`, }) } else { testResults.push({ name: "Authentication", status: "warning", message: "No user currently authenticated", details: "This is normal if not logged in", }) } } catch (error) { testResults.push({ name: "Authentication", status: "error", message: "Authentication check failed", details: error instanceof Error ? error.message : "Unknown error", }) } // Test 3: User Profiles Table try { const { data, error } = await supabase.from("user_profiles").select("*").limit(1) if (error) throw error testResults.push({ name: "User Profiles Table", status: "success", message: `User profiles accessible`, details: `Found ${data?.length || 0} profiles`, }) } catch (error) { testResults.push({ name: "User Profiles Table", status: "error", message: "Cannot access user profiles table", details: error instanceof Error ? error.message : "Unknown error", }) } // Test 4: Customers Table try { const { data, error } = await supabase.from("customers").select("*", { count: "exact", head: true }) if (error) throw error testResults.push({ name: "Customers Table", status: "success", message: `Customers table accessible`, details: `Table exists and is queryable`, }) } catch (error) { testResults.push({ name: "Customers Table", status: "warning", message: "Customers table not accessible", details: "Table may not exist yet - run database setup scripts", }) } // Test 5: Suppliers Table try { const { data, error } = await supabase.from("suppliers").select("*", { count: "exact", head: true }) if (error) throw error testResults.push({ name: "Suppliers Table", status: "success", message: `Suppliers table accessible`, details: `Table exists and is queryable`, }) } catch (error) { testResults.push({ name: "Suppliers Table", status: "warning", message: "Suppliers table not accessible", details: "Table may not exist yet - run database setup scripts", }) } // Test 6: Parts Catalog try { const { data, error } = await supabase.from("parts_catalog").select("*", { count: "exact", head: true }) if (error) throw error testResults.push({ name: "Parts Catalog", status: "success", message: `Parts catalog accessible`, details: `Table exists and is queryable`, }) } catch (error) { testResults.push({ name: "Parts Catalog", status: "warning", message: "Parts catalog not accessible", details: "Table may not exist yet - run database setup scripts", }) } setResults(testResults) setTesting(false) } const getStatusIcon = (status: TestResult["status"]) => { switch (status) { case "success": return case "warning": return case "error": return } } const getStatusBadge = (status: TestResult["status"]) => { const variants = { success: "default" as const, warning: "secondary" as const, error: "destructive" as const, } return {status.toUpperCase()} } const successCount = results.filter((r) => r.status === "success").length const warningCount = results.filter((r) => r.status === "warning").length const errorCount = results.filter((r) => r.status === "error").length return (

Database Connection Test

Verify Supabase connection and database setup

{results.length > 0 && (

Successful

{successCount}

Warnings

{warningCount}

Errors

{errorCount}

)} {results.length > 0 && ( Test Results Detailed results of database connection tests {results.map((result, index) => (

{getStatusIcon(result.status)}

{result.name}

{getStatusBadge(result.status)}

{result.message}

{result.details && (

{result.details}

)}

))} )} {results.length === 0 && ( Click "Run Connection Tests" to verify your Supabase database connection and setup. )}

) } export default DatabaseTest [V0_FILE]typescriptreact:file="components/ai-tools/ai-tools.tsx" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Input } from "@/components/ui/input" import { Zap, BarChart3, FileText, Eye, Settings, MessageSquare, Wrench, Brain, Plus } from "lucide-react" export function AITools() { const aiTools = [ { id: 1, name: "Chatbase Customer Bot", description: "AI chatbot for customer inquiries and appointment booking", category: "Customer Service", status: "Ready to Setup", icon: MessageSquare, color: "bg-blue-500", features: ["24/7 Customer Support", "Appointment Booking", "FAQ Handling"], }, { id: 2, name: "Zapier Automation", description: "Automated appointment reminders and follow-ups", category: "Workflow", status: "Configure", icon: Zap, color: "bg-orange-500", features: ["SMS Reminders", "Email Follow-ups", "Calendar Sync"], }, { id: 3, name: "Google Looker Studio", description: "Professional KPI dashboards and reports", category: "Analytics", status: "Available", icon: BarChart3, color: "bg-green-500", features: ["Real-time Dashboards", "Custom Reports", "Performance Analytics"], }, { id: 4, name: "Documint Reports", description: "Automated invoice and service report generation", category: "Documents", status: "Ready", icon: FileText, color: "bg-purple-500", features: ["Auto Invoice Generation", "Service Reports", "Document Templates"], }, { id: 5, name: "Obviously AI", description: "Predictive maintenance and inventory forecasting", category: "Predictive", status: "Setup Required", icon: Brain, color: "bg-teal-500", features: ["Failure Prediction", "Inventory Forecasting", "Maintenance Scheduling"], }, { id: 6, name: "Parseur OCR", description: "Scan and digitize repair orders and invoices", category: "Document Processing", status: "Ready", icon: Eye, color: "bg-indigo-500", features: ["Document Scanning", "Data Extraction", "Digital Archive"], }, ] const getStatusColor = (status: string) => { switch (status) { case "Ready": return "bg-green-100 text-green-800" case "Available": return "bg-blue-100 text-blue-800" case "Configure": return "bg-orange-100 text-orange-800" case "Setup Required": return "bg-red-100 text-red-800" case "Ready to Setup": return "bg-yellow-100 text-yellow-800" default: return "bg-gray-100 text-gray-800" } } const integrationSteps = [ { step: 1, title: "Set up Chatbase for customer service", description: "Create AI chatbot for appointment booking and FAQ", completed: false, }, { step: 2, title: "Configure Zapier automation", description: "Automate appointment reminders and follow-ups", completed: false, }, { step: 3, title: "Connect Google Looker Studio", description: "Build professional KPI dashboards", completed: false, }, { step: 4, title: "Implement predictive analytics", description: "Enable AI-powered maintenance predictions", completed: false, }, ] return (

{/* Header */}

LOVABLE AI Tools

Enhance your workshop with AI-powered automation and insights

{/* Quick Setup Banner */}

🚀 Quick Setup: Zapier Automation

Connect your Zapier webhook to automate appointment reminders, customer follow-ups, and service notifications.

{/* AI Tools Grid */}

{aiTools.map((tool) => { const Icon = tool.icon return (

{tool.name}

{tool.category}

{tool.status}

{tool.description}

{tool.features.map((feature, index) => (

{feature}

))}

) })}

{/* Integration Roadmap */} Integration Roadmap

{integrationSteps.map((item) => (

{item.step}

{item.title}

{item.description}

))}

) } [V0_FILE]typescriptreact:file="components/appointments/appointments.tsx" "use client" import { useState } from "react" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Calendar, Clock, User, Car, Plus, RefreshCw, CheckCircle, X } from "lucide-react" export function Appointments() { // 🆕 initialize selectedDate with today's date in ISO-format (yyyy-mm-dd) const today = new Date() const defaultDate = today.toISOString().split("T")[0] // "2025-06-22" const [selectedDate, setSelectedDate] = useState(defaultDate) const appointments = [ { id: 1, time: "09:00", customer: "Ahmed Hassan", vehicle: "Toyota Corolla", service: "Oil Change", status: "Confirmed", technician: "Ali Mohamed", duration: "1 hour", }, { id: 2, time: "10:30", customer: "Fatima Ali", vehicle: "Honda Civic", service: "Brake Inspection", status: "Confirmed", technician: "Hassan Omar", duration: "2 hours", }, { id: 3, time: "13:00", customer: "Mohamed Yusuf", vehicle: "Nissan Altima", service: "General Maintenance", status: "Pending", technician: "Amina Yusuf", duration: "3 hours", }, { id: 4, time: "15:30", customer: "Sahra Ahmed", vehicle: "Hyundai Elantra", service: "Engine Diagnostic", status: "Confirmed", technician: "Omar Ahmed", duration: "2 hours", }, ] const getStatusColor = (status: string) => { switch (status) { case "Confirmed": return "bg-green-100 text-green-800" case "Pending": return "bg-yellow-100 text-yellow-800" case "Cancelled": return "bg-red-100 text-red-800" default: return "bg-gray-100 text-gray-800" } } return (

{/* Header */}

Appointments

Manage customer appointments and scheduling

{/* Date Selection and Quick Stats */}

Select Date

setSelectedDate(e.target.value)} // 🔄 update state className="border rounded px-2 py-1 text-sm" />

Today's Appointments

Confirmed

Pending

{/* Appointments List */} Today's Schedule - {selectedDate}

{appointments.map((appointment) => (

{appointment.time}

{appointment.status}

{appointment.customer}

{appointment.vehicle}

{appointment.service}

Technician: {appointment.technician}

Duration: {appointment.duration}

))}

{/* Available Time Slots */} Available Time Slots

{["08:00", "08:30", "11:00", "11:30", "14:00", "14:30", "16:00", "16:30", "17:00", "17:30"].map((time) => ( ))}

) } [V0_FILE]typescriptreact:file="components/auth/auth-provider.tsx" "use client" import { createContext, useContext, useState, useEffect, type ReactNode } from "react" interface User { id: number email: string role: "admin" | "staff" | "technician" | "customer" firstName: string lastName: string phone?: string loginTime?: string } interface AuthContextType { user: User | null login: (email: string, password: string) => Promise logout: () => Promise isLoading: boolean hasPermission: (module: string, action: string) => boolean } const AuthContext = createContext(undefined) // Role permissions mapping const rolePermissions: Record>> = { admin: { dashboard: { read: true, write: true, delete: true, manage: true }, customers: { read: true, write: true, delete: true, manage: true }, vehicles: { read: true, write: true, delete: true, manage: true }, appointments: { read: true, write: true, delete: true, manage: true }, technicians: { read: true, write: true, delete: true, manage: true }, suppliers: { read: true, write: true, delete: true, manage: true }, inspections: { read: true, write: true, delete: true, manage: true }, estimates: { read: true, write: true, delete: true, manage: true }, inventory: { read: true, write: true, delete: true, manage: true }, reports: { read: true, write: true, delete: false, manage: true }, "ai-tools": { read: true, write: true, delete: false, manage: true }, }, staff: { dashboard: { read: true, write: false, delete: false, manage: false }, customers: { read: true, write: true, delete: false, manage: false }, vehicles: { read: true, write: true, delete: false, manage: false }, appointments: { read: true, write: true, delete: false, manage: true }, technicians: { read: true, write: false, delete: false, manage: false }, suppliers: { read: true, write: true, delete: false, manage: false }, inspections: { read: true, write: true, delete: false, manage: false }, estimates: { read: true, write: true, delete: false, manage: true }, inventory: { read: true, write: true, delete: false, manage: false }, reports: { read: true, write: false, delete: false, manage: false }, "ai-tools": { read: true, write: true, delete: false, manage: false }, }, technician: { dashboard: { read: true, write: false, delete: false, manage: false }, customers: { read: true, write: false, delete: false, manage: false }, vehicles: { read: true, write: true, delete: false, manage: false }, appointments: { read: true, write: true, delete: false, manage: false }, technicians: { read: true, write: false, delete: false, manage: false }, suppliers: { read: true, write: false, delete: false, manage: false }, inspections: { read: true, write: true, delete: false, manage: true }, estimates: { read: true, write: true, delete: false, manage: false }, inventory: { read: true, write: false, delete: false, manage: false }, reports: { read: true, write: false, delete: false, manage: false }, "ai-tools": { read: true, write: true, delete: false, manage: false }, }, customer: { dashboard: { read: true, write: false, delete: false, manage: false }, vehicles: { read: true, write: false, delete: false, manage: false }, appointments: { read: true, write: true, delete: false, manage: false }, inspections: { read: true, write: false, delete: false, manage: false }, estimates: { read: true, write: false, delete: false, manage: false }, }, } export function AuthProvider({ children }: { children: ReactNode }) { const [user, setUser] = useState(null) const [isLoading, setIsLoading] = useState(true) useEffect(() => { // Check for existing session const savedUser = localStorage.getItem("mass_user") if (savedUser) { try { const userData = JSON.parse(savedUser) setUser(userData) } catch (error) { console.error("Error parsing saved user data:", error) localStorage.removeItem("mass_user") } } setIsLoading(false) }, []) const login = async (email: string, password: string): Promise => { setIsLoading(true) try { const response = await fetch("/api/login", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ email, password }), }) if (!response.ok) { const errorData = await response.json() console.error("Login failed:", errorData.error) setIsLoading(false) return false } const { user: userData } = await response.json() // Store user data in local storage localStorage.setItem("mass_user", JSON.stringify(userData)) // Update application state setUser(userData) setIsLoading(false) return true } catch (error) { console.error("Login error:", error) setIsLoading(false) return false } } const logout = async (): Promise => { try { // Call logout API await fetch("/api/logout", { method: "POST", headers: { "Content-Type": "application/json", }, }) } catch (error) { console.error("Logout API error:", error) } finally { // Clear local state regardless of API call success setUser(null) localStorage.removeItem("mass_user") } } const hasPermission = (module: string, action: string): boolean => { if (!user) return false const userPermissions = rolePermissions[user.role] if (!userPermissions) return false const modulePermissions = userPermissions[module] if (!modulePermissions) return false return modulePermissions[action] || false } return ( {children} ) } export function useAuth() { const context = useContext(AuthContext) if (context === undefined) { throw new Error("useAuth must be used within an AuthProvider") } return context } [V0_FILE]typescriptreact:file="components/auth/login-form.tsx" "use client" import type React from "react" import { useState } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Alert, AlertDescription } from "@/components/ui/alert" import { Eye, EyeOff, Car, AlertCircle } from "lucide-react" interface LoginFormProps { onLogin: (email: string, password: string) => Promise isLoading?: boolean error?: string } export function LoginForm({ onLogin, isLoading = false, error }: LoginFormProps) { const [email, setEmail] = useState("") const [password, setPassword] = useState("") const [showPassword, setShowPassword] = useState(false) const [selectedDemo, setSelectedDemo] = useState(null) const demoUsers = [ { role: "Admin", email: "admin@masscar.com", password: "123456", color: "bg-red-500" }, { role: "Staff", email: "staff@masscar.com", password: "123456", color: "bg-blue-500" }, { role: "Tech", email: "tech@masscar.com", password: "123456", color: "bg-green-500" }, { role: "Customer", email: "customer@masscar.com", password: "123456", color: "bg-purple-500" }, ] const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() if (!email || !password) return await onLogin(email, password) } const handleDemoLogin = (demoUser: (typeof demoUsers)[0]) => { setSelectedDemo(demoUser.role) setEmail(demoUser.email) setPassword(demoUser.password) onLogin(demoUser.email, demoUser.password) } return (

{/* Logo and Header */}

MASS Car Workshop

Vehicle Workshop Management System

{/* Login Form */} Sign In Enter your credentials to access the system {error && ( {error} )}

Email setEmail(e.target.value)} className="bg-slate-700 border-slate-600 text-white placeholder:text-slate-400" required />

Password

setPassword(e.target.value)} className="bg-slate-700 border-slate-600 text-white placeholder:text-slate-400 pr-10" required />

{/* Demo Users Section */}

Demo Users (Free)

{demoUsers.map((user) => ( ))}

Click any role to login instantly

{/* Footer */}

Hargeisa, Somaliland • v2.1.0

) } [V0_FILE]typescriptreact:file="components/auth/supabase-auth-provider.tsx" "use client" import { createContext, useContext, useState, useEffect, type ReactNode } from "react" import { supabase, type UserProfile } from "@/lib/supabase" import type { User as SupabaseUser } from "@supabase/supabase-js" interface AuthUser { id: string email: string role: "admin" | "staff" | "technician" | "customer" firstName: string lastName: string phone?: string isActive: boolean } interface AuthContextType { user: AuthUser | null supabaseUser: SupabaseUser | null login: (email: string, password: string) => Promise<{ success: boolean; error?: string }> logout: () => Promise register: ( email: string, password: string, userData: Partial, ) => Promise<{ success: boolean; error?: string }> isLoading: boolean hasPermission: (module: string, action: string) => boolean } const AuthContext = createContext(undefined) // Role permissions mapping const rolePermissions: Record>> = { admin: { dashboard: { read: true, write: true, delete: true, manage: true }, customers: { read: true, write: true, delete: true, manage: true }, vehicles: { read: true, write: true, delete: true, manage: true }, appointments: { read: true, write: true, delete: true, manage: true }, technicians: { read: true, write: true, delete: true, manage: true }, suppliers: { read: true, write: true, delete: true, manage: true }, inspections: { read: true, write: true, delete: true, manage: true }, estimates: { read: true, write: true, delete: true, manage: true }, inventory: { read: true, write: true, delete: true, manage: true }, reports: { read: true, write: true, delete: false, manage: true }, "ai-tools": { read: true, write: true, delete: false, manage: true }, }, staff: { dashboard: { read: true, write: false, delete: false, manage: false }, customers: { read: true, write: true, delete: false, manage: false }, vehicles: { read: true, write: true, delete: false, manage: false }, appointments: { read: true, write: true, delete: false, manage: true }, technicians: { read: true, write: false, delete: false, manage: false }, suppliers: { read: true, write: true, delete: false, manage: false }, inspections: { read: true, write: true, delete: false, manage: false }, estimates: { read: true, write: true, delete: false, manage: true }, inventory: { read: true, write: true, delete: false, manage: false }, reports: { read: true, write: false, delete: false, manage: false }, "ai-tools": { read: true, write: true, delete: false, manage: false }, }, technician: { dashboard: { read: true, write: false, delete: false, manage: false }, customers: { read: true, write: false, delete: false, manage: false }, vehicles: { read: true, write: true, delete: false, manage: false }, appointments: { read: true, write: true, delete: false, manage: false }, technicians: { read: true, write: false, delete: false, manage: false }, suppliers: { read: true, write: false, delete: false, manage: false }, inspections: { read: true, write: true, delete: false, manage: true }, estimates: { read: true, write: true, delete: false, manage: false }, inventory: { read: true, write: false, delete: false, manage: false }, reports: { read: true, write: false, delete: false, manage: false }, "ai-tools": { read: true, write: true, delete: false, manage: false }, }, customer: { dashboard: { read: true, write: false, delete: false, manage: false }, vehicles: { read: true, write: false, delete: false, manage: false }, appointments: { read: true, write: true, delete: false, manage: false }, inspections: { read: true, write: false, delete: false, manage: false }, estimates: { read: true, write: false, delete: false, manage: false }, }, } export function SupabaseAuthProvider({ children }: { children: ReactNode }) { const [user, setUser] = useState(null) const [supabaseUser, setSupabaseUser] = useState(null) const [isLoading, setIsLoading] = useState(true) useEffect(() => { // Get initial session const getInitialSession = async () => { const { data: { session }, } = await supabase.auth.getSession() if (session?.user) { await loadUserProfile(session.user) } setIsLoading(false) } getInitialSession() // Listen for auth changes const { data: { subscription }, } = supabase.auth.onAuthStateChange(async (event, session) => { if (session?.user) { await loadUserProfile(session.user) } else { setUser(null) setSupabaseUser(null) } setIsLoading(false) }) return () => subscription.unsubscribe() }, []) const loadUserProfile = async (supabaseUser: SupabaseUser) => { try { const { data: profile, error } = await supabase .from("user_profiles") .select("*") .eq("user_id", supabaseUser.id) .single() if (error) { console.error("Error loading user profile:", error) return } if (profile) { const authUser: AuthUser = { id: profile.user_id, email: supabaseUser.email!, role: profile.role, firstName: profile.first_name, lastName: profile.last_name, phone: profile.phone, isActive: profile.is_active, } setUser(authUser) setSupabaseUser(supabaseUser) } } catch (error) { console.error("Error in loadUserProfile:", error) } } const login = async (email: string, password: string): Promise<{ success: boolean; error?: string }> => { try { setIsLoading(true) const { data, error } = await supabase.auth.signInWithPassword({ email, password, }) if (error) { return { success: false, error: error.message } } if (data.user) { await loadUserProfile(data.user) } return { success: true } } catch (error) { return { success: false, error: "An unexpected error occurred" } } finally { setIsLoading(false) } } const register = async ( email: string, password: string, userData: Partial, ): Promise<{ success: boolean; error?: string }> => { try { setIsLoading(true) const { data, error } = await supabase.auth.signUp({ email, password, options: { data: { first_name: userData.first_name, last_name: userData.last_name, role: userData.role || "customer", phone: userData.phone, }, }, }) if (error) { return { success: false, error: error.message } } return { success: true } } catch (error) { return { success: false, error: "An unexpected error occurred" } } finally { setIsLoading(false) } } const logout = async (): Promise => { try { await supabase.auth.signOut() setUser(null) setSupabaseUser(null) } catch (error) { console.error("Error during logout:", error) } } const hasPermission = (module: string, action: string): boolean => { if (!user) return false const userPermissions = rolePermissions[user.role] if (!userPermissions) return false const modulePermissions = userPermissions[module] if (!modulePermissions) return false return modulePermissions[action] || false } return ( {children} ) } export function useSupabaseAuth() { const context = useContext(AuthContext) if (context === undefined) { throw new Error("useSupabaseAuth must be used within a SupabaseAuthProvider") } return context } [V0_FILE]typescriptreact:file="components/auth/supabase-login-form.tsx" "use client" import type React from "react" import { useState } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Alert, AlertDescription } from "@/components/ui/alert" import { Badge } from "@/components/ui/badge" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Eye, EyeOff, Car, AlertCircle, Shield, Users, Wrench, User } from "lucide-react" import { useSupabaseAuth } from "./supabase-auth-provider" const demoUsers = [ { role: "Admin", email: "admin@masscar.com", password: "123456", icon: Shield, color: "bg-red-500 hover:bg-red-600", description: "Full system access - All modules, user management, reports", permissions: ["All Modules", "User Management", "System Settings", "Advanced Reports"], }, { role: "Staff", email: "staff@masscar.com", password: "123456", icon: Users, color: "bg-blue-500 hover:bg-blue-600", description: "Operational access - Customer management, appointments, estimates", permissions: ["Customer Management", "Appointments", "Estimates", "Basic Reports"], }, { role: "Technician", email: "tech@masscar.com", password: "123456", icon: Wrench, color: "bg-green-500 hover:bg-green-600", description: "Technical focus - Inspections, diagnostics, work orders", permissions: ["Vehicle Inspections", "Diagnostics", "Work Orders", "Parts Lookup"], }, { role: "Customer", email: "customer@masscar.com", password: "123456", icon: User, color: "bg-purple-500 hover:bg-purple-600", description: "Self-service portal - View own vehicles, appointments, estimates", permissions: ["Own Vehicles", "Own Appointments", "View Estimates", "Service History"], }, ] export function SupabaseLoginForm() { const [email, setEmail] = useState("") const [password, setPassword] = useState("") const [showPassword, setShowPassword] = useState(false) const [selectedDemo, setSelectedDemo] = useState(null) const [isLoading, setIsLoading] = useState(false) const [error, setError] = useState(null) const { login } = useSupabaseAuth() const handleLogin = async (e: React.FormEvent) => { e.preventDefault() if (!email || !password) return setIsLoading(true) setError(null) const result = await login(email, password) if (!result.success) { setError(result.error || "Login failed") } setIsLoading(false) } const handleDemoLogin = async (demoUser: (typeof demoUsers)[0]) => { setSelectedDemo(demoUser.role) setEmail(demoUser.email) setPassword(demoUser.password) setIsLoading(true) setError(null) const result = await login(demoUser.email, demoUser.password) if (!result.success) { setError(result.error || "Demo login failed") } setIsLoading(false) } return (

{/* Header */}

MASS Car Workshop

Vehicle Workshop Management System

Hargeisa, Somaliland • AutoLeap Alternative

Demo Login (Quick Test) Manual Login {/* Demo Login Tab */} Test Different User Roles Click any role below to instantly login and explore the system {error && ( {error} )}

{demoUsers.map((user) => { const Icon = user.icon const isSelected = selectedDemo === user.role return ( handleDemoLogin(user)} >

{user.role}

{user.email}

{user.description}

Access Includes:

{user.permissions.slice(0, 2).map((permission) => ( {permission} ))} {user.permissions.length > 2 && ( +{user.permissions.length - 2} more )}

) })}

{isLoading && (

Logging in as {selectedDemo}...

)} {/* Manual Login Tab */} Manual Login Enter credentials manually for testing {error && ( {error} )}

Email setEmail(e.target.value)} className="bg-slate-700 border-slate-600 text-white placeholder:text-slate-400" required />

Password

setPassword(e.target.value)} className="bg-slate-700 border-slate-600 text-white placeholder:text-slate-400 pr-10" required />

{/* Quick Fill Buttons */}

Quick Fill:

{demoUsers.slice(0, 4).map((user) => ( ))}

{/* Footer */}

🚀 Complete AutoLeap Alternative • Built for Somaliland Workshops

All demo accounts use password: 123456

) } [V0_FILE]typescriptreact:file="components/connection-status.tsx" "use client" import { useEffect, useState } from "react" import { supabase } from "@/lib/supabase" import { Alert, AlertDescription } from "@/components/ui/alert" import { CheckCircle, XCircle, Loader2 } from "lucide-react" export function ConnectionStatus() { const [status, setStatus] = useState<"checking" | "connected" | "error">("checking") const [error, setError] = useState(null) useEffect(() => { const checkConnection = async () => { try { // Simple connection test const { data, error } = await supabase.from("user_profiles").select("count", { count: "exact", head: true }) if (error) { throw error } setStatus("connected") } catch (err) { setStatus("error") setError(err instanceof Error ? err.message : "Connection failed") } } checkConnection() }, []) if (status === "checking") { return ( Connecting to Supabase... ) } if (status === "error") { return ( Database connection failed: {error} ) } return ( ✅ Successfully connected to Supabase database ) } [V0_FILE]typescriptreact:file="components/customers/customers.tsx" "use client" import { useState } from "react" import { Card, CardContent } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Badge } from "@/components/ui/badge" import { User, Phone, Mail, Car, Calendar, Search, Plus, Eye, Edit } from "lucide-react" export function Customers() { const [searchTerm, setSearchTerm] = useState("") const customers = [ { id: 1, name: "Ahmed Hassan", phone: "+252-61-123-4567", email: "ahmed@email.com", vehicles: 2, lastService: "2024-01-15", totalSpent: "$2,450", status: "Active", loyaltyPoints: 1250, }, { id: 2, name: "Fatima Ali", phone: "+252-61-234-5678", email: "fatima@email.com", vehicles: 1, lastService: "2024-01-20", totalSpent: "$890", status: "Active", loyaltyPoints: 445, }, { id: 3, name: "Mohamed Yusuf", phone: "+252-61-345-6789", email: "mohamed@email.com", vehicles: 3, lastService: "2024-01-10", totalSpent: "$3,200", status: "VIP", loyaltyPoints: 1600, }, { id: 4, name: "Sahra Ahmed", phone: "+252-61-456-7890", email: "sahra@email.com", vehicles: 1, lastService: "2024-01-25", totalSpent: "$650", status: "New", loyaltyPoints: 325, }, ] const filteredCustomers = customers.filter( (customer) => customer.name.toLowerCase().includes(searchTerm.toLowerCase()) || customer.phone.includes(searchTerm) || customer.email.toLowerCase().includes(searchTerm.toLowerCase()), ) return (

{/* Header */}

Customers

Manage customer profiles and information

{/* Search and Filters */}

setSearchTerm(e.target.value)} className="pl-10" />

{/* Customer Stats */}

124

Total Customers

VIP Customers

$2,850

Avg. Customer Value

92%

Retention Rate

{/* Customer List */}

{filteredCustomers.map((customer) => (

{customer.name}

{customer.phone}

{customer.email}

{customer.vehicles} vehicle(s)

Last service: {customer.lastService}

{customer.totalSpent}

{customer.loyaltyPoints} points

{customer.status}

))}

) } [V0_FILE]typescriptreact:file="components/dashboard/dashboard.tsx" "use client" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Users, Car, Package, UserPlus, Wrench, ChevronLeft, ChevronRight, X, Minimize2, Plus, ExternalLink, } from "lucide-react" import { useState } from "react" export function Dashboard() { const [showSetupWizard, setShowSetupWizard] = useState(true) const [currentDate, setCurrentDate] = useState(new Date(2025, 5, 1)) // June 2025 const [calendarView, setCalendarView] = useState<"Month" | "Week" | "Day">("Month") const stats = [ { title: "EMPLOYEES", value: "1", icon: Users, color: "text-teal-600", bgColor: "bg-teal-100" }, { title: "CUSTOMERS", value: "1", icon: Users, color: "text-orange-600", bgColor: "bg-orange-100" }, { title: "SUPPLIERS", value: "1", icon: UserPlus, color: "text-pink-600", bgColor: "bg-pink-100" }, { title: "PRODUCTS", value: "1", icon: Package, color: "text-purple-600", bgColor: "bg-purple-100" }, { title: "VEHICLE SELL", value: "0", icon: Car, color: "text-blue-600", bgColor: "bg-blue-100" }, { title: "SERVICES", value: "2", icon: Wrench, color: "text-indigo-600", bgColor: "bg-indigo-100" }, ] const recentCustomer = { name: "Washingtone Ochieng", email: "Samuel@gmail.com", avatar: "WO", } // Generate calendar days for June 2025 const generateCalendarDays = () => { const year = currentDate.getFullYear() const month = currentDate.getMonth() const firstDay = new Date(year, month, 1) const lastDay = new Date(year, month + 1, 0) const startDate = new Date(firstDay) startDate.setDate(startDate.getDate() - firstDay.getDay()) const days = [] const currentDateObj = new Date(startDate) for (let i = 0; i < 42; i++) { days.push(new Date(currentDateObj)) currentDateObj.setDate(currentDateObj.getDate() + 1) } return days } const calendarDays = generateCalendarDays() const monthNames = [ "JANUARY", "FEBRUARY", "MARCH", "APRIL", "MAY", "JUNE", "JULY", "AUGUST", "SEPTEMBER", "OCTOBER", "NOVEMBER", "DECEMBER", ] const dayNames = ["SUN", "MON", "TUE", "WED", "THU", "FRI", "SAT"] const navigateMonth = (direction: "prev" | "next") => { const newDate = new Date(currentDate) if (direction === "prev") { newDate.setMonth(newDate.getMonth() - 1) } else { newDate.setMonth(newDate.getMonth() + 1) } setCurrentDate(newDate) } return (

{/* Header */}

Dashboard : Admin

{/* Setup Wizard */} {showSetupWizard && (

Setup Wizard

)} {/* Stats Grid */}

{stats.map((stat, index) => { const Icon = stat.icon return (

{stat.value}

{stat.title}

) })}

{/* Main Content Grid */}

{/* Services Chart */} Services

2 Total Services

Free Services

Paid Services

{/* Recently Joined Customer */} Recently Joined Customer

{recentCustomer.avatar}

{recentCustomer.name}

{recentCustomer.email}

{/* Calendar and Service Details */}

{/* Calendar */}

Calendar

● Open ● Completed

Today {monthNames[currentDate.getMonth()]} {currentDate.getFullYear()}

{["Month", "Week", "Day"].map((view) => ( ))}

{dayNames.map((day) => (

{day}

))}

{calendarDays.map((day, index) => { const isCurrentMonth = day.getMonth() === currentDate.getMonth() const isToday = day.toDateString() === new Date().toDateString() const hasEvent = day.getDate() === 21 && isCurrentMonth // Sample event on 21st return (

{day.getDate()}

) })}

{/* Service Details */}

{/* Upcoming Service Details */} Upcoming Service Details {/* Paid Service Details */} Paid Service Details

Apr

J000001

2024-04-03

Nandan kumar

) } [V0_FILE]typescriptreact:file="components/estimates/create-estimate.tsx" const CreateEstimate = () => { return (

Create Estimate

{/* Add your form and logic here */}

) } export default CreateEstimate [V0_FILE]typescriptreact:file="components/estimates/estimate-viewer.tsx" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Separator } from "@/components/ui/separator" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { CheckCircle, XCircle, Printer, Download, ArrowLeft, Clock } from "lucide-react" // Types interface EstimateViewerProps { estimateId?: string onBack?: () => void } interface EstimateItem { id: string type: "part" | "labor" | "service" description: string quantity: number unitPrice: number totalPrice: number approved: boolean } interface EstimateData { id: string number: string customerName: string vehicleInfo: string date: string expiryDate: string status: "draft" | "sent" | "viewed" | "approved" | "declined" | "expired" subtotal: number tax: number total: number items: EstimateItem[] notes?: string } // Mock data const mockEstimate: EstimateData = { id: "est-001", number: "EST-2023-001", customerName: "Ahmed Hassan", vehicleInfo: "2018 Toyota Camry • Black • SOM-1234", date: "2023-06-15", expiryDate: "2023-06-30", status: "sent", subtotal: 285.0, tax: 14.25, total: 299.25, items: [ { id: "item-1", type: "service", description: "Oil Change Service", quantity: 1, unitPrice: 45.0, totalPrice: 45.0, approved: false, }, { id: "item-2", type: "part", description: "Oil Filter", quantity: 1, unitPrice: 15.0, totalPrice: 15.0, approved: false, }, { id: "item-3", type: "labor", description: "Brake Inspection", quantity: 1, unitPrice: 75.0, totalPrice: 75.0, approved: false, }, { id: "item-4", type: "part", description: "Front Brake Pads", quantity: 1, unitPrice: 150.0, totalPrice: 150.0, approved: false, }, ], notes: "Customer requested to be notified before any additional work.", } // Status badge component const StatusBadge = ({ status }: { status: EstimateData["status"] }) => { const statusConfig = { draft: { label: "Draft", variant: "outline" }, sent: { label: "Sent", variant: "secondary" }, viewed: { label: "Viewed", variant: "secondary" }, approved: { label: "Approved", variant: "success" }, declined: { label: "Declined", variant: "destructive" }, expired: { label: "Expired", variant: "outline" }, } const config = statusConfig[status] return {config.label} } // Main component export function EstimateViewer({ estimateId, onBack }: EstimateViewerProps) { const [estimate] = useState(mockEstimate) const [approvedItems, setApprovedItems] = useState([]) // In a real app, we would fetch the estimate data based on estimateId const handleApproveItem = (itemId: string) => { setApprovedItems((prev) => (prev.includes(itemId) ? prev.filter((id) => id !== itemId) : [...prev, itemId])) } const handleApproveAll = () => { setApprovedItems(estimate.items.map((item) => item.id)) } const handleDeclineAll = () => { setApprovedItems([]) } const isItemApproved = (itemId: string) => approvedItems.includes(itemId) return (

Estimate #{estimate.number}

Customer Information

{estimate.customerName}

{estimate.vehicleInfo}

Created: {estimate.date}

Expires: {estimate.expiryDate}

Description Qty Unit Price Total Approve {estimate.items.map((item) => (

{item.description}

{item.type}

{item.quantity} ${item.unitPrice.toFixed(2)} ${item.totalPrice.toFixed(2)} ))}

Subtotal: ${estimate.subtotal.toFixed(2)}

Tax (5%): ${estimate.tax.toFixed(2)}

Total: ${estimate.total.toFixed(2)}

{estimate.notes && (

Notes

{estimate.notes}

)}

) } // Default export export default EstimateViewer [V0_FILE]typescriptreact:file="components/estimates/estimates-dashboard.tsx" "use client" import * as React from "react" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { format } from "date-fns" type Status = "draft" | "sent" | "approved" | "declined" export interface EstimateRow { id: string number: string customer: string vehicle: string total: number status: Status createdAt: Date } export interface EstimatesDashboardProps { /** Called when the user clicks “Create Estimate” */ onCreate?: () => void /** Called when the user clicks an estimate row */ onOpen?: (id: string) => void } /** * Lightweight dashboard that lists recent estimates. * Uses mock data when no props are provided so the preview never crashes. */ export function EstimatesDashboard({ onCreate, onOpen }: EstimatesDashboardProps) { /* -------------------------------------------------------------------- */ /* Mock data – replace with Supabase query */ /* -------------------------------------------------------------------- */ const mockData: EstimateRow[] = React.useMemo( () => [ { id: "est-1001", number: "EST-1001", customer: "Ahmed Hassan", vehicle: "Toyota Corolla 2015", total: 356.5, status: "draft", createdAt: new Date(), }, { id: "est-1002", number: "EST-1002", customer: "Fatima Ali", vehicle: "Hyundai Tucson 2018", total: 742.0, status: "sent", createdAt: new Date(Date.now() - 86_400_000), }, { id: "est-1003", number: "EST-1003", customer: "Mohamed Omar", vehicle: "Nissan Patrol 2020", total: 1295.75, status: "approved", createdAt: new Date(Date.now() - 172_800_000), }, ], [], ) const statusColor: Record = { draft: "secondary", sent: "warning", approved: "success", declined: "destructive", } /* -------------------------------------------------------------------- */ return ( Recent Estimates {onCreate && ( )} No. Customer Vehicle Total ($) Status Date {mockData.map((est) => ( onOpen?.(est.id)}> {est.number} {est.customer} {est.vehicle} {est.total.toFixed(2)} {est.status.charAt(0).toUpperCase() + est.status.slice(1)} {format(est.createdAt, "dd MMM yyyy")} ))}

) } export default EstimatesDashboard [V0_FILE]typescriptreact:file="components/estimates/estimates-module.tsx" "use client" import { useState } from "react" import { EstimatesDashboard } from "./estimates-dashboard" import { CreateEstimate } from "./create-estimate" import { EstimateViewer } from "./estimate-viewer" export function EstimatesModule() { const [view, setView] = useState<"dashboard" | "create" | "view">("dashboard") const [selectedEstimateId, setSelectedEstimateId] = useState(null) const handleCreateEstimate = () => { setView("create") } const handleViewEstimate = (estimateId: string) => { setSelectedEstimateId(estimateId) setView("view") } const handleBackToDashboard = () => { setView("dashboard") setSelectedEstimateId(null) } return (

{view === "dashboard" && } {view === "create" && } {view === "view" && selectedEstimateId && ( )}

) } export default EstimatesModule [V0_FILE]typescriptreact:file="components/header.tsx" "use client" import { Button } from "@/components/ui/button" import { ChevronDown, Menu, X } from "lucide-react" import { useState } from "react" export function Header() { const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false) const toggleMobileMenu = () => { setIsMobileMenuOpen(!isMobileMenuOpen) } return (

Auto Leap °

{/* Desktop Navigation */} {/* Desktop CTA */}

(855) 560-0088 Sign In

{/* Mobile menu button */}

{/* Mobile Navigation Menu */} {isMobileMenuOpen && (

{/* Mobile Navigation Links */}

Features

Shop Types

Partners

Pricing

Resources

{/* Mobile Contact Info */}

(855) 560-0088

)} {/* Mobile menu overlay */} {isMobileMenuOpen && (

)}

) } [V0_FILE]typescriptreact:file="components/hero-section.tsx" import { Button } from "@/components/ui/button" import { Star, Users } from "lucide-react" import Image from "next/image" export function HeroSection() { return (

AUTO REPAIR SHOP SOFTWARE

All-In-One Shop Management Tool for Auto Repair Shops

AutoLeap provides a complete automotive repair shop management solution for shop owners, service managers, and technicians to manage every aspect of their shop.

Designed to help you work smarter, not harder, and grow your auto repair business, all from a single, easy-to-use platform.

{[...Array(5)].map((_, i) => ( ))}

2,500+ reviews on

G o o g l e

Capterra

Software Advice

{/* Assign Technicians Card */}

Assign Technicians

{/* Average RO Value Card */}

Average RO value

$9.5k

{/* Rating Stars */}

{[...Array(5)].map((_, i) => ( ))}

) } [V0_FILE]typescriptreact:file="components/inspections/create-inspection.tsx" const CreateInspection = () => { return (

Create Inspection

{/* Add your form and logic here */}

) } export default CreateInspection [V0_FILE]typescriptreact:file="components/inspections/customer-approval.tsx" "use client" import type React from "react" interface CustomerApprovalProps { approved: boolean onApprove: () => void onReject: () => void } const CustomerApproval: React.FC = ({ approved, onApprove, onReject }) => { return (

{approved ? (

Customer has approved the inspection.

) : ( <> )}

) } export default CustomerApproval [V0_FILE]typescriptreact:file="components/inspections/inspection-checklist.tsx" const InspectionChecklist = () => { return (

Inspection Checklist

{/* Add checklist items here */}

) } export default InspectionChecklist [V0_FILE]typescriptreact:file="components/inspections/inspection-dashboard.tsx" const InspectionDashboard = () => { return (

Inspection Dashboard

{/* Add your inspection dashboard content here */}

) } export default InspectionDashboard [V0_FILE]typescriptreact:file="components/inspections/inspections-module.tsx" "use client" import { useState } from "react" import InspectionDashboard from "./inspection-dashboard" import CreateInspection from "./create-inspection" import InspectionChecklist from "./inspection-checklist" import CustomerApproval from "./customer-approval" /** * Wrapper that handles the full Digital Vehicle Inspection * workflow inside a single component. */ export function InspectionsModule() { const [step, setStep] = useState<"dashboard" | "create" | "checklist" | "approval">("dashboard") const [inspectionId, setInspectionId] = useState(null) const gotoDashboard = () => setStep("dashboard") return ( <> {step === "dashboard" && ( setStep("create")} onOpen={(id) => { setInspectionId(id) setStep("checklist") }} /> )} {step === "create" && ( { setInspectionId(id) setStep("checklist") }} /> )} {step === "checklist" && inspectionId && ( setStep("approval")} onBack={gotoDashboard} /> )} {step === "approval" && inspectionId && } ) } export default InspectionsModule [V0_FILE]typescriptreact:file="components/layout/sidebar.tsx" "use client" import { useState } from "react" import { cn } from "@/lib/utils" import { Button } from "@/components/ui/button" import { ScrollArea } from "@/components/ui/scroll-area" import { LayoutDashboard, Users, Car, Calendar, UserCheck, Building2, ClipboardCheck, FileText, BarChart3, Bot, Database, ChevronLeft, ChevronRight, } from "lucide-react" import { useSupabaseAuth } from "@/components/auth/supabase-auth-provider" interface SidebarProps { activeModule: string onModuleChange: (module: string) => void } const menuItems = [ { id: "dashboard", label: "Dashboard", icon: LayoutDashboard, roles: ["admin", "staff", "technician", "customer"] }, { id: "customers", label: "Customers", icon: Users, roles: ["admin", "staff"] }, { id: "vehicles", label: "Vehicles", icon: Car, roles: ["admin", "staff", "technician", "customer"] }, { id: "appointments", label: "Appointments", icon: Calendar, roles: ["admin", "staff", "technician", "customer"] }, { id: "technicians", label: "Technicians", icon: UserCheck, roles: ["admin", "staff"] }, { id: "suppliers", label: "Suppliers", icon: Building2, roles: ["admin", "staff"] }, { id: "inspections", label: "Inspections", icon: ClipboardCheck, roles: ["admin", "staff", "technician"] }, { id: "estimates", label: "Estimates", icon: FileText, roles: ["admin", "staff", "technician"] }, { id: "reports", label: "Reports", icon: BarChart3, roles: ["admin", "staff"] }, { id: "ai-tools", label: "AI Tools", icon: Bot, roles: ["admin", "staff", "technician"] }, { id: "database-test", label: "Database Test", icon: Database, roles: ["admin"] }, ] export function Sidebar({ activeModule, onModuleChange }: SidebarProps) { const [isCollapsed, setIsCollapsed] = useState(false) const { user, hasPermission } = useSupabaseAuth() const filteredMenuItems = menuItems.filter((item) => { if (!user) return false return item.roles.includes(user.role) && hasPermission(item.id, "read") }) return (

{/* Header */}

{!isCollapsed && (

MASS VWMS

)}

{/* Navigation */} {/* Footer */} {!isCollapsed && (

MASS Car Workshop VWMS
v1.0.0

)}

) } export default Sidebar [V0_FILE]typescriptreact:file="components/layout/user-menu.tsx" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu" import { Avatar, AvatarFallback } from "@/components/ui/avatar" import { Badge } from "@/components/ui/badge" import { useAuth } from "../auth/auth-provider" import { User, Settings, LogOut, Shield } from "lucide-react" export function UserMenu() { const { user, logout } = useAuth() const [isLoggingOut, setIsLoggingOut] = useState(false) if (!user) return null const handleLogout = async () => { setIsLoggingOut(true) await logout() setIsLoggingOut(false) } const getRoleBadgeColor = (role: string) => { switch (role) { case "admin": return "bg-red-500 hover:bg-red-600" case "staff": return "bg-blue-500 hover:bg-blue-600" case "technician": return "bg-green-500 hover:bg-green-600" case "customer": return "bg-purple-500 hover:bg-purple-600" default: return "bg-gray-500 hover:bg-gray-600" } } const getInitials = (firstName: string, lastName: string) => { return `${firstName.charAt(0)}${lastName.charAt(0)}`.toUpperCase() } return (

{user.firstName} {user.lastName}

{user.role.charAt(0).toUpperCase() + user.role.slice(1)}

{user.email}

{user.phone &&

{user.phone}

} {user.loginTime && (

Logged in: {new Date(user.loginTime).toLocaleString()}

)}

Profile Settings {isLoggingOut ? "Signing out..." : "Sign out"} ) } [V0_FILE]typescriptreact:file="components/reports/reports-analytics.tsx" "use client" import { useState } from "react" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Input } from "@/components/ui/input" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { LineChart, Line, BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer, } from "recharts" import { Wrench, DollarSign, Clock, ThumbsUp, TrendingUp, Download, Mail, Search, FileText, AlertTriangle, Star, Filter, Settings, } from "lucide-react" interface ServiceRecord { id: string date: string customer: string vehicle: string serviceType: string technician: string status: "Completed" | "In Progress" | "Pending" totalCost: number } interface KPIData { totalServices: number totalRevenue: number avgServiceTime: number customerSatisfaction: number } export function ReportsAnalytics() { const [dateFilter, setDateFilter] = useState("This Month") const [searchTerm, setSearchTerm] = useState("") const [userRole] = useState<"Admin" | "Staff" | "Technician">("Admin") // Mock role // Mock data const kpiData: KPIData = { totalServices: 156, totalRevenue: 45280, avgServiceTime: 2.4, customerSatisfaction: 4.8, } const revenueData = [ { month: "Jan", revenue: 32000, services: 120 }, { month: "Feb", revenue: 28000, services: 98 }, { month: "Mar", revenue: 35000, services: 134 }, { month: "Apr", revenue: 42000, services: 156 }, { month: "May", revenue: 38000, services: 142 }, { month: "Jun", revenue: 45280, services: 168 }, ] const servicesCategoryData = [ { category: "Oil Change", count: 45, revenue: 4500 }, { category: "Brake Service", count: 32, revenue: 9600 }, { category: "Engine Diagnostic", count: 28, revenue: 11200 }, { category: "Tire Service", count: 25, revenue: 7500 }, { category: "Transmission", count: 15, revenue: 7500 }, { category: "AC Service", count: 11, revenue: 4950 }, ] const serviceRecords: ServiceRecord[] = [ { id: "S001", date: "2024-06-20", customer: "Ahmed Hassan", vehicle: "Toyota Corolla 2020", serviceType: "Oil Change", technician: "Ali Mohamed", status: "Completed", totalCost: 85, }, { id: "S002", date: "2024-06-20", customer: "Fatima Ali", vehicle: "Honda Civic 2019", serviceType: "Brake Service", technician: "Hassan Omar", status: "Completed", totalCost: 320, }, { id: "S003", date: "2024-06-19", customer: "Mohamed Yusuf", vehicle: "Nissan Altima 2021", serviceType: "Engine Diagnostic", technician: "Amina Yusuf", status: "In Progress", totalCost: 450, }, { id: "S004", date: "2024-06-19", customer: "Sahra Ahmed", vehicle: "Hyundai Elantra 2018", serviceType: "Tire Service", technician: "Omar Ahmed", status: "Completed", totalCost: 280, }, { id: "S005", date: "2024-06-18", customer: "Khadija Osman", vehicle: "Ford Focus 2020", serviceType: "AC Service", technician: "Ali Mohamed", status: "Completed", totalCost: 195, }, ] const insights = { topTechnician: { name: "Ali Mohamed", completedJobs: 28, rating: 4.9, specialization: "Engine Specialist", }, mostRequestedService: { service: "Oil Change", count: 45, percentage: 28.8, }, lowInventory: [ { part: "Engine Oil 5W-30", stock: 3, minRequired: 10 }, { part: "Brake Pads", stock: 5, minRequired: 15 }, { part: "Air Filters", stock: 2, minRequired: 8 }, ], } const filteredRecords = serviceRecords.filter( (record) => record.customer.toLowerCase().includes(searchTerm.toLowerCase()) || record.vehicle.toLowerCase().includes(searchTerm.toLowerCase()) || record.serviceType.toLowerCase().includes(searchTerm.toLowerCase()) || record.technician.toLowerCase().includes(searchTerm.toLowerCase()), ) const getStatusColor = (status: string) => { switch (status) { case "Completed": return "bg-green-100 text-green-800" case "In Progress": return "bg-yellow-100 text-yellow-800" case "Pending": return "bg-blue-100 text-blue-800" default: return "bg-gray-100 text-gray-800" } } const formatCurrency = (amount: number) => { return new Intl.NumberFormat("en-US", { style: "currency", currency: "USD", }).format(amount) } const handleExportCSV = () => { const csvContent = [ ["Date", "Customer", "Vehicle", "Service Type", "Technician", "Status", "Total Cost"], ...filteredRecords.map((record) => [ record.date, record.customer, record.vehicle, record.serviceType, record.technician, record.status, record.totalCost.toString(), ]), ] .map((row) => row.join(",")) .join("\n") const blob = new Blob([csvContent], { type: "text/csv" }) const url = window.URL.createObjectURL(blob) const a = document.createElement("a") a.href = url a.download = `services-report-${new Date().toISOString().split("T")[0]}.csv` a.click() window.URL.revokeObjectURL(url) } return (

{/* Header Section */}

Reports & Analytics

{(userRole === "Admin" || userRole === "Staff") && ( {userRole} )}

Monitor workshop performance, customer trends, revenue, and service stats

{/* KPI Cards Section */}

Total Services

{kpiData.totalServices}

+12% from last month

Total Revenue

{formatCurrency(kpiData.totalRevenue)}

+8% from last month

Avg Service Time

{kpiData.avgServiceTime}h

-5% from last month

Customer Satisfaction

{kpiData.customerSatisfaction}/5

+0.2 from last month

{/* Charts Section */}

Revenue Over Time [ name === "revenue" ? formatCurrency(Number(value)) : value, name === "revenue" ? "Revenue" : "Services", ]} labelStyle={{ color: "#374151" }} contentStyle={{ backgroundColor: "white", border: "1px solid #e5e7eb", borderRadius: "8px", }} /> Services by Category [value, name === "count" ? "Services" : "Revenue"]} labelStyle={{ color: "#374151" }} contentStyle={{ backgroundColor: "white", border: "1px solid #e5e7eb", borderRadius: "8px", }} />

{/* Main Content Grid */}

{/* Detailed Table Section */}

Recent Services Report

setSearchTerm(e.target.value)} className="pl-10 w-full sm:w-64" />

{filteredRecords.map((record) => ( ))}

Date	Customer	Vehicle	Service	Technician	Status	Cost
{record.date}	{record.customer}	{record.vehicle}	{record.serviceType}	{record.technician}	{record.status}	{formatCurrency(record.totalCost)}

{/* Insights Panel */}

{/* Top Technician */} Top Technician

{insights.topTechnician.name.charAt(0)}

{insights.topTechnician.name}

{insights.topTechnician.specialization}

Completed Jobs: {insights.topTechnician.completedJobs}

Rating: ⭐ {insights.topTechnician.rating}

{/* Most Requested Service */} Most Requested Service

{insights.mostRequestedService.service}

{insights.mostRequestedService.count}

{insights.mostRequestedService.percentage}% of all services

{/* Inventory Alert */} Inventory Low Alert

{insights.lowInventory.map((item, index) => (

{item.part}

Min required: {item.minRequired}

{item.stock} left

))}

{/* Admin-Only Control Buttons */} {userRole === "Admin" && (

)}

) } [V0_FILE]typescriptreact:file="components/suppliers/add-supplier-form.tsx" "use client" import type React from "react" import { useState } from "react" interface AddSupplierFormProps { onAddSupplier: (supplier: { name: string; contact: string }) => void } const AddSupplierForm: React.FC = ({ onAddSupplier }) => { const [name, setName] = useState("") const [contact, setContact] = useState("") const handleSubmit = (e: React.FormEvent) => { e.preventDefault() onAddSupplier({ name, contact }) setName("") setContact("") } return ( ) } export default AddSupplierForm [V0_FILE]typescriptreact:file="components/suppliers/supplier-detail.tsx" // components/suppliers/supplier-detail.tsx import type React from "react" interface SupplierDetailProps { supplierId: string } const SupplierDetail: React.FC = ({ supplierId }) => { return (

Supplier Detail

Supplier ID: {supplierId}

{/* Add more supplier details here */}

) } export default SupplierDetail [V0_FILE]typescriptreact:file="components/suppliers/suppliers-directory.tsx" const SuppliersDirectory = () => { return (

Suppliers Directory

{/* Add supplier list and search functionality here */}

) } export default SuppliersDirectory [V0_FILE]typescriptreact:file="components/suppliers/suppliers-module.tsx" "use client" import { useState } from "react" import SuppliersDirectory from "./suppliers-directory" import SupplierDetail from "./supplier-detail" import AddSupplierForm from "./add-supplier-form" /** * High-level wrapper for all Supplier pages. * It swaps between: * • Directory list * • Single supplier detail * • New-supplier form * * Feel free to replace this very simple state machine with * your favourite router or a URL-based approach later. */ export function SuppliersModule() { const [view, setView] = useState<"directory" | "detail" | "add">("directory") const [selectedId, setSelectedId] = useState(null) const backToDirectory = () => setView("directory") return (

{view === "directory" && ( { setSelectedId(id) setView("detail") }} onAddSupplier={() => setView("add")} /> )} {view === "detail" && selectedId && } {view === "add" && }

) } export default SuppliersModule [V0_FILE]typescriptreact:file="components/technicians/technician-dashboard.tsx" "use client" import { useState } from "react" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Input } from "@/components/ui/input" import { Textarea } from "@/components/ui/textarea" import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog" import { Wrench, History, Stethoscope, RefreshCw, Package, Eye, CheckCircle, Clock, Car, User, FileText, X, Plus, Search, MapPin, Phone, Mail, } from "lucide-react" interface Job { id: string vehiclePlate: string serviceType: string customerName: string status: "In Progress" | "Completed" | "Pending" | "Assigned" priority: "High" | "Medium" | "Low" vehicleInfo: { make: string model: string year: number mileage: string color: string } customerInfo: { phone: string email: string } diagnosisNotes: string partsUsed: string[] partsRequested: string[] startTime: string endTime?: string estimatedTime: string assignedDate: string technicianNotes: string } interface Technician { id: string name: string specialization: string activeJobs: number completedToday: number rating: number status: "Available" | "Busy" | "Break" } export function TechnicianDashboard() { const [activeSection, setActiveSection] = useState("overview") const [selectedJob, setSelectedJob] = useState(null) const [selectedTechnician, setSelectedTechnician] = useState(null) const [isJobDetailsOpen, setIsJobDetailsOpen] = useState(false) const [isDiagnosticFormOpen, setIsDiagnosticFormOpen] = useState(false) const [isSidebarOpen, setIsSidebarOpen] = useState(false) const [searchTerm, setSearchTerm] = useState("") const [diagnosticReport, setDiagnosticReport] = useState({ jobId: "", summary: "", recommendedParts: [] as string[], newPart: "", }) // Sample data const technicians: Technician[] = [ { id: "T001", name: "Ali Mohamed", specialization: "Engine Specialist", activeJobs: 3, completedToday: 2, rating: 4.8, status: "Busy", }, { id: "T002", name: "Hassan Omar", specialization: "Brake Systems", activeJobs: 2, completedToday: 4, rating: 4.9, status: "Available", }, { id: "T003", name: "Amina Yusuf", specialization: "Electrical Systems", activeJobs: 1, completedToday: 3, rating: 4.7, status: "Break", }, { id: "T004", name: "Omar Ahmed", specialization: "General Maintenance", activeJobs: 4, completedToday: 1, rating: 4.6, status: "Busy", }, ] const jobs: Job[] = [ { id: "J001", vehiclePlate: "SL-001-ABC", serviceType: "Engine Diagnostic", customerName: "Ahmed Hassan", status: "In Progress", priority: "High", vehicleInfo: { make: "Toyota", model: "Corolla", year: 2020, mileage: "45,000 km", color: "White", }, customerInfo: { phone: "+252-61-123-4567", email: "ahmed@email.com", }, diagnosisNotes: "Engine making unusual noise. Checking timing belt and spark plugs. Customer reports noise started 3 days ago.", partsUsed: ["Spark Plugs", "Engine Oil"], partsRequested: ["Timing Belt", "Oil Filter"], startTime: "09:00 AM", estimatedTime: "2 hours", assignedDate: "2024-01-15", technicianNotes: "Initial inspection complete. Timing belt shows wear. Recommended replacement.", }, { id: "J002", vehiclePlate: "SL-002-DEF", serviceType: "Brake Service", customerName: "Fatima Ali", status: "Completed", priority: "Medium", vehicleInfo: { make: "Honda", model: "Civic", year: 2019, mileage: "38,000 km", color: "Blue", }, customerInfo: { phone: "+252-61-234-5678", email: "fatima@email.com", }, diagnosisNotes: "Brake pads worn out. Replaced front brake pads and checked brake fluid levels.", partsUsed: ["Brake Pads", "Brake Fluid"], partsRequested: [], startTime: "11:00 AM", endTime: "01:30 PM", estimatedTime: "2.5 hours", assignedDate: "2024-01-15", technicianNotes: "Service completed successfully. Brake system tested and functioning properly.", }, { id: "J003", vehiclePlate: "SL-003-GHI", serviceType: "Oil Change", customerName: "Mohamed Yusuf", status: "Assigned", priority: "Low", vehicleInfo: { make: "Nissan", model: "Altima", year: 2021, mileage: "22,000 km", color: "Silver", }, customerInfo: { phone: "+252-61-345-6789", email: "mohamed@email.com", }, diagnosisNotes: "Routine oil change and filter replacement scheduled.", partsUsed: [], partsRequested: ["Engine Oil", "Oil Filter"], startTime: "02:00 PM", estimatedTime: "1 hour", assignedDate: "2024-01-16", technicianNotes: "", }, ] const sidebarItems = [ { id: "overview", label: "Overview", icon: Wrench }, { id: "active-jobs", label: "Active Jobs", icon: Clock }, { id: "job-history", label: "Job History", icon: History }, { id: "diagnostics", label: "Diagnostics", icon: Stethoscope }, { id: "parts-requests", label: "Parts Requests", icon: Package }, { id: "performance", label: "Performance", icon: RefreshCw }, ] const getStatusColor = (status: string) => { switch (status) { case "In Progress": return "bg-yellow-100 text-yellow-800" case "Completed": return "bg-green-100 text-green-800" case "Pending": return "bg-blue-100 text-blue-800" case "Assigned": return "bg-purple-100 text-purple-800" default: return "bg-gray-100 text-gray-800" } } const getPriorityColor = (priority: string) => { switch (priority) { case "High": return "bg-red-100 text-red-800" case "Medium": return "bg-yellow-100 text-yellow-800" case "Low": return "bg-green-100 text-green-800" default: return "bg-gray-100 text-gray-800" } } const getTechnicianStatusColor = (status: string) => { switch (status) { case "Available": return "bg-green-100 text-green-800" case "Busy": return "bg-red-100 text-red-800" case "Break": return "bg-yellow-100 text-yellow-800" default: return "bg-gray-100 text-gray-800" } } const filteredJobs = jobs.filter( (job) => job.vehiclePlate.toLowerCase().includes(searchTerm.toLowerCase()) || job.customerName.toLowerCase().includes(searchTerm.toLowerCase()) || job.serviceType.toLowerCase().includes(searchTerm.toLowerCase()), ) const handleJobComplete = (jobId: string) => { console.log(`Marking job ${jobId} as completed`) setIsJobDetailsOpen(false) } const handleAddPart = () => { if (diagnosticReport.newPart.trim()) { setDiagnosticReport({ ...diagnosticReport, recommendedParts: [...diagnosticReport.recommendedParts, diagnosticReport.newPart.trim()], newPart: "", }) } } const handleRemovePart = (index: number) => { setDiagnosticReport({ ...diagnosticReport, recommendedParts: diagnosticReport.recommendedParts.filter((_, i) => i !== index), }) } const renderOverview = () => (

Technicians Overview

Monitor technician performance and job assignments

{/* Summary Stats */}

Total Technicians

{technicians.length}

Active Jobs

{technicians.reduce((sum, tech) => sum + tech.activeJobs, 0)}

Completed Today

{technicians.reduce((sum, tech) => sum + tech.completedToday, 0)}

Available

{technicians.filter((tech) => tech.status === "Available").length}

{/* Technicians Grid */} Technician Status

{technicians.map((technician) => (

{technician.name.charAt(0)}

{technician.status}

{technician.name}

{technician.specialization}

Active Jobs: {technician.activeJobs}

Completed Today: {technician.completedToday}

Rating: ⭐ {technician.rating}

))}

) const renderActiveJobs = () => (

Active Jobs

Monitor ongoing technician assignments

setSearchTerm(e.target.value)} className="pl-10 w-full sm:w-64" />

{/* Jobs Table */} Current Assignments

{filteredJobs.map((job) => ( ))}

Job ID	Vehicle	Service	Customer	Priority	Status	Action
{job.id}	{job.vehiclePlate} {job.vehicleInfo.year} {job.vehicleInfo.make} {job.vehicleInfo.model}	{job.serviceType}	{job.customerName}	{job.priority}	{job.status}

) const renderDiagnosticForm = () => (

Vehicle Diagnostics

Submit diagnostic reports and recommendations

New Diagnostic Report

Job ID setDiagnosticReport({ ...diagnosticReport, jobId: e.target.value })} placeholder="Enter Job ID (e.g., J001)" />

Diagnosis Summary

setDiagnosticReport({ ...diagnosticReport, summary: e.target.value })}
              placeholder="Enter detailed diagnosis and findings..."
              rows={6}
              className="resize-none"
            />
          </div>

<div>
            <label className="block text-sm font-medium text-gray-700 mb-2">Recommended Parts</label>
            <div className="flex flex-wrap gap-2 mb-2">
              {diagnosticReport.recommendedParts.map((part, index) => (
                <Badge key={index} variant="secondary" className="flex items-center gap-1">
                  {part}
                  <X className="w-3 h-3 cursor-pointer" onClick={() => handleRemovePart(index)} />
                </Badge>
              ))}
            </div>
            <div className="flex gap-2">
              <Input
                placeholder="Add part name..."
                value={diagnosticReport.newPart}
                onChange={(e) => setDiagnosticReport({ ...diagnosticReport, newPart: e.target.value })}
                className="flex-1"
                onKeyPress={(e) => e.key === "Enter" && handleAddPart()}
              />
              <Button size="sm" onClick={handleAddPart}>
                <Plus className="w-4 h-4" />
              </Button>
            </div>
          </div>

<div className="flex gap-4 pt-4">
            <Button className="flex-1 sm:flex-none">
              <FileText className="w-4 h-4 mr-2" />
              Submit Report
            </Button>
            <Button variant="outline" className="flex-1 sm:flex-none">
              Save Draft
            </Button>
          </div>
        </CardContent>
      </Card>
    </div>
  )

const renderContent = () => {
    switch (activeSection) {
      case "overview":
        return renderOverview()
      case "active-jobs":
        return renderActiveJobs()
      case "diagnostics":
        return renderDiagnosticForm()
      case "job-history":
        return (
          <div className="text-center py-12">
            <History className="w-12 h-12 text-gray-400 mx-auto mb-4" />
            <h3 className="text-lg font-medium text-gray-900 mb-2">Job History</h3>
            <p className="text-gray-600">View completed job history and performance metrics</p>
          </div>
        )
      case "parts-requests":
        return (
          <div className="text-center py-12">
            <Package className="w-12 h-12 text-gray-400 mx-auto mb-4" />
            <h3 className="text-lg font-medium text-gray-900 mb-2">Parts Requests</h3>
            <p className="text-gray-600">Track parts requests and inventory needs</p>
          </div>
        )
      case "performance":
        return (
          <div className="text-center py-12">
            <RefreshCw className="w-12 h-12 text-gray-400 mx-auto mb-4" />
            <h3 className="text-lg font-medium text-gray-900 mb-2">Performance Analytics</h3>
            <p className="text-gray-600">View technician performance metrics and reports</p>
          </div>
        )
      default:
        return renderOverview()
    }
  }

return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
        <div>
          <h1 className="text-3xl font-bold text-gray-900">Technicians Module</h1>
          <p className="text-gray-600">Manage technician assignments and performance</p>
        </div>
      </div>

{/* Navigation Tabs */}
      <div className="border-b border-gray-200">
        <nav className="-mb-px flex space-x-8 overflow-x-auto">
          {sidebarItems.map((item) => {
            const Icon = item.icon
            return (
              <button
                key={item.id}
                onClick={() => setActiveSection(item.id)}
                className={`
                  flex items-center space-x-2 py-2 px-1 border-b-2 font-medium text-sm whitespace-nowrap
                  ${
                    activeSection === item.id
                      ? "border-blue-500 text-blue-600"
                      : "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300"
                  }
                `}
              >
                <Icon className="w-4 h-4" />
                <span>{item.label}</span>
              </button>
            )
          })}
        </nav>
      </div>

{/* Main Content */}
      {renderContent()}

{/* Job Details Modal */}
      <Dialog open={isJobDetailsOpen} onOpenChange={setIsJobDetailsOpen}>
        <DialogContent className="max-w-4xl max-h-[90vh] overflow-y-auto">
          <DialogHeader>
            <DialogTitle>Job Details - {selectedJob?.id}</DialogTitle>
          </DialogHeader>
          {selectedJob && (
            <div className="space-y-6">
              <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
                <div>
                  <h4 className="font-medium text-gray-900 mb-3">Vehicle Information</h4>
                  <div className="space-y-3 text-sm bg-gray-50 p-4 rounded-lg">
                    <div className="flex items-center">
                      <Car className="w-4 h-4 mr-2 text-gray-500" />
                      <span>
                        {selectedJob.vehicleInfo.year} {selectedJob.vehicleInfo.make} {selectedJob.vehicleInfo.model}
                      </span>
                    </div>
                    <div className="flex items-center">
                      <MapPin className="w-4 h-4 mr-2 text-gray-500" />
                      <span>{selectedJob.vehiclePlate}</span>
                    </div>
                    <div className="flex items-center">
                      <span className="w-4 h-4 mr-2 text-gray-500">📊</span>
                      <span>{selectedJob.vehicleInfo.mileage}</span>
                    </div>
                    <div className="flex items-center">
                      <span className="w-4 h-4 mr-2 text-gray-500">🎨</span>
                      <span>{selectedJob.vehicleInfo.color}</span>
                    </div>
                  </div>
                </div>

<div>
                  <h4 className="font-medium text-gray-900 mb-3">Customer Information</h4>
                  <div className="space-y-3 text-sm bg-gray-50 p-4 rounded-lg">
                    <div className="flex items-center">
                      <User className="w-4 h-4 mr-2 text-gray-500" />
                      <span>{selectedJob.customerName}</span>
                    </div>
                    <div className="flex items-center">
                      <Phone className="w-4 h-4 mr-2 text-gray-500" />
                      <span>{selectedJob.customerInfo.phone}</span>
                    </div>
                    <div className="flex items-center">
                      <Mail className="w-4 h-4 mr-2 text-gray-500" />
                      <span>{selectedJob.customerInfo.email}</span>
                    </div>
                  </div>
                </div>
              </div>

<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
                <div>
                  <h4 className="font-medium text-gray-900 mb-3">Job Details</h4>
                  <div className="space-y-3 text-sm">
                    <div className="flex justify-between">
                      <span className="text-gray-600">Service Type:</span>
                      <span className="font-medium">{selectedJob.serviceType}</span>
                    </div>
                    <div className="flex justify-between">
                      <span className="text-gray-600">Priority:</span>
                      <Badge className={getPriorityColor(selectedJob.priority)}>{selectedJob.priority}</Badge>
                    </div>
                    <div className="flex justify-between">
                      <span className="text-gray-600">Status:</span>
                      <Badge className={getStatusColor(selectedJob.status)}>{selectedJob.status}</Badge>
                    </div>
                    <div className="flex justify-between">
                      <span className="text-gray-600">Assigned Date:</span>
                      <span className="font-medium">{selectedJob.assignedDate}</span>
                    </div>
                    <div className="flex justify-between">
                      <span className="text-gray-600">Start Time:</span>
                      <span className="font-medium">{selectedJob.startTime}</span>
                    </div>
                    {selectedJob.endTime && (
                      <div className="flex justify-between">
                        <span className="text-gray-600">End Time:</span>
                        <span className="font-medium">{selectedJob.endTime}</span>
                      </div>
                    )}
                    <div className="flex justify-between">
                      <span className="text-gray-600">Estimated Time:</span>
                      <span className="font-medium">{selectedJob.estimatedTime}</span>
                    </div>
                  </div>
                </div>

<div>
                  <h4 className="font-medium text-gray-900 mb-3">Parts Information</h4>
                  <div className="space-y-3">
                    <div>
                      <span className="text-sm text-gray-600 block mb-2">Parts Used:</span>
                      <div className="flex flex-wrap gap-2">
                        {selectedJob.partsUsed.length > 0 ? (
                          selectedJob.partsUsed.map((part, index) => (
                            <Badge key={index} variant="secondary" className="bg-green-100 text-green-800">
                              {part}
                            </Badge>
                          ))
                        ) : (
                          <span className="text-sm text-gray-500">No parts used yet</span>
                        )}
                      </div>
                    </div>
                    <div>
                      <span className="text-sm text-gray-600 block mb-2">Parts Requested:</span>
                      <div className="flex flex-wrap gap-2">
                        {selectedJob.partsRequested.length > 0 ? (
                          selectedJob.partsRequested.map((part, index) => (
                            <Badge key={index} variant="secondary" className="bg-yellow-100 text-yellow-800">
                              {part}
                            </Badge>
                          ))
                        ) : (
                          <span className="text-sm text-gray-500">No parts requested</span>
                        )}
                      </div>
                    </div>
                  </div>
                </div>
              </div>

<div>
                <h4 className="font-medium text-gray-900 mb-3">Diagnosis Notes</h4>
                <p className="text-sm text-gray-600 bg-gray-50 p-4 rounded-lg">{selectedJob.diagnosisNotes}</p>
              </div>

{selectedJob.technicianNotes && (
                <div>
                  <h4 className="font-medium text-gray-900 mb-3">Technician Notes</h4>
                  <p className="text-sm text-gray-600 bg-blue-50 p-4 rounded-lg">{selectedJob.technicianNotes}</p>
                </div>
              )}

<div className="flex gap-4 pt-4 border-t">
                {selectedJob.status !== "Completed" && (
                  <Button onClick={() => handleJobComplete(selectedJob.id)} className="flex-1 sm:flex-none">
                    <CheckCircle className="w-4 h-4 mr-2" />
                    Mark as Completed
                  </Button>
                )}
                <Button
                  variant="outline"
                  onClick={() => {
                    setDiagnosticReport({ ...diagnosticReport, jobId: selectedJob.id })
                    setIsDiagnosticFormOpen(true)
                  }}
                  className="flex-1 sm:flex-none"
                >
                  <FileText className="w-4 h-4 mr-2" />
                  Add Diagnostic
                </Button>
                <Button variant="outline" onClick={() => setIsJobDetailsOpen(false)} className="flex-1 sm:flex-none">
                  Close
                </Button>
              </div>
            </div>
          )}
        </DialogContent>
      </Dialog>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/theme-provider.tsx"
'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/trusted-by-section.tsx"
import Image from "next/image"

export function TrustedBySection() {
  const companies = [
    { name: "Hanes", logo: "/placeholder.svg?height=60&width=120" },
    { name: "APEX", logo: "/placeholder.svg?height=60&width=120" },
    { name: "FrontLine Automotive", logo: "/placeholder.svg?height=60&width=120" },
    { name: "RPM", logo: "/placeholder.svg?height=60&width=120" },
    { name: "TIRECRAFT", logo: "/placeholder.svg?height=60&width=120" },
    { name: "Cartronics", logo: "/placeholder.svg?height=60&width=120" },
  ]

return (
    <section className="bg-gray-50 py-16">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="text-center mb-12">
          <h2 className="text-2xl lg:text-3xl font-bold text-gray-900">
            The #1 Choice For Thousands Of Successful Shops
          </h2>
        </div>

<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-8 items-center">
          {companies.map((company, index) => (
            <div key={index} className="flex flex-col items-center space-y-4">
              <div className="bg-white rounded-lg p-4 shadow-sm w-full h-20 flex items-center justify-center">
                <Image
                  src={company.logo || "/placeholder.svg"}
                  alt={`${company.name} logo`}
                  width={100}
                  height={40}
                  className="max-w-full max-h-full object-contain"
                />
              </div>
              <button className="text-sm text-teal-600 hover:text-teal-700 font-medium">Case study →</button>
            </div>
          ))}
        </div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/ui/accordion.tsx"
"use client"

import * as React from "react"
import * as AccordionPrimitive from "@radix-ui/react-accordion"
import { ChevronDown } from "lucide-react"

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

const Accordion = AccordionPrimitive.Root

const AccordionItem = React.forwardRef<
  React.ElementRef<typeof AccordionPrimitive.Item>,
  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
>(({ className, ...props }, ref) => (
  <AccordionPrimitive.Item
    ref={ref}
    className={cn("border-b", className)}
    {...props}
  />
))
AccordionItem.displayName = "AccordionItem"

const AccordionTrigger = React.forwardRef<
  React.ElementRef<typeof AccordionPrimitive.Trigger>,
  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
>(({ className, children, ...props }, ref) => (
  <AccordionPrimitive.Header className="flex">
    <AccordionPrimitive.Trigger
      ref={ref}
      className={cn(
        "flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
        className
      )}
      {...props}
    >
      {children}
      <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
    </AccordionPrimitive.Trigger>
  </AccordionPrimitive.Header>
))
AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName

const AccordionContent = React.forwardRef<
  React.ElementRef<typeof AccordionPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
>(({ className, children, ...props }, ref) => (
  <AccordionPrimitive.Content
    ref={ref}
    className="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
    {...props}
  >
    <div className={cn("pb-4 pt-0", className)}>{children}</div>
  </AccordionPrimitive.Content>
))

AccordionContent.displayName = AccordionPrimitive.Content.displayName

export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }
[V0_FILE]typescriptreact:file="components/ui/alert-dialog.tsx"
"use client"

import * as React from "react"
import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"

import { cn } from "@/lib/utils"
import { buttonVariants } from "@/components/ui/button"

const AlertDialog = AlertDialogPrimitive.Root

const AlertDialogTrigger = AlertDialogPrimitive.Trigger

const AlertDialogPortal = AlertDialogPrimitive.Portal

const AlertDialogOverlay = React.forwardRef<
  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
>(({ className, ...props }, ref) => (
  <AlertDialogPrimitive.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}
  />
))
AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName

const AlertDialogContent = React.forwardRef<
  React.ElementRef<typeof AlertDialogPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
>(({ className, ...props }, ref) => (
  <AlertDialogPortal>
    <AlertDialogOverlay />
    <AlertDialogPrimitive.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}
    />
  </AlertDialogPortal>
))
AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName

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

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

const AlertDialogTitle = React.forwardRef<
  React.ElementRef<typeof AlertDialogPrimitive.Title>,
  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
>(({ className, ...props }, ref) => (
  <AlertDialogPrimitive.Title
    ref={ref}
    className={cn("text-lg font-semibold", className)}
    {...props}
  />
))
AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName

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

const AlertDialogAction = React.forwardRef<
  React.ElementRef<typeof AlertDialogPrimitive.Action>,
  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
>(({ className, ...props }, ref) => (
  <AlertDialogPrimitive.Action
    ref={ref}
    className={cn(buttonVariants(), className)}
    {...props}
  />
))
AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName

const AlertDialogCancel = React.forwardRef<
  React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
>(({ className, ...props }, ref) => (
  <AlertDialogPrimitive.Cancel
    ref={ref}
    className={cn(
      buttonVariants({ variant: "outline" }),
      "mt-2 sm:mt-0",
      className
    )}
    {...props}
  />
))
AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName

export {
  AlertDialog,
  AlertDialogPortal,
  AlertDialogOverlay,
  AlertDialogTrigger,
  AlertDialogContent,
  AlertDialogHeader,
  AlertDialogFooter,
  AlertDialogTitle,
  AlertDialogDescription,
  AlertDialogAction,
  AlertDialogCancel,
}
[V0_FILE]typescriptreact:file="components/ui/alert.tsx"
import * as React from "react"
import { cva, type VariantProps } from "class-variance-authority"

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

const alertVariants = cva(
  "relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
  {
    variants: {
      variant: {
        default: "bg-background text-foreground",
        destructive:
          "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
      },
    },
    defaultVariants: {
      variant: "default",
    },
  }
)

const Alert = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
>(({ className, variant, ...props }, ref) => (
  <div
    ref={ref}
    role="alert"
    className={cn(alertVariants({ variant }), className)}
    {...props}
  />
))
Alert.displayName = "Alert"

const AlertTitle = React.forwardRef<
  HTMLParagraphElement,
  React.HTMLAttributes<HTMLHeadingElement>
>(({ className, ...props }, ref) => (
  <h5
    ref={ref}
    className={cn("mb-1 font-medium leading-none tracking-tight", className)}
    {...props}
  />
))
AlertTitle.displayName = "AlertTitle"

const AlertDescription = React.forwardRef<
  HTMLParagraphElement,
  React.HTMLAttributes<HTMLParagraphElement>
>(({ className, ...props }, ref) => (
  <div
    ref={ref}
    className={cn("text-sm [&_p]:leading-relaxed", className)}
    {...props}
  />
))
AlertDescription.displayName = "AlertDescription"

export { Alert, AlertTitle, AlertDescription }
[V0_FILE]typescriptreact:file="components/ui/aspect-ratio.tsx"
"use client"

import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio"

const AspectRatio = AspectRatioPrimitive.Root

export { AspectRatio }
[V0_FILE]typescriptreact:file="components/ui/avatar.tsx"
"use client"

import * as React from "react"
import * as AvatarPrimitive from "@radix-ui/react-avatar"

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

const Avatar = React.forwardRef<
  React.ElementRef<typeof AvatarPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
>(({ className, ...props }, ref) => (
  <AvatarPrimitive.Root
    ref={ref}
    className={cn(
      "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
      className
    )}
    {...props}
  />
))
Avatar.displayName = AvatarPrimitive.Root.displayName

const AvatarImage = React.forwardRef<
  React.ElementRef<typeof AvatarPrimitive.Image>,
  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
>(({ className, ...props }, ref) => (
  <AvatarPrimitive.Image
    ref={ref}
    className={cn("aspect-square h-full w-full", className)}
    {...props}
  />
))
AvatarImage.displayName = AvatarPrimitive.Image.displayName

const AvatarFallback = React.forwardRef<
  React.ElementRef<typeof AvatarPrimitive.Fallback>,
  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
>(({ className, ...props }, ref) => (
  <AvatarPrimitive.Fallback
    ref={ref}
    className={cn(
      "flex h-full w-full items-center justify-center rounded-full bg-muted",
      className
    )}
    {...props}
  />
))
AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName

export { Avatar, AvatarImage, AvatarFallback }
[V0_FILE]typescriptreact:file="components/ui/badge.tsx"
import * as React from "react"
import { cva, type VariantProps } from "class-variance-authority"

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

const badgeVariants = cva(
  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
  {
    variants: {
      variant: {
        default:
          "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
        secondary:
          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
        destructive:
          "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
        outline: "text-foreground",
      },
    },
    defaultVariants: {
      variant: "default",
    },
  }
)

export interface BadgeProps
  extends React.HTMLAttributes<HTMLDivElement>,
    VariantProps<typeof badgeVariants> {}

function Badge({ className, variant, ...props }: BadgeProps) {
  return (
    <div className={cn(badgeVariants({ variant }), className)} {...props} />
  )
}

export { Badge, badgeVariants }
[V0_FILE]typescriptreact:file="components/ui/breadcrumb.tsx"
import * as React from "react"
import { Slot } from "@radix-ui/react-slot"
import { ChevronRight, MoreHorizontal } from "lucide-react"

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

const Breadcrumb = React.forwardRef<
  HTMLElement,
  React.ComponentPropsWithoutRef<"nav"> & {
    separator?: React.ReactNode
  }
>(({ ...props }, ref) => <nav ref={ref} aria-label="breadcrumb" {...props} />)
Breadcrumb.displayName = "Breadcrumb"

const BreadcrumbList = React.forwardRef<
  HTMLOListElement,
  React.ComponentPropsWithoutRef<"ol">
>(({ className, ...props }, ref) => (
  <ol
    ref={ref}
    className={cn(
      "flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5",
      className
    )}
    {...props}
  />
))
BreadcrumbList.displayName = "BreadcrumbList"

const BreadcrumbItem = React.forwardRef<
  HTMLLIElement,
  React.ComponentPropsWithoutRef<"li">
>(({ className, ...props }, ref) => (
  <li
    ref={ref}
    className={cn("inline-flex items-center gap-1.5", className)}
    {...props}
  />
))
BreadcrumbItem.displayName = "BreadcrumbItem"

const BreadcrumbLink = React.forwardRef<
  HTMLAnchorElement,
  React.ComponentPropsWithoutRef<"a"> & {
    asChild?: boolean
  }
>(({ asChild, className, ...props }, ref) => {
  const Comp = asChild ? Slot : "a"

return (
    <Comp
      ref={ref}
      className={cn("transition-colors hover:text-foreground", className)}
      {...props}
    />
  )
})
BreadcrumbLink.displayName = "BreadcrumbLink"

const BreadcrumbPage = React.forwardRef<
  HTMLSpanElement,
  React.ComponentPropsWithoutRef<"span">
>(({ className, ...props }, ref) => (
  <span
    ref={ref}
    role="link"
    aria-disabled="true"
    aria-current="page"
    className={cn("font-normal text-foreground", className)}
    {...props}
  />
))
BreadcrumbPage.displayName = "BreadcrumbPage"

const BreadcrumbSeparator = ({
  children,
  className,
  ...props
}: React.ComponentProps<"li">) => (
  <li
    role="presentation"
    aria-hidden="true"
    className={cn("[&>svg]:w-3.5 [&>svg]:h-3.5", className)}
    {...props}
  >
    {children ?? <ChevronRight />}
  </li>
)
BreadcrumbSeparator.displayName = "BreadcrumbSeparator"

const BreadcrumbEllipsis = ({
  className,
  ...props
}: React.ComponentProps<"span">) => (
  <span
    role="presentation"
    aria-hidden="true"
    className={cn("flex h-9 w-9 items-center justify-center", className)}
    {...props}
  >
    <MoreHorizontal className="h-4 w-4" />
    <span className="sr-only">More</span>
  </span>
)
BreadcrumbEllipsis.displayName = "BreadcrumbElipssis"

export {
  Breadcrumb,
  BreadcrumbList,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbPage,
  BreadcrumbSeparator,
  BreadcrumbEllipsis,
}
[V0_FILE]typescriptreact:file="components/ui/button.tsx"
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/calendar.tsx"
"use client"

import * as React from "react"
import { ChevronLeft, ChevronRight } from "lucide-react"
import { DayPicker } from "react-day-picker"

import { cn } from "@/lib/utils"
import { buttonVariants } from "@/components/ui/button"

export type CalendarProps = React.ComponentProps<typeof DayPicker>

function Calendar({
  className,
  classNames,
  showOutsideDays = true,
  ...props
}: CalendarProps) {
  return (
    <DayPicker
      showOutsideDays={showOutsideDays}
      className={cn("p-3", className)}
      classNames={{
        months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
        month: "space-y-4",
        caption: "flex justify-center pt-1 relative items-center",
        caption_label: "text-sm font-medium",
        nav: "space-x-1 flex items-center",
        nav_button: cn(
          buttonVariants({ variant: "outline" }),
          "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"
        ),
        nav_button_previous: "absolute left-1",
        nav_button_next: "absolute right-1",
        table: "w-full border-collapse space-y-1",
        head_row: "flex",
        head_cell:
          "text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]",
        row: "flex w-full mt-2",
        cell: "h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20",
        day: cn(
          buttonVariants({ variant: "ghost" }),
          "h-9 w-9 p-0 font-normal aria-selected:opacity-100"
        ),
        day_range_end: "day-range-end",
        day_selected:
          "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
        day_today: "bg-accent text-accent-foreground",
        day_outside:
          "day-outside text-muted-foreground aria-selected:bg-accent/50 aria-selected:text-muted-foreground",
        day_disabled: "text-muted-foreground opacity-50",
        day_range_middle:
          "aria-selected:bg-accent aria-selected:text-accent-foreground",
        day_hidden: "invisible",
        ...classNames,
      }}
      components={{
        IconLeft: ({ ...props }) => <ChevronLeft className="h-4 w-4" />,
        IconRight: ({ ...props }) => <ChevronRight className="h-4 w-4" />,
      }}
      {...props}
    />
  )
}
Calendar.displayName = "Calendar"

export { Calendar }
[V0_FILE]typescriptreact:file="components/ui/card.tsx"
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/carousel.tsx"
"use client"

import * as React from "react"
import useEmblaCarousel, {
  type UseEmblaCarouselType,
} from "embla-carousel-react"
import { ArrowLeft, ArrowRight } from "lucide-react"

import { cn } from "@/lib/utils"
import { Button } from "@/components/ui/button"

type CarouselApi = UseEmblaCarouselType[1]
type UseCarouselParameters = Parameters<typeof useEmblaCarousel>
type CarouselOptions = UseCarouselParameters[0]
type CarouselPlugin = UseCarouselParameters[1]

type CarouselProps = {
  opts?: CarouselOptions
  plugins?: CarouselPlugin
  orientation?: "horizontal" | "vertical"
  setApi?: (api: CarouselApi) => void
}

type CarouselContextProps = {
  carouselRef: ReturnType<typeof useEmblaCarousel>[0]
  api: ReturnType<typeof useEmblaCarousel>[1]
  scrollPrev: () => void
  scrollNext: () => void
  canScrollPrev: boolean
  canScrollNext: boolean
} & CarouselProps

const CarouselContext = React.createContext<CarouselContextProps | null>(null)

function useCarousel() {
  const context = React.useContext(CarouselContext)

if (!context) {
    throw new Error("useCarousel must be used within a <Carousel />")
  }

return context
}

const Carousel = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement> & CarouselProps
>(
  (
    {
      orientation = "horizontal",
      opts,
      setApi,
      plugins,
      className,
      children,
      ...props
    },
    ref
  ) => {
    const [carouselRef, api] = useEmblaCarousel(
      {
        ...opts,
        axis: orientation === "horizontal" ? "x" : "y",
      },
      plugins
    )
    const [canScrollPrev, setCanScrollPrev] = React.useState(false)
    const [canScrollNext, setCanScrollNext] = React.useState(false)

const onSelect = React.useCallback((api: CarouselApi) => {
      if (!api) {
        return
      }

setCanScrollPrev(api.canScrollPrev())
      setCanScrollNext(api.canScrollNext())
    }, [])

const scrollPrev = React.useCallback(() => {
      api?.scrollPrev()
    }, [api])

const scrollNext = React.useCallback(() => {
      api?.scrollNext()
    }, [api])

const handleKeyDown = React.useCallback(
      (event: React.KeyboardEvent<HTMLDivElement>) => {
        if (event.key === "ArrowLeft") {
          event.preventDefault()
          scrollPrev()
        } else if (event.key === "ArrowRight") {
          event.preventDefault()
          scrollNext()
        }
      },
      [scrollPrev, scrollNext]
    )

React.useEffect(() => {
      if (!api || !setApi) {
        return
      }

setApi(api)
    }, [api, setApi])

React.useEffect(() => {
      if (!api) {
        return
      }

onSelect(api)
      api.on("reInit", onSelect)
      api.on("select", onSelect)

return () => {
        api?.off("select", onSelect)
      }
    }, [api, onSelect])

return (
      <CarouselContext.Provider
        value={{
          carouselRef,
          api: api,
          opts,
          orientation:
            orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
          scrollPrev,
          scrollNext,
          canScrollPrev,
          canScrollNext,
        }}
      >
        <div
          ref={ref}
          onKeyDownCapture={handleKeyDown}
          className={cn("relative", className)}
          role="region"
          aria-roledescription="carousel"
          {...props}
        >
          {children}
        </div>
      </CarouselContext.Provider>
    )
  }
)
Carousel.displayName = "Carousel"

const CarouselContent = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => {
  const { carouselRef, orientation } = useCarousel()

return (
    <div ref={carouselRef} className="overflow-hidden">
      <div
        ref={ref}
        className={cn(
          "flex",
          orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
          className
        )}
        {...props}
      />
    </div>
  )
})
CarouselContent.displayName = "CarouselContent"

const CarouselItem = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => {
  const { orientation } = useCarousel()

return (
    <div
      ref={ref}
      role="group"
      aria-roledescription="slide"
      className={cn(
        "min-w-0 shrink-0 grow-0 basis-full",
        orientation === "horizontal" ? "pl-4" : "pt-4",
        className
      )}
      {...props}
    />
  )
})
CarouselItem.displayName = "CarouselItem"

const CarouselPrevious = React.forwardRef<
  HTMLButtonElement,
  React.ComponentProps<typeof Button>
>(({ className, variant = "outline", size = "icon", ...props }, ref) => {
  const { orientation, scrollPrev, canScrollPrev } = useCarousel()

return (
    <Button
      ref={ref}
      variant={variant}
      size={size}
      className={cn(
        "absolute  h-8 w-8 rounded-full",
        orientation === "horizontal"
          ? "-left-12 top-1/2 -translate-y-1/2"
          : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
        className
      )}
      disabled={!canScrollPrev}
      onClick={scrollPrev}
      {...props}
    >
      <ArrowLeft className="h-4 w-4" />
      <span className="sr-only">Previous slide</span>
    </Button>
  )
})
CarouselPrevious.displayName = "CarouselPrevious"

const CarouselNext = React.forwardRef<
  HTMLButtonElement,
  React.ComponentProps<typeof Button>
>(({ className, variant = "outline", size = "icon", ...props }, ref) => {
  const { orientation, scrollNext, canScrollNext } = useCarousel()

return (
    <Button
      ref={ref}
      variant={variant}
      size={size}
      className={cn(
        "absolute h-8 w-8 rounded-full",
        orientation === "horizontal"
          ? "-right-12 top-1/2 -translate-y-1/2"
          : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
        className
      )}
      disabled={!canScrollNext}
      onClick={scrollNext}
      {...props}
    >
      <ArrowRight className="h-4 w-4" />
      <span className="sr-only">Next slide</span>
    </Button>
  )
})
CarouselNext.displayName = "CarouselNext"

export {
  type CarouselApi,
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselPrevious,
  CarouselNext,
}
[V0_FILE]typescriptreact:file="components/ui/chart.tsx"
"use client"

import * as React from "react"
import * as RechartsPrimitive from "recharts"

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

// Format: { THEME_NAME: CSS_SELECTOR }
const THEMES = { light: "", dark: ".dark" } as const

export type ChartConfig = {
  [k in string]: {
    label?: React.ReactNode
    icon?: React.ComponentType
  } & (
    | { color?: string; theme?: never }
    | { color?: never; theme: Record<keyof typeof THEMES, string> }
  )
}

type ChartContextProps = {
  config: ChartConfig
}

const ChartContext = React.createContext<ChartContextProps | null>(null)

function useChart() {
  const context = React.useContext(ChartContext)

if (!context) {
    throw new Error("useChart must be used within a <ChartContainer />")
  }

return context
}

const ChartContainer = React.forwardRef<
  HTMLDivElement,
  React.ComponentProps<"div"> & {
    config: ChartConfig
    children: React.ComponentProps<
      typeof RechartsPrimitive.ResponsiveContainer
    >["children"]
  }
>(({ id, className, children, config, ...props }, ref) => {
  const uniqueId = React.useId()
  const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`

return (
    <ChartContext.Provider value={{ config }}>
      <div
        data-chart={chartId}
        ref={ref}
        className={cn(
          "flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none",
          className
        )}
        {...props}
      >
        <ChartStyle id={chartId} config={config} />
        <RechartsPrimitive.ResponsiveContainer>
          {children}
        </RechartsPrimitive.ResponsiveContainer>
      </div>
    </ChartContext.Provider>
  )
})
ChartContainer.displayName = "Chart"

const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
  const colorConfig = Object.entries(config).filter(
    ([_, config]) => config.theme || config.color
  )

if (!colorConfig.length) {
    return null
  }

return (
    <style
      dangerouslySetInnerHTML={{
        __html: Object.entries(THEMES)
          .map(
            ([theme, prefix]) => `
${prefix} [data-chart=${id}] {
${colorConfig
  .map(([key, itemConfig]) => {
    const color =
      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||
      itemConfig.color
    return color ? `  --color-${key}: ${color};` : null
  })
  .join("\n")}
}
`
          )
          .join("\n"),
      }}
    />
  )
}

const ChartTooltip = RechartsPrimitive.Tooltip

const ChartTooltipContent = React.forwardRef<
  HTMLDivElement,
  React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
    React.ComponentProps<"div"> & {
      hideLabel?: boolean
      hideIndicator?: boolean
      indicator?: "line" | "dot" | "dashed"
      nameKey?: string
      labelKey?: string
    }
>(
  (
    {
      active,
      payload,
      className,
      indicator = "dot",
      hideLabel = false,
      hideIndicator = false,
      label,
      labelFormatter,
      labelClassName,
      formatter,
      color,
      nameKey,
      labelKey,
    },
    ref
  ) => {
    const { config } = useChart()

const tooltipLabel = React.useMemo(() => {
      if (hideLabel || !payload?.length) {
        return null
      }

const [item] = payload
      const key = `${labelKey || item.dataKey || item.name || "value"}`
      const itemConfig = getPayloadConfigFromPayload(config, item, key)
      const value =
        !labelKey && typeof label === "string"
          ? config[label as keyof typeof config]?.label || label
          : itemConfig?.label

if (labelFormatter) {
        return (
          <div className={cn("font-medium", labelClassName)}>
            {labelFormatter(value, payload)}
          </div>
        )
      }

if (!value) {
        return null
      }

return <div className={cn("font-medium", labelClassName)}>{value}</div>
    }, [
      label,
      labelFormatter,
      payload,
      hideLabel,
      labelClassName,
      config,
      labelKey,
    ])

if (!active || !payload?.length) {
      return null
    }

const nestLabel = payload.length === 1 && indicator !== "dot"

return (
      <div
        ref={ref}
        className={cn(
          "grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl",
          className
        )}
      >
        {!nestLabel ? tooltipLabel : null}
        <div className="grid gap-1.5">
          {payload.map((item, index) => {
            const key = `${nameKey || item.name || item.dataKey || "value"}`
            const itemConfig = getPayloadConfigFromPayload(config, item, key)
            const indicatorColor = color || item.payload.fill || item.color

return (
              <div
                key={item.dataKey}
                className={cn(
                  "flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground",
                  indicator === "dot" && "items-center"
                )}
              >
                {formatter && item?.value !== undefined && item.name ? (
                  formatter(item.value, item.name, item, index, item.payload)
                ) : (
                  <>
                    {itemConfig?.icon ? (
                      <itemConfig.icon />
                    ) : (
                      !hideIndicator && (
                        <div
                          className={cn(
                            "shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]",
                            {
                              "h-2.5 w-2.5": indicator === "dot",
                              "w-1": indicator === "line",
                              "w-0 border-[1.5px] border-dashed bg-transparent":
                                indicator === "dashed",
                              "my-0.5": nestLabel && indicator === "dashed",
                            }
                          )}
                          style={
                            {
                              "--color-bg": indicatorColor,
                              "--color-border": indicatorColor,
                            } as React.CSSProperties
                          }
                        />
                      )
                    )}
                    <div
                      className={cn(
                        "flex flex-1 justify-between leading-none",
                        nestLabel ? "items-end" : "items-center"
                      )}
                    >
                      <div className="grid gap-1.5">
                        {nestLabel ? tooltipLabel : null}
                        <span className="text-muted-foreground">
                          {itemConfig?.label || item.name}
                        </span>
                      </div>
                      {item.value && (
                        <span className="font-mono font-medium tabular-nums text-foreground">
                          {item.value.toLocaleString()}
                        </span>
                      )}
                    </div>
                  </>
                )}
              </div>
            )
          })}
        </div>
      </div>
    )
  }
)
ChartTooltipContent.displayName = "ChartTooltip"

const ChartLegend = RechartsPrimitive.Legend

const ChartLegendContent = React.forwardRef<
  HTMLDivElement,
  React.ComponentProps<"div"> &
    Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & {
      hideIcon?: boolean
      nameKey?: string
    }
>(
  (
    { className, hideIcon = false, payload, verticalAlign = "bottom", nameKey },
    ref
  ) => {
    const { config } = useChart()

if (!payload?.length) {
      return null
    }

return (
      <div
        ref={ref}
        className={cn(
          "flex items-center justify-center gap-4",
          verticalAlign === "top" ? "pb-3" : "pt-3",
          className
        )}
      >
        {payload.map((item) => {
          const key = `${nameKey || item.dataKey || "value"}`
          const itemConfig = getPayloadConfigFromPayload(config, item, key)

return (
            <div
              key={item.value}
              className={cn(
                "flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground"
              )}
            >
              {itemConfig?.icon && !hideIcon ? (
                <itemConfig.icon />
              ) : (
                <div
                  className="h-2 w-2 shrink-0 rounded-[2px]"
                  style={{
                    backgroundColor: item.color,
                  }}
                />
              )}
              {itemConfig?.label}
            </div>
          )
        })}
      </div>
    )
  }
)
ChartLegendContent.displayName = "ChartLegend"

// Helper to extract item config from a payload.
function getPayloadConfigFromPayload(
  config: ChartConfig,
  payload: unknown,
  key: string
) {
  if (typeof payload !== "object" || payload === null) {
    return undefined
  }

const payloadPayload =
    "payload" in payload &&
    typeof payload.payload === "object" &&
    payload.payload !== null
      ? payload.payload
      : undefined

let configLabelKey: string = key

if (
    key in payload &&
    typeof payload[key as keyof typeof payload] === "string"
  ) {
    configLabelKey = payload[key as keyof typeof payload] as string
  } else if (
    payloadPayload &&
    key in payloadPayload &&
    typeof payloadPayload[key as keyof typeof payloadPayload] === "string"
  ) {
    configLabelKey = payloadPayload[
      key as keyof typeof payloadPayload
    ] as string
  }

return configLabelKey in config
    ? config[configLabelKey]
    : config[key as keyof typeof config]
}

export {
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
  ChartLegend,
  ChartLegendContent,
  ChartStyle,
}
[V0_FILE]typescriptreact:file="components/ui/checkbox.tsx"
"use client"

import * as React from "react"
import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
import { Check } from "lucide-react"

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

const Checkbox = React.forwardRef<
  React.ElementRef<typeof CheckboxPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
>(({ className, ...props }, ref) => (
  <CheckboxPrimitive.Root
    ref={ref}
    className={cn(
      "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
      className
    )}
    {...props}
  >
    <CheckboxPrimitive.Indicator
      className={cn("flex items-center justify-center text-current")}
    >
      <Check className="h-4 w-4" />
    </CheckboxPrimitive.Indicator>
  </CheckboxPrimitive.Root>
))
Checkbox.displayName = CheckboxPrimitive.Root.displayName

export { Checkbox }
[V0_FILE]typescriptreact:file="components/ui/collapsible.tsx"
"use client"

import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"

const Collapsible = CollapsiblePrimitive.Root

const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger

const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent

export { Collapsible, CollapsibleTrigger, CollapsibleContent }
[V0_FILE]typescriptreact:file="components/ui/command.tsx"
"use client"

import * as React from "react"
import { type DialogProps } from "@radix-ui/react-dialog"
import { Command as CommandPrimitive } from "cmdk"
import { Search } from "lucide-react"

import { cn } from "@/lib/utils"
import { Dialog, DialogContent } from "@/components/ui/dialog"

const Command = React.forwardRef<
  React.ElementRef<typeof CommandPrimitive>,
  React.ComponentPropsWithoutRef<typeof CommandPrimitive>
>(({ className, ...props }, ref) => (
  <CommandPrimitive
    ref={ref}
    className={cn(
      "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
      className
    )}
    {...props}
  />
))
Command.displayName = CommandPrimitive.displayName

const CommandDialog = ({ children, ...props }: DialogProps) => {
  return (
    <Dialog {...props}>
      <DialogContent className="overflow-hidden p-0 shadow-lg">
        <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
          {children}
        </Command>
      </DialogContent>
    </Dialog>
  )
}

const CommandInput = React.forwardRef<
  React.ElementRef<typeof CommandPrimitive.Input>,
  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
>(({ className, ...props }, ref) => (
  <div className="flex items-center border-b px-3" cmdk-input-wrapper="">
    <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
    <CommandPrimitive.Input
      ref={ref}
      className={cn(
        "flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
        className
      )}
      {...props}
    />
  </div>
))

CommandInput.displayName = CommandPrimitive.Input.displayName

const CommandList = React.forwardRef<
  React.ElementRef<typeof CommandPrimitive.List>,
  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
>(({ className, ...props }, ref) => (
  <CommandPrimitive.List
    ref={ref}
    className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
    {...props}
  />
))

CommandList.displayName = CommandPrimitive.List.displayName

const CommandEmpty = React.forwardRef<
  React.ElementRef<typeof CommandPrimitive.Empty>,
  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
>((props, ref) => (
  <CommandPrimitive.Empty
    ref={ref}
    className="py-6 text-center text-sm"
    {...props}
  />
))

CommandEmpty.displayName = CommandPrimitive.Empty.displayName

const CommandGroup = React.forwardRef<
  React.ElementRef<typeof CommandPrimitive.Group>,
  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
>(({ className, ...props }, ref) => (
  <CommandPrimitive.Group
    ref={ref}
    className={cn(
      "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
      className
    )}
    {...props}
  />
))

CommandGroup.displayName = CommandPrimitive.Group.displayName

const CommandSeparator = React.forwardRef<
  React.ElementRef<typeof CommandPrimitive.Separator>,
  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
>(({ className, ...props }, ref) => (
  <CommandPrimitive.Separator
    ref={ref}
    className={cn("-mx-1 h-px bg-border", className)}
    {...props}
  />
))
CommandSeparator.displayName = CommandPrimitive.Separator.displayName

const CommandItem = React.forwardRef<
  React.ElementRef<typeof CommandPrimitive.Item>,
  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
>(({ className, ...props }, ref) => (
  <CommandPrimitive.Item
    ref={ref}
    className={cn(
      "relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected='true']:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
      className
    )}
    {...props}
  />
))

CommandItem.displayName = CommandPrimitive.Item.displayName

const CommandShortcut = ({
  className,
  ...props
}: React.HTMLAttributes<HTMLSpanElement>) => {
  return (
    <span
      className={cn(
        "ml-auto text-xs tracking-widest text-muted-foreground",
        className
      )}
      {...props}
    />
  )
}
CommandShortcut.displayName = "CommandShortcut"

export {
  Command,
  CommandDialog,
  CommandInput,
  CommandList,
  CommandEmpty,
  CommandGroup,
  CommandItem,
  CommandShortcut,
  CommandSeparator,
}
[V0_FILE]typescriptreact:file="components/ui/context-menu.tsx"
"use client"

import * as React from "react"
import * as ContextMenuPrimitive from "@radix-ui/react-context-menu"
import { Check, ChevronRight, Circle } from "lucide-react"

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

const ContextMenu = ContextMenuPrimitive.Root

const ContextMenuTrigger = ContextMenuPrimitive.Trigger

const ContextMenuGroup = ContextMenuPrimitive.Group

const ContextMenuPortal = ContextMenuPrimitive.Portal

const ContextMenuSub = ContextMenuPrimitive.Sub

const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup

const ContextMenuSubTrigger = React.forwardRef<
  React.ElementRef<typeof ContextMenuPrimitive.SubTrigger>,
  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubTrigger> & {
    inset?: boolean
  }
>(({ className, inset, children, ...props }, ref) => (
  <ContextMenuPrimitive.SubTrigger
    ref={ref}
    className={cn(
      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
      inset && "pl-8",
      className
    )}
    {...props}
  >
    {children}
    <ChevronRight className="ml-auto h-4 w-4" />
  </ContextMenuPrimitive.SubTrigger>
))
ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName

const ContextMenuSubContent = React.forwardRef<
  React.ElementRef<typeof ContextMenuPrimitive.SubContent>,
  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubContent>
>(({ className, ...props }, ref) => (
  <ContextMenuPrimitive.SubContent
    ref={ref}
    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}
  />
))
ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName

const ContextMenuContent = React.forwardRef<
  React.ElementRef<typeof ContextMenuPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content>
>(({ className, ...props }, ref) => (
  <ContextMenuPrimitive.Portal>
    <ContextMenuPrimitive.Content
      ref={ref}
      className={cn(
        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in fade-in-80 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}
    />
  </ContextMenuPrimitive.Portal>
))
ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName

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

const ContextMenuCheckboxItem = React.forwardRef<
  React.ElementRef<typeof ContextMenuPrimitive.CheckboxItem>,
  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.CheckboxItem>
>(({ className, children, checked, ...props }, ref) => (
  <ContextMenuPrimitive.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 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">
      <ContextMenuPrimitive.ItemIndicator>
        <Check className="h-4 w-4" />
      </ContextMenuPrimitive.ItemIndicator>
    </span>
    {children}
  </ContextMenuPrimitive.CheckboxItem>
))
ContextMenuCheckboxItem.displayName =
  ContextMenuPrimitive.CheckboxItem.displayName

const ContextMenuRadioItem = React.forwardRef<
  React.ElementRef<typeof ContextMenuPrimitive.RadioItem>,
  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.RadioItem>
>(({ className, children, ...props }, ref) => (
  <ContextMenuPrimitive.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 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">
      <ContextMenuPrimitive.ItemIndicator>
        <Circle className="h-2 w-2 fill-current" />
      </ContextMenuPrimitive.ItemIndicator>
    </span>
    {children}
  </ContextMenuPrimitive.RadioItem>
))
ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName

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

const ContextMenuSeparator = React.forwardRef<
  React.ElementRef<typeof ContextMenuPrimitive.Separator>,
  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Separator>
>(({ className, ...props }, ref) => (
  <ContextMenuPrimitive.Separator
    ref={ref}
    className={cn("-mx-1 my-1 h-px bg-border", className)}
    {...props}
  />
))
ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName

const ContextMenuShortcut = ({
  className,
  ...props
}: React.HTMLAttributes<HTMLSpanElement>) => {
  return (
    <span
      className={cn(
        "ml-auto text-xs tracking-widest text-muted-foreground",
        className
      )}
      {...props}
    />
  )
}
ContextMenuShortcut.displayName = "ContextMenuShortcut"

export {
  ContextMenu,
  ContextMenuTrigger,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuCheckboxItem,
  ContextMenuRadioItem,
  ContextMenuLabel,
  ContextMenuSeparator,
  ContextMenuShortcut,
  ContextMenuGroup,
  ContextMenuPortal,
  ContextMenuSub,
  ContextMenuSubContent,
  ContextMenuSubTrigger,
  ContextMenuRadioGroup,
}
[V0_FILE]typescriptreact:file="components/ui/dialog.tsx"
"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/drawer.tsx"
"use client"

import * as React from "react"
import { Drawer as DrawerPrimitive } from "vaul"

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

const Drawer = ({
  shouldScaleBackground = true,
  ...props
}: React.ComponentProps<typeof DrawerPrimitive.Root>) => (
  <DrawerPrimitive.Root
    shouldScaleBackground={shouldScaleBackground}
    {...props}
  />
)
Drawer.displayName = "Drawer"

const DrawerTrigger = DrawerPrimitive.Trigger

const DrawerPortal = DrawerPrimitive.Portal

const DrawerClose = DrawerPrimitive.Close

const DrawerOverlay = React.forwardRef<
  React.ElementRef<typeof DrawerPrimitive.Overlay>,
  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay>
>(({ className, ...props }, ref) => (
  <DrawerPrimitive.Overlay
    ref={ref}
    className={cn("fixed inset-0 z-50 bg-black/80", className)}
    {...props}
  />
))
DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName

const DrawerContent = React.forwardRef<
  React.ElementRef<typeof DrawerPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content>
>(({ className, children, ...props }, ref) => (
  <DrawerPortal>
    <DrawerOverlay />
    <DrawerPrimitive.Content
      ref={ref}
      className={cn(
        "fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background",
        className
      )}
      {...props}
    >
      <div className="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" />
      {children}
    </DrawerPrimitive.Content>
  </DrawerPortal>
))
DrawerContent.displayName = "DrawerContent"

const DrawerHeader = ({
  className,
  ...props
}: React.HTMLAttributes<HTMLDivElement>) => (
  <div
    className={cn("grid gap-1.5 p-4 text-center sm:text-left", className)}
    {...props}
  />
)
DrawerHeader.displayName = "DrawerHeader"

const DrawerFooter = ({
  className,
  ...props
}: React.HTMLAttributes<HTMLDivElement>) => (
  <div
    className={cn("mt-auto flex flex-col gap-2 p-4", className)}
    {...props}
  />
)
DrawerFooter.displayName = "DrawerFooter"

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

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

export {
  Drawer,
  DrawerPortal,
  DrawerOverlay,
  DrawerTrigger,
  DrawerClose,
  DrawerContent,
  DrawerHeader,
  DrawerFooter,
  DrawerTitle,
  DrawerDescription,
}
[V0_FILE]typescriptreact:file="components/ui/dropdown-menu.tsx"
"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/form.tsx"
"use client"

import * as React from "react"
import * as LabelPrimitive from "@radix-ui/react-label"
import { Slot } from "@radix-ui/react-slot"
import {
  Controller,
  ControllerProps,
  FieldPath,
  FieldValues,
  FormProvider,
  useFormContext,
} from "react-hook-form"

import { cn } from "@/lib/utils"
import { Label } from "@/components/ui/label"

const Form = FormProvider

type FormFieldContextValue<
  TFieldValues extends FieldValues = FieldValues,
  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
> = {
  name: TName
}

const FormFieldContext = React.createContext<FormFieldContextValue>(
  {} as FormFieldContextValue
)

const FormField = <
  TFieldValues extends FieldValues = FieldValues,
  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
>({
  ...props
}: ControllerProps<TFieldValues, TName>) => {
  return (
    <FormFieldContext.Provider value={{ name: props.name }}>
      <Controller {...props} />
    </FormFieldContext.Provider>
  )
}

const useFormField = () => {
  const fieldContext = React.useContext(FormFieldContext)
  const itemContext = React.useContext(FormItemContext)
  const { getFieldState, formState } = useFormContext()

const fieldState = getFieldState(fieldContext.name, formState)

if (!fieldContext) {
    throw new Error("useFormField should be used within <FormField>")
  }

const { id } = itemContext

return {
    id,
    name: fieldContext.name,
    formItemId: `${id}-form-item`,
    formDescriptionId: `${id}-form-item-description`,
    formMessageId: `${id}-form-item-message`,
    ...fieldState,
  }
}

type FormItemContextValue = {
  id: string
}

const FormItemContext = React.createContext<FormItemContextValue>(
  {} as FormItemContextValue
)

const FormItem = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => {
  const id = React.useId()

return (
    <FormItemContext.Provider value={{ id }}>
      <div ref={ref} className={cn("space-y-2", className)} {...props} />
    </FormItemContext.Provider>
  )
})
FormItem.displayName = "FormItem"

const FormLabel = React.forwardRef<
  React.ElementRef<typeof LabelPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
>(({ className, ...props }, ref) => {
  const { error, formItemId } = useFormField()

return (
    <Label
      ref={ref}
      className={cn(error && "text-destructive", className)}
      htmlFor={formItemId}
      {...props}
    />
  )
})
FormLabel.displayName = "FormLabel"

const FormControl = React.forwardRef<
  React.ElementRef<typeof Slot>,
  React.ComponentPropsWithoutRef<typeof Slot>
>(({ ...props }, ref) => {
  const { error, formItemId, formDescriptionId, formMessageId } = useFormField()

return (
    <Slot
      ref={ref}
      id={formItemId}
      aria-describedby={
        !error
          ? `${formDescriptionId}`
          : `${formDescriptionId} ${formMessageId}`
      }
      aria-invalid={!!error}
      {...props}
    />
  )
})
FormControl.displayName = "FormControl"

const FormDescription = React.forwardRef<
  HTMLParagraphElement,
  React.HTMLAttributes<HTMLParagraphElement>
>(({ className, ...props }, ref) => {
  const { formDescriptionId } = useFormField()

return (
    <p
      ref={ref}
      id={formDescriptionId}
      className={cn("text-sm text-muted-foreground", className)}
      {...props}
    />
  )
})
FormDescription.displayName = "FormDescription"

const FormMessage = React.forwardRef<
  HTMLParagraphElement,
  React.HTMLAttributes<HTMLParagraphElement>
>(({ className, children, ...props }, ref) => {
  const { error, formMessageId } = useFormField()
  const body = error ? String(error?.message) : children

if (!body) {
    return null
  }

return (
    <p
      ref={ref}
      id={formMessageId}
      className={cn("text-sm font-medium text-destructive", className)}
      {...props}
    >
      {body}
    </p>
  )
})
FormMessage.displayName = "FormMessage"

export {
  useFormField,
  Form,
  FormItem,
  FormLabel,
  FormControl,
  FormDescription,
  FormMessage,
  FormField,
}
[V0_FILE]typescriptreact:file="components/ui/hover-card.tsx"
"use client"

import * as React from "react"
import * as HoverCardPrimitive from "@radix-ui/react-hover-card"

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

const HoverCard = HoverCardPrimitive.Root

const HoverCardTrigger = HoverCardPrimitive.Trigger

const HoverCardContent = React.forwardRef<
  React.ElementRef<typeof HoverCardPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>
>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
  <HoverCardPrimitive.Content
    ref={ref}
    align={align}
    sideOffset={sideOffset}
    className={cn(
      "z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none 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}
  />
))
HoverCardContent.displayName = HoverCardPrimitive.Content.displayName

export { HoverCard, HoverCardTrigger, HoverCardContent }
[V0_FILE]typescriptreact:file="components/ui/input-otp.tsx"
"use client"

import * as React from "react"
import { OTPInput, OTPInputContext } from "input-otp"
import { Dot } from "lucide-react"

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

const InputOTP = React.forwardRef<
  React.ElementRef<typeof OTPInput>,
  React.ComponentPropsWithoutRef<typeof OTPInput>
>(({ className, containerClassName, ...props }, ref) => (
  <OTPInput
    ref={ref}
    containerClassName={cn(
      "flex items-center gap-2 has-[:disabled]:opacity-50",
      containerClassName
    )}
    className={cn("disabled:cursor-not-allowed", className)}
    {...props}
  />
))
InputOTP.displayName = "InputOTP"

const InputOTPGroup = React.forwardRef<
  React.ElementRef<"div">,
  React.ComponentPropsWithoutRef<"div">
>(({ className, ...props }, ref) => (
  <div ref={ref} className={cn("flex items-center", className)} {...props} />
))
InputOTPGroup.displayName = "InputOTPGroup"

const InputOTPSlot = React.forwardRef<
  React.ElementRef<"div">,
  React.ComponentPropsWithoutRef<"div"> & { index: number }
>(({ index, className, ...props }, ref) => {
  const inputOTPContext = React.useContext(OTPInputContext)
  const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index]

return (
    <div
      ref={ref}
      className={cn(
        "relative flex h-10 w-10 items-center justify-center border-y border-r border-input text-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md",
        isActive && "z-10 ring-2 ring-ring ring-offset-background",
        className
      )}
      {...props}
    >
      {char}
      {hasFakeCaret && (
        <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
          <div className="h-4 w-px animate-caret-blink bg-foreground duration-1000" />
        </div>
      )}
    </div>
  )
})
InputOTPSlot.displayName = "InputOTPSlot"

const InputOTPSeparator = React.forwardRef<
  React.ElementRef<"div">,
  React.ComponentPropsWithoutRef<"div">
>(({ ...props }, ref) => (
  <div ref={ref} role="separator" {...props}>
    <Dot />
  </div>
))
InputOTPSeparator.displayName = "InputOTPSeparator"

export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }
[V0_FILE]typescriptreact:file="components/ui/input.tsx"
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"
"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/menubar.tsx"
"use client"

import * as React from "react"
import * as MenubarPrimitive from "@radix-ui/react-menubar"
import { Check, ChevronRight, Circle } from "lucide-react"

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

const MenubarMenu = MenubarPrimitive.Menu

const MenubarGroup = MenubarPrimitive.Group

const MenubarPortal = MenubarPrimitive.Portal

const MenubarSub = MenubarPrimitive.Sub

const MenubarRadioGroup = MenubarPrimitive.RadioGroup

const Menubar = React.forwardRef<
  React.ElementRef<typeof MenubarPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Root>
>(({ className, ...props }, ref) => (
  <MenubarPrimitive.Root
    ref={ref}
    className={cn(
      "flex h-10 items-center space-x-1 rounded-md border bg-background p-1",
      className
    )}
    {...props}
  />
))
Menubar.displayName = MenubarPrimitive.Root.displayName

const MenubarTrigger = React.forwardRef<
  React.ElementRef<typeof MenubarPrimitive.Trigger>,
  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Trigger>
>(({ className, ...props }, ref) => (
  <MenubarPrimitive.Trigger
    ref={ref}
    className={cn(
      "flex cursor-default select-none items-center rounded-sm px-3 py-1.5 text-sm font-medium outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
      className
    )}
    {...props}
  />
))
MenubarTrigger.displayName = MenubarPrimitive.Trigger.displayName

const MenubarSubTrigger = React.forwardRef<
  React.ElementRef<typeof MenubarPrimitive.SubTrigger>,
  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubTrigger> & {
    inset?: boolean
  }
>(({ className, inset, children, ...props }, ref) => (
  <MenubarPrimitive.SubTrigger
    ref={ref}
    className={cn(
      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
      inset && "pl-8",
      className
    )}
    {...props}
  >
    {children}
    <ChevronRight className="ml-auto h-4 w-4" />
  </MenubarPrimitive.SubTrigger>
))
MenubarSubTrigger.displayName = MenubarPrimitive.SubTrigger.displayName

const MenubarSubContent = React.forwardRef<
  React.ElementRef<typeof MenubarPrimitive.SubContent>,
  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubContent>
>(({ className, ...props }, ref) => (
  <MenubarPrimitive.SubContent
    ref={ref}
    className={cn(
      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground 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}
  />
))
MenubarSubContent.displayName = MenubarPrimitive.SubContent.displayName

const MenubarContent = React.forwardRef<
  React.ElementRef<typeof MenubarPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Content>
>(
  (
    { className, align = "start", alignOffset = -4, sideOffset = 8, ...props },
    ref
  ) => (
    <MenubarPrimitive.Portal>
      <MenubarPrimitive.Content
        ref={ref}
        align={align}
        alignOffset={alignOffset}
        sideOffset={sideOffset}
        className={cn(
          "z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in 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}
      />
    </MenubarPrimitive.Portal>
  )
)
MenubarContent.displayName = MenubarPrimitive.Content.displayName

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

const MenubarCheckboxItem = React.forwardRef<
  React.ElementRef<typeof MenubarPrimitive.CheckboxItem>,
  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.CheckboxItem>
>(({ className, children, checked, ...props }, ref) => (
  <MenubarPrimitive.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 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">
      <MenubarPrimitive.ItemIndicator>
        <Check className="h-4 w-4" />
      </MenubarPrimitive.ItemIndicator>
    </span>
    {children}
  </MenubarPrimitive.CheckboxItem>
))
MenubarCheckboxItem.displayName = MenubarPrimitive.CheckboxItem.displayName

const MenubarRadioItem = React.forwardRef<
  React.ElementRef<typeof MenubarPrimitive.RadioItem>,
  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.RadioItem>
>(({ className, children, ...props }, ref) => (
  <MenubarPrimitive.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 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">
      <MenubarPrimitive.ItemIndicator>
        <Circle className="h-2 w-2 fill-current" />
      </MenubarPrimitive.ItemIndicator>
    </span>
    {children}
  </MenubarPrimitive.RadioItem>
))
MenubarRadioItem.displayName = MenubarPrimitive.RadioItem.displayName

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

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

const MenubarShortcut = ({
  className,
  ...props
}: React.HTMLAttributes<HTMLSpanElement>) => {
  return (
    <span
      className={cn(
        "ml-auto text-xs tracking-widest text-muted-foreground",
        className
      )}
      {...props}
    />
  )
}
MenubarShortcut.displayname = "MenubarShortcut"

export {
  Menubar,
  MenubarMenu,
  MenubarTrigger,
  MenubarContent,
  MenubarItem,
  MenubarSeparator,
  MenubarLabel,
  MenubarCheckboxItem,
  MenubarRadioGroup,
  MenubarRadioItem,
  MenubarPortal,
  MenubarSubContent,
  MenubarSubTrigger,
  MenubarGroup,
  MenubarSub,
  MenubarShortcut,
}
[V0_FILE]typescriptreact:file="components/ui/navigation-menu.tsx"
import * as React from "react"
import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu"
import { cva } from "class-variance-authority"
import { ChevronDown } from "lucide-react"

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

const NavigationMenu = React.forwardRef<
  React.ElementRef<typeof NavigationMenuPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Root>
>(({ className, children, ...props }, ref) => (
  <NavigationMenuPrimitive.Root
    ref={ref}
    className={cn(
      "relative z-10 flex max-w-max flex-1 items-center justify-center",
      className
    )}
    {...props}
  >
    {children}
    <NavigationMenuViewport />
  </NavigationMenuPrimitive.Root>
))
NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName

const NavigationMenuList = React.forwardRef<
  React.ElementRef<typeof NavigationMenuPrimitive.List>,
  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.List>
>(({ className, ...props }, ref) => (
  <NavigationMenuPrimitive.List
    ref={ref}
    className={cn(
      "group flex flex-1 list-none items-center justify-center space-x-1",
      className
    )}
    {...props}
  />
))
NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName

const NavigationMenuItem = NavigationMenuPrimitive.Item

const navigationMenuTriggerStyle = cva(
  "group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50"
)

const NavigationMenuTrigger = React.forwardRef<
  React.ElementRef<typeof NavigationMenuPrimitive.Trigger>,
  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Trigger>
>(({ className, children, ...props }, ref) => (
  <NavigationMenuPrimitive.Trigger
    ref={ref}
    className={cn(navigationMenuTriggerStyle(), "group", className)}
    {...props}
  >
    {children}{" "}
    <ChevronDown
      className="relative top-[1px] ml-1 h-3 w-3 transition duration-200 group-data-[state=open]:rotate-180"
      aria-hidden="true"
    />
  </NavigationMenuPrimitive.Trigger>
))
NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName

const NavigationMenuContent = React.forwardRef<
  React.ElementRef<typeof NavigationMenuPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Content>
>(({ className, ...props }, ref) => (
  <NavigationMenuPrimitive.Content
    ref={ref}
    className={cn(
      "left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto ",
      className
    )}
    {...props}
  />
))
NavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName

const NavigationMenuLink = NavigationMenuPrimitive.Link

const NavigationMenuViewport = React.forwardRef<
  React.ElementRef<typeof NavigationMenuPrimitive.Viewport>,
  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Viewport>
>(({ className, ...props }, ref) => (
  <div className={cn("absolute left-0 top-full flex justify-center")}>
    <NavigationMenuPrimitive.Viewport
      className={cn(
        "origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]",
        className
      )}
      ref={ref}
      {...props}
    />
  </div>
))
NavigationMenuViewport.displayName =
  NavigationMenuPrimitive.Viewport.displayName

const NavigationMenuIndicator = React.forwardRef<
  React.ElementRef<typeof NavigationMenuPrimitive.Indicator>,
  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Indicator>
>(({ className, ...props }, ref) => (
  <NavigationMenuPrimitive.Indicator
    ref={ref}
    className={cn(
      "top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in",
      className
    )}
    {...props}
  >
    <div className="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" />
  </NavigationMenuPrimitive.Indicator>
))
NavigationMenuIndicator.displayName =
  NavigationMenuPrimitive.Indicator.displayName

export {
  navigationMenuTriggerStyle,
  NavigationMenu,
  NavigationMenuList,
  NavigationMenuItem,
  NavigationMenuContent,
  NavigationMenuTrigger,
  NavigationMenuLink,
  NavigationMenuIndicator,
  NavigationMenuViewport,
}
[V0_FILE]typescriptreact:file="components/ui/pagination.tsx"
import * as React from "react"
import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react"

import { cn } from "@/lib/utils"
import { ButtonProps, buttonVariants } from "@/components/ui/button"

const Pagination = ({ className, ...props }: React.ComponentProps<"nav">) => (
  <nav
    role="navigation"
    aria-label="pagination"
    className={cn("mx-auto flex w-full justify-center", className)}
    {...props}
  />
)
Pagination.displayName = "Pagination"

const PaginationContent = React.forwardRef<
  HTMLUListElement,
  React.ComponentProps<"ul">
>(({ className, ...props }, ref) => (
  <ul
    ref={ref}
    className={cn("flex flex-row items-center gap-1", className)}
    {...props}
  />
))
PaginationContent.displayName = "PaginationContent"

const PaginationItem = React.forwardRef<
  HTMLLIElement,
  React.ComponentProps<"li">
>(({ className, ...props }, ref) => (
  <li ref={ref} className={cn("", className)} {...props} />
))
PaginationItem.displayName = "PaginationItem"

type PaginationLinkProps = {
  isActive?: boolean
} & Pick<ButtonProps, "size"> &
  React.ComponentProps<"a">

const PaginationLink = ({
  className,
  isActive,
  size = "icon",
  ...props
}: PaginationLinkProps) => (
  <a
    aria-current={isActive ? "page" : undefined}
    className={cn(
      buttonVariants({
        variant: isActive ? "outline" : "ghost",
        size,
      }),
      className
    )}
    {...props}
  />
)
PaginationLink.displayName = "PaginationLink"

const PaginationPrevious = ({
  className,
  ...props
}: React.ComponentProps<typeof PaginationLink>) => (
  <PaginationLink
    aria-label="Go to previous page"
    size="default"
    className={cn("gap-1 pl-2.5", className)}
    {...props}
  >
    <ChevronLeft className="h-4 w-4" />
    <span>Previous</span>
  </PaginationLink>
)
PaginationPrevious.displayName = "PaginationPrevious"

const PaginationNext = ({
  className,
  ...props
}: React.ComponentProps<typeof PaginationLink>) => (
  <PaginationLink
    aria-label="Go to next page"
    size="default"
    className={cn("gap-1 pr-2.5", className)}
    {...props}
  >
    <span>Next</span>
    <ChevronRight className="h-4 w-4" />
  </PaginationLink>
)
PaginationNext.displayName = "PaginationNext"

const PaginationEllipsis = ({
  className,
  ...props
}: React.ComponentProps<"span">) => (
  <span
    aria-hidden
    className={cn("flex h-9 w-9 items-center justify-center", className)}
    {...props}
  >
    <MoreHorizontal className="h-4 w-4" />
    <span className="sr-only">More pages</span>
  </span>
)
PaginationEllipsis.displayName = "PaginationEllipsis"

export {
  Pagination,
  PaginationContent,
  PaginationEllipsis,
  PaginationItem,
  PaginationLink,
  PaginationNext,
  PaginationPrevious,
}
[V0_FILE]typescriptreact:file="components/ui/popover.tsx"
"use client"

import * as React from "react"
import * as PopoverPrimitive from "@radix-ui/react-popover"

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

const Popover = PopoverPrimitive.Root

const PopoverTrigger = PopoverPrimitive.Trigger

const PopoverContent = React.forwardRef<
  React.ElementRef<typeof PopoverPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
  <PopoverPrimitive.Portal>
    <PopoverPrimitive.Content
      ref={ref}
      align={align}
      sideOffset={sideOffset}
      className={cn(
        "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none 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}
    />
  </PopoverPrimitive.Portal>
))
PopoverContent.displayName = PopoverPrimitive.Content.displayName

export { Popover, PopoverTrigger, PopoverContent }
[V0_FILE]typescriptreact:file="components/ui/progress.tsx"
"use client"

import * as React from "react"
import * as ProgressPrimitive from "@radix-ui/react-progress"

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

const Progress = React.forwardRef<
  React.ElementRef<typeof ProgressPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>
>(({ className, value, ...props }, ref) => (
  <ProgressPrimitive.Root
    ref={ref}
    className={cn(
      "relative h-4 w-full overflow-hidden rounded-full bg-secondary",
      className
    )}
    {...props}
  >
    <ProgressPrimitive.Indicator
      className="h-full w-full flex-1 bg-primary transition-all"
      style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
    />
  </ProgressPrimitive.Root>
))
Progress.displayName = ProgressPrimitive.Root.displayName

export { Progress }
[V0_FILE]typescriptreact:file="components/ui/radio-group.tsx"
"use client"

import * as React from "react"
import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
import { Circle } from "lucide-react"

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

const RadioGroup = React.forwardRef<
  React.ElementRef<typeof RadioGroupPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
>(({ className, ...props }, ref) => {
  return (
    <RadioGroupPrimitive.Root
      className={cn("grid gap-2", className)}
      {...props}
      ref={ref}
    />
  )
})
RadioGroup.displayName = RadioGroupPrimitive.Root.displayName

const RadioGroupItem = React.forwardRef<
  React.ElementRef<typeof RadioGroupPrimitive.Item>,
  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
>(({ className, ...props }, ref) => {
  return (
    <RadioGroupPrimitive.Item
      ref={ref}
      className={cn(
        "aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
        className
      )}
      {...props}
    >
      <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
        <Circle className="h-2.5 w-2.5 fill-current text-current" />
      </RadioGroupPrimitive.Indicator>
    </RadioGroupPrimitive.Item>
  )
})
RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName

export { RadioGroup, RadioGroupItem }
[V0_FILE]typescriptreact:file="components/ui/resizable.tsx"
"use client"

import { GripVertical } from "lucide-react"
import * as ResizablePrimitive from "react-resizable-panels"

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

const ResizablePanelGroup = ({
  className,
  ...props
}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) => (
  <ResizablePrimitive.PanelGroup
    className={cn(
      "flex h-full w-full data-[panel-group-direction=vertical]:flex-col",
      className
    )}
    {...props}
  />
)

const ResizablePanel = ResizablePrimitive.Panel

const ResizableHandle = ({
  withHandle,
  className,
  ...props
}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
  withHandle?: boolean
}) => (
  <ResizablePrimitive.PanelResizeHandle
    className={cn(
      "relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90",
      className
    )}
    {...props}
  >
    {withHandle && (
      <div className="z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border">
        <GripVertical className="h-2.5 w-2.5" />
      </div>
    )}
  </ResizablePrimitive.PanelResizeHandle>
)

export { ResizablePanelGroup, ResizablePanel, ResizableHandle }
[V0_FILE]typescriptreact:file="components/ui/scroll-area.tsx"
"use client"

import * as React from "react"
import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"

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

const ScrollArea = React.forwardRef<
  React.ElementRef<typeof ScrollAreaPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
>(({ className, children, ...props }, ref) => (
  <ScrollAreaPrimitive.Root
    ref={ref}
    className={cn("relative overflow-hidden", className)}
    {...props}
  >
    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
      {children}
    </ScrollAreaPrimitive.Viewport>
    <ScrollBar />
    <ScrollAreaPrimitive.Corner />
  </ScrollAreaPrimitive.Root>
))
ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName

const ScrollBar = React.forwardRef<
  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
>(({ className, orientation = "vertical", ...props }, ref) => (
  <ScrollAreaPrimitive.ScrollAreaScrollbar
    ref={ref}
    orientation={orientation}
    className={cn(
      "flex touch-none select-none transition-colors",
      orientation === "vertical" &&
        "h-full w-2.5 border-l border-l-transparent p-[1px]",
      orientation === "horizontal" &&
        "h-2.5 flex-col border-t border-t-transparent p-[1px]",
      className
    )}
    {...props}
  >
    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
  </ScrollAreaPrimitive.ScrollAreaScrollbar>
))
ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName

export { ScrollArea, ScrollBar }
[V0_FILE]typescriptreact:file="components/ui/select.tsx"
"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/separator.tsx"
"use client"

import * as React from "react"
import * as SeparatorPrimitive from "@radix-ui/react-separator"

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

const Separator = React.forwardRef<
  React.ElementRef<typeof SeparatorPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
>(
  (
    { className, orientation = "horizontal", decorative = true, ...props },
    ref
  ) => (
    <SeparatorPrimitive.Root
      ref={ref}
      decorative={decorative}
      orientation={orientation}
      className={cn(
        "shrink-0 bg-border",
        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
        className
      )}
      {...props}
    />
  )
)
Separator.displayName = SeparatorPrimitive.Root.displayName

export { Separator }
[V0_FILE]typescriptreact:file="components/ui/sheet.tsx"
"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/sidebar.tsx"
"use client"

import * as React from "react"
import { Slot } from "@radix-ui/react-slot"
import { VariantProps, cva } from "class-variance-authority"
import { PanelLeft } from "lucide-react"

import { useIsMobile } from "@/hooks/use-mobile"
import { cn } from "@/lib/utils"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Separator } from "@/components/ui/separator"
import { Sheet, SheetContent } from "@/components/ui/sheet"
import { Skeleton } from "@/components/ui/skeleton"
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "@/components/ui/tooltip"

const SIDEBAR_COOKIE_NAME = "sidebar:state"
const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
const SIDEBAR_WIDTH = "16rem"
const SIDEBAR_WIDTH_MOBILE = "18rem"
const SIDEBAR_WIDTH_ICON = "3rem"
const SIDEBAR_KEYBOARD_SHORTCUT = "b"

type SidebarContext = {
  state: "expanded" | "collapsed"
  open: boolean
  setOpen: (open: boolean) => void
  openMobile: boolean
  setOpenMobile: (open: boolean) => void
  isMobile: boolean
  toggleSidebar: () => void
}

const SidebarContext = React.createContext<SidebarContext | null>(null)

function useSidebar() {
  const context = React.useContext(SidebarContext)
  if (!context) {
    throw new Error("useSidebar must be used within a SidebarProvider.")
  }

return context
}

const SidebarProvider = React.forwardRef<
  HTMLDivElement,
  React.ComponentProps<"div"> & {
    defaultOpen?: boolean
    open?: boolean
    onOpenChange?: (open: boolean) => void
  }
>(
  (
    {
      defaultOpen = true,
      open: openProp,
      onOpenChange: setOpenProp,
      className,
      style,
      children,
      ...props
    },
    ref
  ) => {
    const isMobile = useIsMobile()
    const [openMobile, setOpenMobile] = React.useState(false)

// This is the internal state of the sidebar.
    // We use openProp and setOpenProp for control from outside the component.
    const [_open, _setOpen] = React.useState(defaultOpen)
    const open = openProp ?? _open
    const setOpen = React.useCallback(
      (value: boolean | ((value: boolean) => boolean)) => {
        const openState = typeof value === "function" ? value(open) : value
        if (setOpenProp) {
          setOpenProp(openState)
        } else {
          _setOpen(openState)
        }

// This sets the cookie to keep the sidebar state.
        document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`
      },
      [setOpenProp, open]
    )

// Helper to toggle the sidebar.
    const toggleSidebar = React.useCallback(() => {
      return isMobile
        ? setOpenMobile((open) => !open)
        : setOpen((open) => !open)
    }, [isMobile, setOpen, setOpenMobile])

// Adds a keyboard shortcut to toggle the sidebar.
    React.useEffect(() => {
      const handleKeyDown = (event: KeyboardEvent) => {
        if (
          event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
          (event.metaKey || event.ctrlKey)
        ) {
          event.preventDefault()
          toggleSidebar()
        }
      }

window.addEventListener("keydown", handleKeyDown)
      return () => window.removeEventListener("keydown", handleKeyDown)
    }, [toggleSidebar])

// We add a state so that we can do data-state="expanded" or "collapsed".
    // This makes it easier to style the sidebar with Tailwind classes.
    const state = open ? "expanded" : "collapsed"

const contextValue = React.useMemo<SidebarContext>(
      () => ({
        state,
        open,
        setOpen,
        isMobile,
        openMobile,
        setOpenMobile,
        toggleSidebar,
      }),
      [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]
    )

return (
      <SidebarContext.Provider value={contextValue}>
        <TooltipProvider delayDuration={0}>
          <div
            style={
              {
                "--sidebar-width": SIDEBAR_WIDTH,
                "--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
                ...style,
              } as React.CSSProperties
            }
            className={cn(
              "group/sidebar-wrapper flex min-h-svh w-full has-[[data-variant=inset]]:bg-sidebar",
              className
            )}
            ref={ref}
            {...props}
          >
            {children}
          </div>
        </TooltipProvider>
      </SidebarContext.Provider>
    )
  }
)
SidebarProvider.displayName = "SidebarProvider"

const Sidebar = React.forwardRef<
  HTMLDivElement,
  React.ComponentProps<"div"> & {
    side?: "left" | "right"
    variant?: "sidebar" | "floating" | "inset"
    collapsible?: "offcanvas" | "icon" | "none"
  }
>(
  (
    {
      side = "left",
      variant = "sidebar",
      collapsible = "offcanvas",
      className,
      children,
      ...props
    },
    ref
  ) => {
    const { isMobile, state, openMobile, setOpenMobile } = useSidebar()

if (collapsible === "none") {
      return (
        <div
          className={cn(
            "flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground",
            className
          )}
          ref={ref}
          {...props}
        >
          {children}
        </div>
      )
    }

if (isMobile) {
      return (
        <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
          <SheetContent
            data-sidebar="sidebar"
            data-mobile="true"
            className="w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden"
            style={
              {
                "--sidebar-width": SIDEBAR_WIDTH_MOBILE,
              } as React.CSSProperties
            }
            side={side}
          >
            <div className="flex h-full w-full flex-col">{children}</div>
          </SheetContent>
        </Sheet>
      )
    }

return (
      <div
        ref={ref}
        className="group peer hidden md:block text-sidebar-foreground"
        data-state={state}
        data-collapsible={state === "collapsed" ? collapsible : ""}
        data-variant={variant}
        data-side={side}
      >
        {/* This is what handles the sidebar gap on desktop */}
        <div
          className={cn(
            "duration-200 relative h-svh w-[--sidebar-width] bg-transparent transition-[width] ease-linear",
            "group-data-[collapsible=offcanvas]:w-0",
            "group-data-[side=right]:rotate-180",
            variant === "floating" || variant === "inset"
              ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]"
              : "group-data-[collapsible=icon]:w-[--sidebar-width-icon]"
          )}
        />
        <div
          className={cn(
            "duration-200 fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] ease-linear md:flex",
            side === "left"
              ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
              : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
            // Adjust the padding for floating and inset variants.
            variant === "floating" || variant === "inset"
              ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]"
              : "group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l",
            className
          )}
          {...props}
        >
          <div
            data-sidebar="sidebar"
            className="flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow"
          >
            {children}
          </div>
        </div>
      </div>
    )
  }
)
Sidebar.displayName = "Sidebar"

const SidebarTrigger = React.forwardRef<
  React.ElementRef<typeof Button>,
  React.ComponentProps<typeof Button>
>(({ className, onClick, ...props }, ref) => {
  const { toggleSidebar } = useSidebar()

return (
    <Button
      ref={ref}
      data-sidebar="trigger"
      variant="ghost"
      size="icon"
      className={cn("h-7 w-7", className)}
      onClick={(event) => {
        onClick?.(event)
        toggleSidebar()
      }}
      {...props}
    >
      <PanelLeft />
      <span className="sr-only">Toggle Sidebar</span>
    </Button>
  )
})
SidebarTrigger.displayName = "SidebarTrigger"

const SidebarRail = React.forwardRef<
  HTMLButtonElement,
  React.ComponentProps<"button">
>(({ className, ...props }, ref) => {
  const { toggleSidebar } = useSidebar()

return (
    <button
      ref={ref}
      data-sidebar="rail"
      aria-label="Toggle Sidebar"
      tabIndex={-1}
      onClick={toggleSidebar}
      title="Toggle Sidebar"
      className={cn(
        "absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex",
        "[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize",
        "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
        "group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full group-data-[collapsible=offcanvas]:hover:bg-sidebar",
        "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
        "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
        className
      )}
      {...props}
    />
  )
})
SidebarRail.displayName = "SidebarRail"

const SidebarInset = React.forwardRef<
  HTMLDivElement,
  React.ComponentProps<"main">
>(({ className, ...props }, ref) => {
  return (
    <main
      ref={ref}
      className={cn(
        "relative flex min-h-svh flex-1 flex-col bg-background",
        "peer-data-[variant=inset]:min-h-[calc(100svh-theme(spacing.4))] md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow",
        className
      )}
      {...props}
    />
  )
})
SidebarInset.displayName = "SidebarInset"

const SidebarInput = React.forwardRef<
  React.ElementRef<typeof Input>,
  React.ComponentProps<typeof Input>
>(({ className, ...props }, ref) => {
  return (
    <Input
      ref={ref}
      data-sidebar="input"
      className={cn(
        "h-8 w-full bg-background shadow-none focus-visible:ring-2 focus-visible:ring-sidebar-ring",
        className
      )}
      {...props}
    />
  )
})
SidebarInput.displayName = "SidebarInput"

const SidebarHeader = React.forwardRef<
  HTMLDivElement,
  React.ComponentProps<"div">
>(({ className, ...props }, ref) => {
  return (
    <div
      ref={ref}
      data-sidebar="header"
      className={cn("flex flex-col gap-2 p-2", className)}
      {...props}
    />
  )
})
SidebarHeader.displayName = "SidebarHeader"

const SidebarFooter = React.forwardRef<
  HTMLDivElement,
  React.ComponentProps<"div">
>(({ className, ...props }, ref) => {
  return (
    <div
      ref={ref}
      data-sidebar="footer"
      className={cn("flex flex-col gap-2 p-2", className)}
      {...props}
    />
  )
})
SidebarFooter.displayName = "SidebarFooter"

const SidebarSeparator = React.forwardRef<
  React.ElementRef<typeof Separator>,
  React.ComponentProps<typeof Separator>
>(({ className, ...props }, ref) => {
  return (
    <Separator
      ref={ref}
      data-sidebar="separator"
      className={cn("mx-2 w-auto bg-sidebar-border", className)}
      {...props}
    />
  )
})
SidebarSeparator.displayName = "SidebarSeparator"

const SidebarContent = React.forwardRef<
  HTMLDivElement,
  React.ComponentProps<"div">
>(({ className, ...props }, ref) => {
  return (
    <div
      ref={ref}
      data-sidebar="content"
      className={cn(
        "flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
        className
      )}
      {...props}
    />
  )
})
SidebarContent.displayName = "SidebarContent"

const SidebarGroup = React.forwardRef<
  HTMLDivElement,
  React.ComponentProps<"div">
>(({ className, ...props }, ref) => {
  return (
    <div
      ref={ref}
      data-sidebar="group"
      className={cn("relative flex w-full min-w-0 flex-col p-2", className)}
      {...props}
    />
  )
})
SidebarGroup.displayName = "SidebarGroup"

const SidebarGroupLabel = React.forwardRef<
  HTMLDivElement,
  React.ComponentProps<"div"> & { asChild?: boolean }
>(({ className, asChild = false, ...props }, ref) => {
  const Comp = asChild ? Slot : "div"

return (
    <Comp
      ref={ref}
      data-sidebar="group-label"
      className={cn(
        "duration-200 flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-none ring-sidebar-ring transition-[margin,opa] ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
        "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
        className
      )}
      {...props}
    />
  )
})
SidebarGroupLabel.displayName = "SidebarGroupLabel"

const SidebarGroupAction = React.forwardRef<
  HTMLButtonElement,
  React.ComponentProps<"button"> & { asChild?: boolean }
>(({ className, asChild = false, ...props }, ref) => {
  const Comp = asChild ? Slot : "button"

return (
    <Comp
      ref={ref}
      data-sidebar="group-action"
      className={cn(
        "absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
        // Increases the hit area of the button on mobile.
        "after:absolute after:-inset-2 after:md:hidden",
        "group-data-[collapsible=icon]:hidden",
        className
      )}
      {...props}
    />
  )
})
SidebarGroupAction.displayName = "SidebarGroupAction"

const SidebarGroupContent = React.forwardRef<
  HTMLDivElement,
  React.ComponentProps<"div">
>(({ className, ...props }, ref) => (
  <div
    ref={ref}
    data-sidebar="group-content"
    className={cn("w-full text-sm", className)}
    {...props}
  />
))
SidebarGroupContent.displayName = "SidebarGroupContent"

const SidebarMenu = React.forwardRef<
  HTMLUListElement,
  React.ComponentProps<"ul">
>(({ className, ...props }, ref) => (
  <ul
    ref={ref}
    data-sidebar="menu"
    className={cn("flex w-full min-w-0 flex-col gap-1", className)}
    {...props}
  />
))
SidebarMenu.displayName = "SidebarMenu"

const SidebarMenuItem = React.forwardRef<
  HTMLLIElement,
  React.ComponentProps<"li">
>(({ className, ...props }, ref) => (
  <li
    ref={ref}
    data-sidebar="menu-item"
    className={cn("group/menu-item relative", className)}
    {...props}
  />
))
SidebarMenuItem.displayName = "SidebarMenuItem"

const sidebarMenuButtonVariants = cva(
  "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
  {
    variants: {
      variant: {
        default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
        outline:
          "bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
      },
      size: {
        default: "h-8 text-sm",
        sm: "h-7 text-xs",
        lg: "h-12 text-sm group-data-[collapsible=icon]:!p-0",
      },
    },
    defaultVariants: {
      variant: "default",
      size: "default",
    },
  }
)

const SidebarMenuButton = React.forwardRef<
  HTMLButtonElement,
  React.ComponentProps<"button"> & {
    asChild?: boolean
    isActive?: boolean
    tooltip?: string | React.ComponentProps<typeof TooltipContent>
  } & VariantProps<typeof sidebarMenuButtonVariants>
>(
  (
    {
      asChild = false,
      isActive = false,
      variant = "default",
      size = "default",
      tooltip,
      className,
      ...props
    },
    ref
  ) => {
    const Comp = asChild ? Slot : "button"
    const { isMobile, state } = useSidebar()

const button = (
      <Comp
        ref={ref}
        data-sidebar="menu-button"
        data-size={size}
        data-active={isActive}
        className={cn(sidebarMenuButtonVariants({ variant, size }), className)}
        {...props}
      />
    )

if (!tooltip) {
      return button
    }

if (typeof tooltip === "string") {
      tooltip = {
        children: tooltip,
      }
    }

return (
      <Tooltip>
        <TooltipTrigger asChild>{button}</TooltipTrigger>
        <TooltipContent
          side="right"
          align="center"
          hidden={state !== "collapsed" || isMobile}
          {...tooltip}
        />
      </Tooltip>
    )
  }
)
SidebarMenuButton.displayName = "SidebarMenuButton"

const SidebarMenuAction = React.forwardRef<
  HTMLButtonElement,
  React.ComponentProps<"button"> & {
    asChild?: boolean
    showOnHover?: boolean
  }
>(({ className, asChild = false, showOnHover = false, ...props }, ref) => {
  const Comp = asChild ? Slot : "button"

return (
    <Comp
      ref={ref}
      data-sidebar="menu-action"
      className={cn(
        "absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0",
        // Increases the hit area of the button on mobile.
        "after:absolute after:-inset-2 after:md:hidden",
        "peer-data-[size=sm]/menu-button:top-1",
        "peer-data-[size=default]/menu-button:top-1.5",
        "peer-data-[size=lg]/menu-button:top-2.5",
        "group-data-[collapsible=icon]:hidden",
        showOnHover &&
          "group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0",
        className
      )}
      {...props}
    />
  )
})
SidebarMenuAction.displayName = "SidebarMenuAction"

const SidebarMenuBadge = React.forwardRef<
  HTMLDivElement,
  React.ComponentProps<"div">
>(({ className, ...props }, ref) => (
  <div
    ref={ref}
    data-sidebar="menu-badge"
    className={cn(
      "absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums text-sidebar-foreground select-none pointer-events-none",
      "peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground",
      "peer-data-[size=sm]/menu-button:top-1",
      "peer-data-[size=default]/menu-button:top-1.5",
      "peer-data-[size=lg]/menu-button:top-2.5",
      "group-data-[collapsible=icon]:hidden",
      className
    )}
    {...props}
  />
))
SidebarMenuBadge.displayName = "SidebarMenuBadge"

const SidebarMenuSkeleton = React.forwardRef<
  HTMLDivElement,
  React.ComponentProps<"div"> & {
    showIcon?: boolean
  }
>(({ className, showIcon = false, ...props }, ref) => {
  // Random width between 50 to 90%.
  const width = React.useMemo(() => {
    return `${Math.floor(Math.random() * 40) + 50}%`
  }, [])

return (
    <div
      ref={ref}
      data-sidebar="menu-skeleton"
      className={cn("rounded-md h-8 flex gap-2 px-2 items-center", className)}
      {...props}
    >
      {showIcon && (
        <Skeleton
          className="size-4 rounded-md"
          data-sidebar="menu-skeleton-icon"
        />
      )}
      <Skeleton
        className="h-4 flex-1 max-w-[--skeleton-width]"
        data-sidebar="menu-skeleton-text"
        style={
          {
            "--skeleton-width": width,
          } as React.CSSProperties
        }
      />
    </div>
  )
})
SidebarMenuSkeleton.displayName = "SidebarMenuSkeleton"

const SidebarMenuSub = React.forwardRef<
  HTMLUListElement,
  React.ComponentProps<"ul">
>(({ className, ...props }, ref) => (
  <ul
    ref={ref}
    data-sidebar="menu-sub"
    className={cn(
      "mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5",
      "group-data-[collapsible=icon]:hidden",
      className
    )}
    {...props}
  />
))
SidebarMenuSub.displayName = "SidebarMenuSub"

const SidebarMenuSubItem = React.forwardRef<
  HTMLLIElement,
  React.ComponentProps<"li">
>(({ ...props }, ref) => <li ref={ref} {...props} />)
SidebarMenuSubItem.displayName = "SidebarMenuSubItem"

const SidebarMenuSubButton = React.forwardRef<
  HTMLAnchorElement,
  React.ComponentProps<"a"> & {
    asChild?: boolean
    size?: "sm" | "md"
    isActive?: boolean
  }
>(({ asChild = false, size = "md", isActive, className, ...props }, ref) => {
  const Comp = asChild ? Slot : "a"

return (
    <Comp
      ref={ref}
      data-sidebar="menu-sub-button"
      data-size={size}
      data-active={isActive}
      className={cn(
        "flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-none ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground",
        "data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
        size === "sm" && "text-xs",
        size === "md" && "text-sm",
        "group-data-[collapsible=icon]:hidden",
        className
      )}
      {...props}
    />
  )
})
SidebarMenuSubButton.displayName = "SidebarMenuSubButton"

export {
  Sidebar,
  SidebarContent,
  SidebarFooter,
  SidebarGroup,
  SidebarGroupAction,
  SidebarGroupContent,
  SidebarGroupLabel,
  SidebarHeader,
  SidebarInput,
  SidebarInset,
  SidebarMenu,
  SidebarMenuAction,
  SidebarMenuBadge,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarMenuSkeleton,
  SidebarMenuSub,
  SidebarMenuSubButton,
  SidebarMenuSubItem,
  SidebarProvider,
  SidebarRail,
  SidebarSeparator,
  SidebarTrigger,
  useSidebar,
}
[V0_FILE]typescriptreact:file="components/ui/skeleton.tsx"
import { cn } from "@/lib/utils"

function Skeleton({
  className,
  ...props
}: React.HTMLAttributes<HTMLDivElement>) {
  return (
    <div
      className={cn("animate-pulse rounded-md bg-muted", className)}
      {...props}
    />
  )
}

export { Skeleton }
[V0_FILE]typescriptreact:file="components/ui/slider.tsx"
"use client"

import * as React from "react"
import * as SliderPrimitive from "@radix-ui/react-slider"

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

const Slider = React.forwardRef<
  React.ElementRef<typeof SliderPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
>(({ className, ...props }, ref) => (
  <SliderPrimitive.Root
    ref={ref}
    className={cn(
      "relative flex w-full touch-none select-none items-center",
      className
    )}
    {...props}
  >
    <SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden rounded-full bg-secondary">
      <SliderPrimitive.Range className="absolute h-full bg-primary" />
    </SliderPrimitive.Track>
    <SliderPrimitive.Thumb className="block h-5 w-5 rounded-full border-2 border-primary bg-background 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" />
  </SliderPrimitive.Root>
))
Slider.displayName = SliderPrimitive.Root.displayName

export { Slider }
[V0_FILE]typescriptreact:file="components/ui/sonner.tsx"
"use client"

import { useTheme } from "next-themes"
import { Toaster as Sonner } from "sonner"

type ToasterProps = React.ComponentProps<typeof Sonner>

const Toaster = ({ ...props }: ToasterProps) => {
  const { theme = "system" } = useTheme()

return (
    <Sonner
      theme={theme as ToasterProps["theme"]}
      className="toaster group"
      toastOptions={{
        classNames: {
          toast:
            "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
          description: "group-[.toast]:text-muted-foreground",
          actionButton:
            "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
          cancelButton:
            "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
        },
      }}
      {...props}
    />
  )
}

export { Toaster }
[V0_FILE]typescriptreact:file="components/ui/switch.tsx"
"use client"

import * as React from "react"
import * as SwitchPrimitives from "@radix-ui/react-switch"

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

const Switch = React.forwardRef<
  React.ElementRef<typeof SwitchPrimitives.Root>,
  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
>(({ className, ...props }, ref) => (
  <SwitchPrimitives.Root
    className={cn(
      "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
      className
    )}
    {...props}
    ref={ref}
  >
    <SwitchPrimitives.Thumb
      className={cn(
        "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"
      )}
    />
  </SwitchPrimitives.Root>
))
Switch.displayName = SwitchPrimitives.Root.displayName

export { Switch }
[V0_FILE]typescriptreact:file="components/ui/table.tsx"
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"
"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"
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/ui/toast.tsx"
"use client"

import * as React from "react"
import * as ToastPrimitives from "@radix-ui/react-toast"
import { cva, type VariantProps } from "class-variance-authority"
import { X } from "lucide-react"

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

const ToastProvider = ToastPrimitives.Provider

const ToastViewport = React.forwardRef<
  React.ElementRef<typeof ToastPrimitives.Viewport>,
  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
>(({ className, ...props }, ref) => (
  <ToastPrimitives.Viewport
    ref={ref}
    className={cn(
      "fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
      className
    )}
    {...props}
  />
))
ToastViewport.displayName = ToastPrimitives.Viewport.displayName

const toastVariants = cva(
  "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
  {
    variants: {
      variant: {
        default: "border bg-background text-foreground",
        destructive:
          "destructive group border-destructive bg-destructive text-destructive-foreground",
      },
    },
    defaultVariants: {
      variant: "default",
    },
  }
)

const Toast = React.forwardRef<
  React.ElementRef<typeof ToastPrimitives.Root>,
  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &
    VariantProps<typeof toastVariants>
>(({ className, variant, ...props }, ref) => {
  return (
    <ToastPrimitives.Root
      ref={ref}
      className={cn(toastVariants({ variant }), className)}
      {...props}
    />
  )
})
Toast.displayName = ToastPrimitives.Root.displayName

const ToastAction = React.forwardRef<
  React.ElementRef<typeof ToastPrimitives.Action>,
  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
>(({ className, ...props }, ref) => (
  <ToastPrimitives.Action
    ref={ref}
    className={cn(
      "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
      className
    )}
    {...props}
  />
))
ToastAction.displayName = ToastPrimitives.Action.displayName

const ToastClose = React.forwardRef<
  React.ElementRef<typeof ToastPrimitives.Close>,
  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
>(({ className, ...props }, ref) => (
  <ToastPrimitives.Close
    ref={ref}
    className={cn(
      "absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
      className
    )}
    toast-close=""
    {...props}
  >
    <X className="h-4 w-4" />
  </ToastPrimitives.Close>
))
ToastClose.displayName = ToastPrimitives.Close.displayName

const ToastTitle = React.forwardRef<
  React.ElementRef<typeof ToastPrimitives.Title>,
  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
>(({ className, ...props }, ref) => (
  <ToastPrimitives.Title
    ref={ref}
    className={cn("text-sm font-semibold", className)}
    {...props}
  />
))
ToastTitle.displayName = ToastPrimitives.Title.displayName

const ToastDescription = React.forwardRef<
  React.ElementRef<typeof ToastPrimitives.Description>,
  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
>(({ className, ...props }, ref) => (
  <ToastPrimitives.Description
    ref={ref}
    className={cn("text-sm opacity-90", className)}
    {...props}
  />
))
ToastDescription.displayName = ToastPrimitives.Description.displayName

type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>

type ToastActionElement = React.ReactElement<typeof ToastAction>

export {
  type ToastProps,
  type ToastActionElement,
  ToastProvider,
  ToastViewport,
  Toast,
  ToastTitle,
  ToastDescription,
  ToastClose,
  ToastAction,
}
[V0_FILE]typescriptreact:file="components/ui/toaster.tsx"
"use client"

import { useToast } from "@/hooks/use-toast"
import {
  Toast,
  ToastClose,
  ToastDescription,
  ToastProvider,
  ToastTitle,
  ToastViewport,
} from "@/components/ui/toast"

export function Toaster() {
  const { toasts } = useToast()

return (
    <ToastProvider>
      {toasts.map(function ({ id, title, description, action, ...props }) {
        return (
          <Toast key={id} {...props}>
            <div className="grid gap-1">
              {title && <ToastTitle>{title}</ToastTitle>}
              {description && (
                <ToastDescription>{description}</ToastDescription>
              )}
            </div>
            {action}
            <ToastClose />
          </Toast>
        )
      })}
      <ToastViewport />
    </ToastProvider>
  )
}
[V0_FILE]typescriptreact:file="components/ui/toggle-group.tsx"
"use client"

import * as React from "react"
import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group"
import { type VariantProps } from "class-variance-authority"

import { cn } from "@/lib/utils"
import { toggleVariants } from "@/components/ui/toggle"

const ToggleGroupContext = React.createContext<
  VariantProps<typeof toggleVariants>
>({
  size: "default",
  variant: "default",
})

const ToggleGroup = React.forwardRef<
  React.ElementRef<typeof ToggleGroupPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root> &
    VariantProps<typeof toggleVariants>
>(({ className, variant, size, children, ...props }, ref) => (
  <ToggleGroupPrimitive.Root
    ref={ref}
    className={cn("flex items-center justify-center gap-1", className)}
    {...props}
  >
    <ToggleGroupContext.Provider value={{ variant, size }}>
      {children}
    </ToggleGroupContext.Provider>
  </ToggleGroupPrimitive.Root>
))

ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName

const ToggleGroupItem = React.forwardRef<
  React.ElementRef<typeof ToggleGroupPrimitive.Item>,
  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item> &
    VariantProps<typeof toggleVariants>
>(({ className, children, variant, size, ...props }, ref) => {
  const context = React.useContext(ToggleGroupContext)

return (
    <ToggleGroupPrimitive.Item
      ref={ref}
      className={cn(
        toggleVariants({
          variant: context.variant || variant,
          size: context.size || size,
        }),
        className
      )}
      {...props}
    >
      {children}
    </ToggleGroupPrimitive.Item>
  )
})

ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName

export { ToggleGroup, ToggleGroupItem }
[V0_FILE]typescriptreact:file="components/ui/toggle.tsx"
"use client"

import * as React from "react"
import * as TogglePrimitive from "@radix-ui/react-toggle"
import { cva, type VariantProps } from "class-variance-authority"

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

const toggleVariants = cva(
  "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground 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=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 gap-2",
  {
    variants: {
      variant: {
        default: "bg-transparent",
        outline:
          "border border-input bg-transparent hover:bg-accent hover:text-accent-foreground",
      },
      size: {
        default: "h-10 px-3 min-w-10",
        sm: "h-9 px-2.5 min-w-9",
        lg: "h-11 px-5 min-w-11",
      },
    },
    defaultVariants: {
      variant: "default",
      size: "default",
    },
  }
)

const Toggle = React.forwardRef<
  React.ElementRef<typeof TogglePrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> &
    VariantProps<typeof toggleVariants>
>(({ className, variant, size, ...props }, ref) => (
  <TogglePrimitive.Root
    ref={ref}
    className={cn(toggleVariants({ variant, size, className }))}
    {...props}
  />
))

Toggle.displayName = TogglePrimitive.Root.displayName

export { Toggle, toggleVariants }
[V0_FILE]typescriptreact:file="components/ui/tooltip.tsx"
"use client"

import * as React from "react"
import * as TooltipPrimitive from "@radix-ui/react-tooltip"

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

const TooltipProvider = TooltipPrimitive.Provider

const Tooltip = TooltipPrimitive.Root

const TooltipTrigger = TooltipPrimitive.Trigger

const TooltipContent = React.forwardRef<
  React.ElementRef<typeof TooltipPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
>(({ className, sideOffset = 4, ...props }, ref) => (
  <TooltipPrimitive.Content
    ref={ref}
    sideOffset={sideOffset}
    className={cn(
      "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-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}
  />
))
TooltipContent.displayName = TooltipPrimitive.Content.displayName

export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
[V0_FILE]typescriptreact:file="components/ui/use-mobile.tsx"
import * as React from "react"

const MOBILE_BREAKPOINT = 768

export function useIsMobile() {
  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)

React.useEffect(() => {
    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
    const onChange = () => {
      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
    }
    mql.addEventListener("change", onChange)
    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
    return () => mql.removeEventListener("change", onChange)
  }, [])

return !!isMobile
}
[V0_FILE]typescript:file="components/ui/use-toast.ts"
"use client"

// Inspired by react-hot-toast library
import * as React from "react"

import type {
  ToastActionElement,
  ToastProps,
} from "@/components/ui/toast"

const TOAST_LIMIT = 1
const TOAST_REMOVE_DELAY = 1000000

type ToasterToast = ToastProps & {
  id: string
  title?: React.ReactNode
  description?: React.ReactNode
  action?: ToastActionElement
}

const actionTypes = {
  ADD_TOAST: "ADD_TOAST",
  UPDATE_TOAST: "UPDATE_TOAST",
  DISMISS_TOAST: "DISMISS_TOAST",
  REMOVE_TOAST: "REMOVE_TOAST",
} as const

let count = 0

function genId() {
  count = (count + 1) % Number.MAX_SAFE_INTEGER
  return count.toString()
}

type ActionType = typeof actionTypes

type Action =
  | {
      type: ActionType["ADD_TOAST"]
      toast: ToasterToast
    }
  | {
      type: ActionType["UPDATE_TOAST"]
      toast: Partial<ToasterToast>
    }
  | {
      type: ActionType["DISMISS_TOAST"]
      toastId?: ToasterToast["id"]
    }
  | {
      type: ActionType["REMOVE_TOAST"]
      toastId?: ToasterToast["id"]
    }

interface State {
  toasts: ToasterToast[]
}

const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()

const addToRemoveQueue = (toastId: string) => {
  if (toastTimeouts.has(toastId)) {
    return
  }

const timeout = setTimeout(() => {
    toastTimeouts.delete(toastId)
    dispatch({
      type: "REMOVE_TOAST",
      toastId: toastId,
    })
  }, TOAST_REMOVE_DELAY)

toastTimeouts.set(toastId, timeout)
}

export const reducer = (state: State, action: Action): State => {
  switch (action.type) {
    case "ADD_TOAST":
      return {
        ...state,
        toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
      }

case "UPDATE_TOAST":
      return {
        ...state,
        toasts: state.toasts.map((t) =>
          t.id === action.toast.id ? { ...t, ...action.toast } : t
        ),
      }

case "DISMISS_TOAST": {
      const { toastId } = action

// ! Side effects ! - This could be extracted into a dismissToast() action,
      // but I'll keep it here for simplicity
      if (toastId) {
        addToRemoveQueue(toastId)
      } else {
        state.toasts.forEach((toast) => {
          addToRemoveQueue(toast.id)
        })
      }

return {
        ...state,
        toasts: state.toasts.map((t) =>
          t.id === toastId || toastId === undefined
            ? {
                ...t,
                open: false,
              }
            : t
        ),
      }
    }
    case "REMOVE_TOAST":
      if (action.toastId === undefined) {
        return {
          ...state,
          toasts: [],
        }
      }
      return {
        ...state,
        toasts: state.toasts.filter((t) => t.id !== action.toastId),
      }
  }
}

const listeners: Array<(state: State) => void> = []

let memoryState: State = { toasts: [] }

function dispatch(action: Action) {
  memoryState = reducer(memoryState, action)
  listeners.forEach((listener) => {
    listener(memoryState)
  })
}

type Toast = Omit<ToasterToast, "id">

function toast({ ...props }: Toast) {
  const id = genId()

const update = (props: ToasterToast) =>
    dispatch({
      type: "UPDATE_TOAST",
      toast: { ...props, id },
    })
  const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id })

dispatch({
    type: "ADD_TOAST",
    toast: {
      ...props,
      id,
      open: true,
      onOpenChange: (open) => {
        if (!open) dismiss()
      },
    },
  })

return {
    id: id,
    dismiss,
    update,
  }
}

function useToast() {
  const [state, setState] = React.useState<State>(memoryState)

React.useEffect(() => {
    listeners.push(setState)
    return () => {
      const index = listeners.indexOf(setState)
      if (index > -1) {
        listeners.splice(index, 1)
      }
    }
  }, [state])

return {
    ...state,
    toast,
    dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }),
  }
}

export { useToast, toast }
[V0_FILE]typescriptreact:file="components/vehicles/vehicles.tsx"
"use client"

import { useState } from "react"
import { Card, CardContent } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Badge } from "@/components/ui/badge"
import { Car, Search, Plus, MapPin, Gauge, History, Edit } from "lucide-react"

export function Vehicles() {
  const [searchTerm, setSearchTerm] = useState("")

const vehicles = [
    {
      id: 1,
      make: "Toyota",
      model: "Corolla",
      year: 2020,
      license: "SL-001-ABC",
      owner: "Ahmed Hassan",
      mileage: "45,000 km",
      status: "In Service",
      lastService: "2024-01-15",
      nextService: "2024-04-15",
      vin: "1HGBH41JXMN109186",
    },
    {
      id: 2,
      make: "Honda",
      model: "Civic",
      year: 2019,
      license: "SL-002-DEF",
      owner: "Fatima Ali",
      mileage: "38,000 km",
      status: "Completed",
      lastService: "2024-01-20",
      nextService: "2024-05-20",
      vin: "2HGBH41JXMN109187",
    },
    {
      id: 3,
      make: "Nissan",
      model: "Altima",
      year: 2021,
      license: "SL-003-GHI",
      owner: "Mohamed Yusuf",
      mileage: "22,000 km",
      status: "Waiting",
      lastService: "2024-01-10",
      nextService: "2024-04-10",
      vin: "3HGBH41JXMN109188",
    },
    {
      id: 4,
      make: "Hyundai",
      model: "Elantra",
      year: 2018,
      license: "SL-004-JKL",
      owner: "Sahra Ahmed",
      mileage: "67,000 km",
      status: "In Service",
      lastService: "2024-01-25",
      nextService: "2024-04-25",
      vin: "4HGBH41JXMN109189",
    },
  ]

const filteredVehicles = vehicles.filter(
    (vehicle) =>
      vehicle.make.toLowerCase().includes(searchTerm.toLowerCase()) ||
      vehicle.model.toLowerCase().includes(searchTerm.toLowerCase()) ||
      vehicle.license.toLowerCase().includes(searchTerm.toLowerCase()) ||
      vehicle.owner.toLowerCase().includes(searchTerm.toLowerCase()),
  )

const getStatusColor = (status: string) => {
    switch (status) {
      case "In Service":
        return "bg-yellow-100 text-yellow-800"
      case "Completed":
        return "bg-green-100 text-green-800"
      case "Waiting":
        return "bg-blue-100 text-blue-800"
      default:
        return "bg-gray-100 text-gray-800"
    }
  }

return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex justify-between items-center">
        <div>
          <h1 className="text-3xl font-bold text-gray-900">Vehicles</h1>
          <p className="text-gray-600">Track vehicle information and service history</p>
        </div>
        <Button className="bg-green-600 hover:bg-green-700">
          <Plus className="w-4 h-4 mr-2" />
          Add Vehicle
        </Button>
      </div>

{/* Search and Filters */}
      <Card>
        <CardContent className="p-6">
          <div className="flex space-x-4">
            <div className="flex-1 relative">
              <Search className="absolute left-3 top-3 h-4 w-4 text-gray-400" />
              <Input
                placeholder="Search vehicles by make, model, license plate, or owner..."
                value={searchTerm}
                onChange={(e) => setSearchTerm(e.target.value)}
                className="pl-10"
              />
            </div>
            <Button variant="outline">Filter by Status</Button>
            <Button variant="outline">Export List</Button>
          </div>
        </CardContent>
      </Card>

{/* Vehicle Stats */}
      <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
        <Card>
          <CardContent className="p-4">
            <div className="text-2xl font-bold text-blue-600">156</div>
            <p className="text-sm text-gray-600">Total Vehicles</p>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="p-4">
            <div className="text-2xl font-bold text-yellow-600">18</div>
            <p className="text-sm text-gray-600">In Service</p>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="p-4">
            <div className="text-2xl font-bold text-green-600">12</div>
            <p className="text-sm text-gray-600">Completed Today</p>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="p-4">
            <div className="text-2xl font-bold text-purple-600">8</div>
            <p className="text-sm text-gray-600">Due for Service</p>
          </CardContent>
        </Card>
      </div>

{/* Vehicle List */}
      <div className="space-y-4">
        {filteredVehicles.map((vehicle) => (
          <Card key={vehicle.id} className="hover:shadow-md transition-shadow">
            <CardContent className="p-6">
              <div className="flex items-center justify-between">
                <div className="flex items-center space-x-4">
                  <div className="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center">
                    <Car className="w-6 h-6 text-green-600" />
                  </div>
                  <div>
                    <h3 className="text-lg font-semibold text-gray-900">
                      {vehicle.year} {vehicle.make} {vehicle.model}
                    </h3>
                    <div className="flex items-center space-x-4 text-sm text-gray-600">
                      <div className="flex items-center">
                        <MapPin className="w-4 h-4 mr-1" />
                        License: {vehicle.license}
                      </div>
                      <div>Owner: {vehicle.owner}</div>
                    </div>
                    <div className="text-xs text-gray-500 mt-1">VIN: {vehicle.vin}</div>
                  </div>
                </div>

<div className="flex items-center space-x-6">
                  <div className="text-center">
                    <div className="flex items-center text-sm text-gray-600">
                      <Gauge className="w-4 h-4 mr-1" />
                      {vehicle.mileage}
                    </div>
                    <div className="text-xs text-gray-500 mt-1">Next service: {vehicle.nextService}</div>
                  </div>

<div className="flex flex-col items-center space-y-2">
                    <Badge className={getStatusColor(vehicle.status)}>{vehicle.status}</Badge>
                  </div>

<div className="flex space-x-2">
                    <Button variant="outline" size="sm">
                      <History className="w-4 h-4 mr-1" />
                      Service History
                    </Button>
                    <Button variant="outline" size="sm">
                      <Edit className="w-4 h-4 mr-1" />
                      Edit
                    </Button>
                  </div>
                </div>
              </div>
            </CardContent>
          </Card>
        ))}
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="hooks/use-mobile.tsx"
import * as React from "react"

const MOBILE_BREAKPOINT = 768

export function useIsMobile() {
  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)

return !!isMobile
}
[V0_FILE]typescript:file="hooks/use-toast.ts"
"use client"

// Inspired by react-hot-toast library
import * as React from "react"

import type {
  ToastActionElement,
  ToastProps,
} from "@/components/ui/toast"

const TOAST_LIMIT = 1
const TOAST_REMOVE_DELAY = 1000000

type ToasterToast = ToastProps & {
  id: string
  title?: React.ReactNode
  description?: React.ReactNode
  action?: ToastActionElement
}

const actionTypes = {
  ADD_TOAST: "ADD_TOAST",
  UPDATE_TOAST: "UPDATE_TOAST",
  DISMISS_TOAST: "DISMISS_TOAST",
  REMOVE_TOAST: "REMOVE_TOAST",
} as const

let count = 0

function genId() {
  count = (count + 1) % Number.MAX_SAFE_INTEGER
  return count.toString()
}

type ActionType = typeof actionTypes

interface State {
  toasts: ToasterToast[]
}

const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()

const addToRemoveQueue = (toastId: string) => {
  if (toastTimeouts.has(toastId)) {
    return
  }

const timeout = setTimeout(() => {
    toastTimeouts.delete(toastId)
    dispatch({
      type: "REMOVE_TOAST",
      toastId: toastId,
    })
  }, TOAST_REMOVE_DELAY)

toastTimeouts.set(toastId, timeout)
}

case "UPDATE_TOAST":
      return {
        ...state,
        toasts: state.toasts.map((t) =>
          t.id === action.toast.id ? { ...t, ...action.toast } : t
        ),
      }

case "DISMISS_TOAST": {
      const { toastId } = action

const listeners: Array<(state: State) => void> = []

let memoryState: State = { toasts: [] }

function dispatch(action: Action) {
  memoryState = reducer(memoryState, action)
  listeners.forEach((listener) => {
    listener(memoryState)
  })
}

type Toast = Omit<ToasterToast, "id">

function toast({ ...props }: Toast) {
  const id = genId()

const update = (props: ToasterToast) =>
    dispatch({
      type: "UPDATE_TOAST",
      toast: { ...props, id },
    })
  const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id })

dispatch({
    type: "ADD_TOAST",
    toast: {
      ...props,
      id,
      open: true,
      onOpenChange: (open) => {
        if (!open) dismiss()
      },
    },
  })

return {
    id: id,
    dismiss,
    update,
  }
}

function useToast() {
  const [state, setState] = React.useState<State>(memoryState)

return {
    ...state,
    toast,
    dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }),
  }
}

export { useToast, toast }
[V0_FILE]typescript:file="lib/supabase-server.ts"
import { createClient } from "@supabase/supabase-js"

const supabaseUrl = "https://bnqcimnejaemtcpanqnq.supabase.co"
const supabaseServiceKey =
  process.env.SUPABASE_SERVICE_ROLE_KEY ||
  "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImJucWNpbW5lamFlbXRjcGFucW5xIiwicm9sZSI6InNlcnZpY2Vfcm9sZSIsImlhdCI6MTc1MDY5MzQ1MiwiZXhwIjoyMDY2MjY5NDUyfQ.YOUR_SERVICE_ROLE_KEY_HERE"

// Server-side client with service role key for admin operations
export const supabaseServer = createClient(supabaseUrl, supabaseServiceKey, {
  auth: {
    autoRefreshToken: false,
    persistSession: false,
  },
})
[V0_FILE]typescript:file="lib/supabase.ts"
import { createClient } from "@supabase/supabase-js"

const supabaseUrl = "https://bnqcimnejaemtcpanqnq.supabase.co"
const supabaseKey =
  process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY ||
  process.env.SUPABASE_KEY ||
  "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImJucWNpbW5lamFlbXRjcGFucW5xIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NTA2OTM0NTIsImV4cCI6MjA2NjI2OTQ1Mn0.sbLMOhRs2DC55G9Sajd7Hplrv3GB8l_DuL07up33t00"

// Create a function to get the Supabase client safely
export const getSupabaseClient = () => {
  if (!supabaseKey) {
    console.warn("Supabase key not available, using fallback configuration")
    return createClient(
      supabaseUrl,
      "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImJucWNpbW5lamFlbXRjcGFucW5xIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NTA2OTM0NTIsImV4cCI6MjA2NjI2OTQ1Mn0.sbLMOhRs2DC55G9Sajd7Hplrv3GB8l_DuL07up33t00",
    )
  }
  return createClient(supabaseUrl, supabaseKey)
}

// Export the client for backward compatibility
export const supabase = getSupabaseClient()

// Database types
export interface User {
  id: string
  email: string
  role: "admin" | "staff" | "technician" | "customer"
  first_name: string
  last_name: string
  phone?: string
  is_active: boolean
  created_at: string
  updated_at: string
}

export interface UserProfile {
  id: string
  user_id: string
  first_name: string
  last_name: string
  phone?: string
  role: "admin" | "staff" | "technician" | "customer"
  is_active: boolean
  created_at: string
  updated_at: string
}
[V0_FILE]typescript:file="lib/utils.ts"
import { clsx, type ClassValue } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}
[V0_FILE]typescriptreact:file="mass-workshop-system.tsx"
"use client"

import { useState } from "react"
import { SupabaseAuthProvider } from "@/components/auth/supabase-auth-provider"
import { SupabaseLoginForm } from "@/components/auth/supabase-login-form"
import { useSupabaseAuth } from "@/components/auth/supabase-auth-provider"
import { Sidebar } from "@/components/layout/sidebar"
import { UserMenu } from "@/components/layout/user-menu"
import { ConnectionStatus } from "@/components/connection-status"
import dynamic from "next/dynamic"

// Import all modules
import { Dashboard } from "@/components/dashboard/dashboard"
import { Customers } from "@/components/customers/customers"
import { Vehicles } from "@/components/vehicles/vehicles"
import { Appointments } from "@/components/appointments/appointments"
import { TechnicianDashboard } from "@/components/technicians/technician-dashboard"
import { ReportsAnalytics } from "@/components/reports/reports-analytics"
import { AITools } from "@/components/ai-tools/ai-tools"

// Dynamically import modules that might cause SSR issues
const SuppliersModule = dynamic(() => import("@/components/suppliers/suppliers-module"), { ssr: false })
const InspectionsModule = dynamic(() => import("@/components/inspections/inspections-module"), { ssr: false })
const EstimatesModule = dynamic(() => import("@/components/estimates/estimates-module"), { ssr: false })
const DatabaseTest = dynamic(() => import("@/components/admin/database-test"), { ssr: false })

function WorkshopSystemContent() {
  const { user, logout } = useSupabaseAuth()
  const [activeModule, setActiveModule] = useState("dashboard")

if (!user) {
    return <SupabaseLoginForm />
  }

const renderModule = () => {
    switch (activeModule) {
      case "dashboard":
        return <Dashboard />
      case "customers":
        return <Customers />
      case "vehicles":
        return <Vehicles />
      case "appointments":
        return <Appointments />
      case "technicians":
        return <TechnicianDashboard />
      case "suppliers":
        return <SuppliersModule />
      case "inspections":
        return <InspectionsModule />
      case "estimates":
        return <EstimatesModule />
      case "reports":
        return <ReportsAnalytics />
      case "ai-tools":
        return <AITools />
      case "database-test":
        return user.role === "admin" ? <DatabaseTest /> : <Dashboard />
      default:
        return <Dashboard />
    }
  }

return (
    <div className="flex h-screen bg-gray-50">
      <Sidebar activeModule={activeModule} onModuleChange={setActiveModule} userRole={user.role} />
      <div className="flex-1 flex flex-col overflow-hidden">
        <header className="bg-white shadow-sm border-b border-gray-200 px-6 py-4">
          <div className="flex items-center justify-between">
            <div>
              <h1 className="text-2xl font-bold text-gray-900">MASS Car Workshop</h1>
              <p className="text-sm text-gray-600">Vehicle Workshop Management System</p>
            </div>
            <UserMenu user={user} onLogout={logout} />
          </div>
        </header>
        <main className="flex-1 overflow-auto p-6">
          <ConnectionStatus />
          {renderModule()}
        </main>
      </div>
    </div>
  )
}

export default function MassWorkshopSystem() {
  return (
    <SupabaseAuthProvider>
      <WorkshopSystemContent />
    </SupabaseAuthProvider>
  )
}
[V0_FILE]javascript:file="next.config.mjs"
/** @type {import('next').NextConfig} */
const nextConfig = {
  eslint: {
    ignoreDuringBuilds: true,
  },
  typescript: {
    ignoreBuildErrors: true,
  },
  images: {
    unoptimized: true,
  },
}

export default nextConfig
[V0_FILE]json:file="package.json"
{
  "name": "my-v0-project",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "build": "next build",
    "dev": "next dev",
    "lint": "next lint",
    "start": "next start"
  },
  "dependencies": {
    "@hookform/resolvers": "^3.9.1",
    "@radix-ui/react-accordion": "latest",
    "@radix-ui/react-alert-dialog": "latest",
    "@radix-ui/react-aspect-ratio": "latest",
    "@radix-ui/react-avatar": "latest",
    "@radix-ui/react-checkbox": "latest",
    "@radix-ui/react-collapsible": "latest",
    "@radix-ui/react-context-menu": "latest",
    "@radix-ui/react-dialog": "latest",
    "@radix-ui/react-dropdown-menu": "latest",
    "@radix-ui/react-hover-card": "latest",
    "@radix-ui/react-label": "latest",
    "@radix-ui/react-menubar": "latest",
    "@radix-ui/react-navigation-menu": "latest",
    "@radix-ui/react-popover": "latest",
    "@radix-ui/react-progress": "latest",
    "@radix-ui/react-radio-group": "latest",
    "@radix-ui/react-scroll-area": "latest",
    "@radix-ui/react-select": "latest",
    "@radix-ui/react-separator": "latest",
    "@radix-ui/react-slider": "latest",
    "@radix-ui/react-slot": "latest",
    "@radix-ui/react-switch": "latest",
    "@radix-ui/react-tabs": "latest",
    "@radix-ui/react-toast": "latest",
    "@radix-ui/react-toggle": "latest",
    "@radix-ui/react-toggle-group": "latest",
    "@radix-ui/react-tooltip": "latest",
    "@supabase/supabase-js": "latest",
    "autoprefixer": "^10.4.20",
    "bcryptjs": "latest",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
    "cmdk": "latest",
    "date-fns": "latest",
    "embla-carousel-react": "latest",
    "input-otp": "latest",
    "lucide-react": "^0.454.0",
    "next": "15.2.4",
    "next-themes": "latest",
    "react": "^19",
    "react-day-picker": "latest",
    "react-dom": "^19",
    "react-hook-form": "latest",
    "react-resizable-panels": "latest",
    "recharts": "latest",
    "sonner": "latest",
    "tailwind-merge": "^2.5.5",
    "tailwindcss-animate": "^1.0.7",
    "vaul": "latest",
    "zod": "^3.24.1"
  },
  "devDependencies": {
    "@types/node": "^22",
    "@types/react": "^19",
    "@types/react-dom": "^19",
    "postcss": "^8.5",
    "tailwindcss": "^3.4.17",
    "typescript": "^5"
  }
}
[V0_FILE]javascript:file="postcss.config.mjs"
/** @type {import('postcss-load-config').Config} */
const config = {
  plugins: {
    tailwindcss: {},
  },
};

export default config;
[V0_FILE]sql:file="scripts/complete-database-setup.sql"
-- Complete MASS Car Workshop Database Setup
-- Run this in your Supabase SQL Editor

-- Enable necessary extensions
CREATE EXTENSION IF NOT EXISTS "uuid-ossp";

-- Create user profiles table (for authentication)
CREATE TABLE IF NOT EXISTS public.user_profiles (
    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    user_id UUID REFERENCES auth.users(id) ON DELETE CASCADE,
    first_name VARCHAR(50) NOT NULL,
    last_name VARCHAR(50) NOT NULL,
    phone VARCHAR(20),
    role VARCHAR(20) NOT NULL CHECK (role IN ('admin', 'staff', 'technician', 'customer')),
    is_active BOOLEAN DEFAULT true,
    created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
    updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
    UNIQUE(user_id)
);

-- Create customers table
CREATE TABLE IF NOT EXISTS public.customers (
    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    first_name VARCHAR(50) NOT NULL,
    last_name VARCHAR(50) NOT NULL,
    email VARCHAR(100) UNIQUE,
    phone VARCHAR(20),
    address TEXT,
    city VARCHAR(50) DEFAULT 'Hargeisa',
    created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
    updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- Create suppliers table
CREATE TABLE IF NOT EXISTS public.suppliers (
    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    name VARCHAR(100) NOT NULL,
    contact_person VARCHAR(100),
    email VARCHAR(100),
    phone VARCHAR(20),
    address TEXT,
    city VARCHAR(50) DEFAULT 'Hargeisa',
    category VARCHAR(50),
    is_active BOOLEAN DEFAULT true,
    created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
    updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- Create parts catalog table
CREATE TABLE IF NOT EXISTS public.parts_catalog (
    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    part_number VARCHAR(50) NOT NULL,
    name VARCHAR(100) NOT NULL,
    description TEXT,
    category VARCHAR(50),
    supplier_id UUID REFERENCES public.suppliers(id),
    cost_price DECIMAL(10,2),
    selling_price DECIMAL(10,2),
    stock_quantity INTEGER DEFAULT 0,
    min_stock_level INTEGER DEFAULT 5,
    is_active BOOLEAN DEFAULT true,
    created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
    updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- Create labor guide table
CREATE TABLE IF NOT EXISTS public.labor_guide (
    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    operation_code VARCHAR(20) NOT NULL,
    description TEXT NOT NULL,
    category VARCHAR(50),
    standard_hours DECIMAL(4,2) NOT NULL,
    suggested_rate DECIMAL(8,2) NOT NULL,
    is_active BOOLEAN DEFAULT true,
    created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- Create inspections table
CREATE TABLE IF NOT EXISTS public.inspections (
    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    vehicle_id UUID REFERENCES public.vehicles(id) ON DELETE CASCADE,
    technician_id UUID REFERENCES public.user_profiles(id),
    template_id UUID REFERENCES public.inspection_templates(id),
    status VARCHAR(20) DEFAULT 'in_progress' CHECK (status IN ('draft', 'in_progress', 'completed', 'approved')),
    mileage INTEGER,
    notes TEXT,
    created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
    completed_at TIMESTAMP WITH TIME ZONE
);

-- Create inspection items table
CREATE TABLE IF NOT EXISTS public.inspection_items (
    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    inspection_id UUID REFERENCES public.inspections(id) ON DELETE CASCADE,
    item_name VARCHAR(100) NOT NULL,
    status VARCHAR(20) DEFAULT 'ok' CHECK (status IN ('ok', 'attention', 'immediate_attention')),
    notes TEXT,
    photo_url TEXT,
    sort_order INTEGER DEFAULT 0
);

-- Create estimates table
CREATE TABLE IF NOT EXISTS public.estimates (
    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    customer_id UUID REFERENCES public.customers(id) ON DELETE CASCADE,
    vehicle_id UUID REFERENCES public.vehicles(id) ON DELETE CASCADE,
    inspection_id UUID REFERENCES public.inspections(id),
    estimate_number VARCHAR(20) UNIQUE NOT NULL,
    status VARCHAR(20) DEFAULT 'draft' CHECK (status IN ('draft', 'sent', 'viewed', 'approved', 'declined', 'expired')),
    subtotal DECIMAL(10,2) DEFAULT 0,
    tax_amount DECIMAL(10,2) DEFAULT 0,
    total_amount DECIMAL(10,2) DEFAULT 0,
    notes TEXT,
    expires_at TIMESTAMP WITH TIME ZONE,
    approved_at TIMESTAMP WITH TIME ZONE,
    created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
    updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- Create appointments table
CREATE TABLE IF NOT EXISTS public.appointments (
    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    customer_id UUID REFERENCES public.customers(id) ON DELETE CASCADE,
    vehicle_id UUID REFERENCES public.vehicles(id) ON DELETE CASCADE,
    technician_id UUID REFERENCES public.user_profiles(id),
    appointment_date TIMESTAMP WITH TIME ZONE NOT NULL,
    duration_minutes INTEGER DEFAULT 60,
    service_type VARCHAR(50),
    status VARCHAR(20) DEFAULT 'scheduled' CHECK (status IN ('scheduled', 'confirmed', 'in_progress', 'completed', 'cancelled')),
    notes TEXT,
    created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- Enable Row Level Security on all tables
ALTER TABLE public.user_profiles ENABLE ROW LEVEL SECURITY;
ALTER TABLE public.customers ENABLE ROW LEVEL SECURITY;
ALTER TABLE public.vehicles ENABLE ROW LEVEL SECURITY;
ALTER TABLE public.suppliers ENABLE ROW LEVEL SECURITY;
ALTER TABLE public.parts_catalog ENABLE ROW LEVEL SECURITY;
ALTER TABLE public.labor_guide ENABLE ROW LEVEL SECURITY;
ALTER TABLE public.inspection_templates ENABLE ROW LEVEL SECURITY;
ALTER TABLE public.inspection_template_items ENABLE ROW LEVEL SECURITY;
ALTER TABLE public.inspections ENABLE ROW LEVEL SECURITY;
ALTER TABLE public.inspection_items ENABLE ROW LEVEL SECURITY;
ALTER TABLE public.estimates ENABLE ROW LEVEL SECURITY;
ALTER TABLE public.estimate_line_items ENABLE ROW LEVEL SECURITY;
ALTER TABLE public.appointments ENABLE ROW LEVEL SECURITY;

-- Create RLS Policies
-- User profiles policies
CREATE POLICY "Users can view own profile" ON public.user_profiles
    FOR SELECT USING (auth.uid() = user_id);

CREATE POLICY "Admins can manage all profiles" ON public.user_profiles
    FOR ALL USING (
        EXISTS (
            SELECT 1 FROM public.user_profiles 
            WHERE user_id = auth.uid() AND role = 'admin'
        )
    );

-- Customers policies
CREATE POLICY "Staff can manage customers" ON public.customers
    FOR ALL USING (
        EXISTS (
            SELECT 1 FROM public.user_profiles 
            WHERE user_id = auth.uid() AND role IN ('admin', 'staff')
        )
    );

-- Vehicles policies  
CREATE POLICY "Staff can manage vehicles" ON public.vehicles
    FOR ALL USING (
        EXISTS (
            SELECT 1 FROM public.user_profiles 
            WHERE user_id = auth.uid() AND role IN ('admin', 'staff', 'technician')
        )
    );

-- Suppliers policies
CREATE POLICY "Staff can manage suppliers" ON public.suppliers
    FOR ALL USING (
        EXISTS (
            SELECT 1 FROM public.user_profiles 
            WHERE user_id = auth.uid() AND role IN ('admin', 'staff')
        )
    );

-- Parts catalog policies
CREATE POLICY "All can view parts" ON public.parts_catalog
    FOR SELECT USING (true);

CREATE POLICY "Staff can manage parts" ON public.parts_catalog
    FOR INSERT, UPDATE, DELETE USING (
        EXISTS (
            SELECT 1 FROM public.user_profiles 
            WHERE user_id = auth.uid() AND role IN ('admin', 'staff')
        )
    );

-- Labor guide policies
CREATE POLICY "All can view labor guide" ON public.labor_guide
    FOR SELECT USING (true);

CREATE POLICY "Admins can manage labor guide" ON public.labor_guide
    FOR INSERT, UPDATE, DELETE USING (
        EXISTS (
            SELECT 1 FROM public.user_profiles 
            WHERE user_id = auth.uid() AND role = 'admin'
        )
    );

-- Inspection templates policies
CREATE POLICY "All can view inspection templates" ON public.inspection_templates
    FOR SELECT USING (true);

CREATE POLICY "Admins can manage inspection templates" ON public.inspection_templates
    FOR INSERT, UPDATE, DELETE USING (
        EXISTS (
            SELECT 1 FROM public.user_profiles 
            WHERE user_id = auth.uid() AND role = 'admin'
        )
    );

-- Create function to handle new user registration
CREATE OR REPLACE FUNCTION public.handle_new_user()
RETURNS TRIGGER AS $$
BEGIN
    INSERT INTO public.user_profiles (user_id, first_name, last_name, role)
    VALUES (
        NEW.id,
        COALESCE(NEW.raw_user_meta_data->>'first_name', 'User'),
        COALESCE(NEW.raw_user_meta_data->>'last_name', 'Name'),
        COALESCE(NEW.raw_user_meta_data->>'role', 'customer')
    );
    RETURN NEW;
END;
$$ LANGUAGE plpgsql SECURITY DEFINER;

-- Create trigger for new user registration
DROP TRIGGER IF EXISTS on_auth_user_created ON auth.users;
CREATE TRIGGER on_auth_user_created
    AFTER INSERT ON auth.users
    FOR EACH ROW EXECUTE FUNCTION public.handle_new_user();

-- Insert sample data
INSERT INTO public.customers (first_name, last_name, email, phone, address, city) VALUES
('Ahmed', 'Hassan', 'ahmed.hassan@email.com', '+252-63-123-4567', 'Jigiga Yar District', 'Hargeisa'),
('Fatima', 'Ali', 'fatima.ali@email.com', '+252-63-234-5678', 'Ahmed Dhagah District', 'Hargeisa'),
('Mohamed', 'Omar', 'mohamed.omar@email.com', '+252-63-345-6789', 'Mohamoud Haibe District', 'Hargeisa'),
('Sahra', 'Abdi', 'sahra.abdi@email.com', '+252-63-456-7890', 'Ibrahim Kodbuur District', 'Hargeisa')
ON CONFLICT (email) DO NOTHING;

-- Insert sample suppliers
INSERT INTO public.suppliers (name, contact_person, email, phone, address, city, category) VALUES
('Hargeisa Auto Parts', 'Abdi Mohamed', 'info@hargeiasautoparts.com', '+252-63-111-2222', 'Main Market Street', 'Hargeisa', 'Parts'),
('Somaliland Motors', 'Khadija Hassan', 'sales@somalilandmotors.com', '+252-63-333-4444', 'Industrial Area', 'Hargeisa', 'Parts & Service'),
('Al-Baraka Spare Parts', 'Omar Ali', 'contact@albaraka.com', '+252-63-555-6666', 'New Market', 'Hargeisa', 'Parts'),
('Horn Auto Supply', 'Amina Jama', 'orders@hornautosupply.com', '+252-63-777-8888', 'Commercial District', 'Hargeisa', 'Parts & Tools');

-- Insert sample parts
INSERT INTO public.parts_catalog (part_number, name, description, category, cost_price, selling_price, stock_quantity) VALUES
('ENG001', 'Engine Oil Filter', 'Standard oil filter for most vehicles', 'Engine', 5.00, 8.00, 50),
('BRK001', 'Brake Pads Set', 'Front brake pads - ceramic', 'Brakes', 25.00, 40.00, 20),
('TIR001', 'All-Season Tire', '195/65R15 All-Season Tire', 'Tires', 45.00, 70.00, 16),
('BAT001', 'Car Battery', '12V 60Ah Car Battery', 'Electrical', 80.00, 120.00, 8);

-- Insert sample labor operations
INSERT INTO public.labor_guide (operation_code, description, category, standard_hours, suggested_rate) VALUES
('OIL001', 'Oil Change Service', 'Maintenance', 0.5, 25.00),
('BRK001', 'Brake Pad Replacement', 'Brakes', 1.5, 75.00),
('TIR001', 'Tire Installation (4 tires)', 'Tires', 1.0, 50.00),
('INS001', 'Vehicle Inspection', 'Inspection', 1.0, 60.00);

-- Insert sample inspection template
INSERT INTO public.inspection_templates (name, description, category) VALUES
('Standard Vehicle Inspection', 'Comprehensive vehicle safety and maintenance inspection', 'General')
ON CONFLICT DO NOTHING;

-- Insert inspection template items
DO $$
DECLARE
    template_uuid UUID;
BEGIN
    SELECT id INTO template_uuid FROM public.inspection_templates WHERE name = 'Standard Vehicle Inspection' LIMIT 1;
    
    IF template_uuid IS NOT NULL THEN
        INSERT INTO public.inspection_template_items (template_id, item_name, category, sort_order) VALUES
        (template_uuid, 'Engine Oil Level', 'Engine', 1),
        (template_uuid, 'Brake Fluid Level', 'Brakes', 2),
        (template_uuid, 'Tire Condition', 'Tires', 3),
        (template_uuid, 'Battery Condition', 'Electrical', 4),
        (template_uuid, 'Lights Operation', 'Electrical', 5),
        (template_uuid, 'Windshield Condition', 'Body', 6)
        ON CONFLICT DO NOTHING;
    END IF;
END $$;
[V0_FILE]sql:file="scripts/create-users-auth-tables.sql"
-- Create users and authentication tables for MASS Car Workshop VWMS
-- Demo Users Authentication System

-- Users table with role-based access
CREATE TABLE IF NOT EXISTS users (
    id SERIAL PRIMARY KEY,
    email VARCHAR(255) UNIQUE NOT NULL,
    password_hash VARCHAR(255) NOT NULL,
    role VARCHAR(50) NOT NULL CHECK (role IN ('admin', 'staff', 'technician', 'customer')),
    first_name VARCHAR(100),
    last_name VARCHAR(100),
    phone VARCHAR(20),
    is_active BOOLEAN DEFAULT true,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

-- User sessions table
CREATE TABLE IF NOT EXISTS user_sessions (
    id SERIAL PRIMARY KEY,
    user_id INTEGER REFERENCES users(id) ON DELETE CASCADE,
    session_token VARCHAR(255) UNIQUE NOT NULL,
    expires_at TIMESTAMP NOT NULL,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

-- Role permissions table
CREATE TABLE IF NOT EXISTS role_permissions (
    id SERIAL PRIMARY KEY,
    role VARCHAR(50) NOT NULL,
    module VARCHAR(100) NOT NULL,
    permissions JSON NOT NULL,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

-- Insert demo users (passwords are hashed version of '123456')
-- Note: In production, use proper password hashing like bcrypt
INSERT INTO users (email, password_hash, role, first_name, last_name, phone) VALUES
('admin@masscar.com', '$2b$10$rOzJqQZ8kVx.QvF5L5YzKOqGqF5L5YzKOqGqF5L5YzKOqGqF5L5Yz', 'admin', 'System', 'Administrator', '+252-61-234-5678'),
('staff@masscar.com', '$2b$10$rOzJqQZ8kVx.QvF5L5YzKOqGqF5L5YzKOqGqF5L5YzKOqGqF5L5Yz', 'staff', 'Workshop', 'Staff', '+252-61-234-5679'),
('tech@masscar.com', '$2b$10$rOzJqQZ8kVx.QvF5L5YzKOqGqF5L5YzKOqGqF5L5YzKOqGqF5L5Yz', 'technician', 'Senior', 'Technician', '+252-61-234-5680'),
('customer@masscar.com', '$2b$10$rOzJqQZ8kVx.QvF5L5YzKOqGqF5L5YzKOqGqF5L5YzKOqGqF5L5Yz', 'customer', 'Demo', 'Customer', '+252-61-234-5681');

-- Insert role permissions
INSERT INTO role_permissions (role, module, permissions) VALUES
-- Admin permissions (full access)
('admin', 'dashboard', '{"read": true, "write": true, "delete": true, "manage": true}'),
('admin', 'customers', '{"read": true, "write": true, "delete": true, "manage": true}'),
('admin', 'vehicles', '{"read": true, "write": true, "delete": true, "manage": true}'),
('admin', 'appointments', '{"read": true, "write": true, "delete": true, "manage": true}'),
('admin', 'technicians', '{"read": true, "write": true, "delete": true, "manage": true}'),
('admin', 'suppliers', '{"read": true, "write": true, "delete": true, "manage": true}'),
('admin', 'inspections', '{"read": true, "write": true, "delete": true, "manage": true}'),
('admin', 'estimates', '{"read": true, "write": true, "delete": true, "manage": true}'),
('admin', 'inventory', '{"read": true, "write": true, "delete": true, "manage": true}'),
('admin', 'reports', '{"read": true, "write": true, "delete": false, "manage": true}'),
('admin', 'ai-tools', '{"read": true, "write": true, "delete": false, "manage": true}'),

-- Staff permissions (most modules, limited delete)
('staff', 'dashboard', '{"read": true, "write": false, "delete": false, "manage": false}'),
('staff', 'customers', '{"read": true, "write": true, "delete": false, "manage": false}'),
('staff', 'vehicles', '{"read": true, "write": true, "delete": false, "manage": false}'),
('staff', 'appointments', '{"read": true, "write": true, "delete": false, "manage": true}'),
('staff', 'technicians', '{"read": true, "write": false, "delete": false, "manage": false}'),
('staff', 'suppliers', '{"read": true, "write": true, "delete": false, "manage": false}'),
('staff', 'inspections', '{"read": true, "write": true, "delete": false, "manage": false}'),
('staff', 'estimates', '{"read": true, "write": true, "delete": false, "manage": true}'),
('staff', 'inventory', '{"read": true, "write": true, "delete": false, "manage": false}'),
('staff', 'reports', '{"read": true, "write": false, "delete": false, "manage": false}'),
('staff', 'ai-tools', '{"read": true, "write": true, "delete": false, "manage": false}'),

-- Technician permissions (focused on technical work)
('technician', 'dashboard', '{"read": true, "write": false, "delete": false, "manage": false}'),
('technician', 'customers', '{"read": true, "write": false, "delete": false, "manage": false}'),
('technician', 'vehicles', '{"read": true, "write": true, "delete": false, "manage": false}'),
('technician', 'appointments', '{"read": true, "write": true, "delete": false, "manage": false}'),
('technician', 'technicians', '{"read": true, "write": false, "delete": false, "manage": false}'),
('technician', 'suppliers', '{"read": true, "write": false, "delete": false, "manage": false}'),
('technician', 'inspections', '{"read": true, "write": true, "delete": false, "manage": true}'),
('technician', 'estimates', '{"read": true, "write": true, "delete": false, "manage": false}'),
('technician', 'inventory', '{"read": true, "write": false, "delete": false, "manage": false}'),
('technician', 'reports', '{"read": true, "write": false, "delete": false, "manage": false}'),
('technician', 'ai-tools', '{"read": true, "write": true, "delete": false, "manage": false}'),

-- Customer permissions (limited access)
('customer', 'dashboard', '{"read": true, "write": false, "delete": false, "manage": false}'),
('customer', 'vehicles', '{"read": true, "write": false, "delete": false, "manage": false}'),
('customer', 'appointments', '{"read": true, "write": true, "delete": false, "manage": false}'),
('customer', 'inspections', '{"read": true, "write": false, "delete": false, "manage": false}'),
('customer', 'estimates', '{"read": true, "write": false, "delete": false, "manage": false}');

-- Create indexes for better performance
CREATE INDEX idx_users_email ON users(email);
CREATE INDEX idx_users_role ON users(role);
CREATE INDEX idx_user_sessions_token ON user_sessions(session_token);
CREATE INDEX idx_user_sessions_user_id ON user_sessions(user_id);
CREATE INDEX idx_role_permissions_role ON role_permissions(role);
[V0_FILE]sql:file="scripts/supabase-setup-v2.sql"
-- Updated Supabase setup for new project
-- Run this in your Supabase SQL Editor

-- Enable Row Level Security
ALTER TABLE auth.users ENABLE ROW LEVEL SECURITY;

-- Create user profiles table
CREATE TABLE IF NOT EXISTS public.user_profiles (
    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    user_id UUID REFERENCES auth.users(id) ON DELETE CASCADE,
    first_name VARCHAR(50) NOT NULL,
    last_name VARCHAR(50) NOT NULL,
    phone VARCHAR(20),
    role VARCHAR(20) NOT NULL DEFAULT 'customer' CHECK (role IN ('admin', 'staff', 'technician', 'customer')),
    is_active BOOLEAN DEFAULT true,
    created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
    updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
    UNIQUE(user_id)
);

-- Create RLS policies for user_profiles
CREATE POLICY "Users can view own profile" ON public.user_profiles
    FOR SELECT USING (auth.uid() = user_id);

CREATE POLICY "Users can update own profile" ON public.user_profiles
    FOR UPDATE USING (auth.uid() = user_id);

CREATE POLICY "Admins can view all profiles" ON public.user_profiles
    FOR SELECT USING (
        EXISTS (
            SELECT 1 FROM public.user_profiles 
            WHERE user_id = auth.uid() AND role = 'admin'
        )
    );

-- Create function to handle user registration
CREATE OR REPLACE FUNCTION public.handle_new_user()
RETURNS TRIGGER AS $$
BEGIN
    INSERT INTO public.user_profiles (user_id, first_name, last_name, role)
    VALUES (
        NEW.id,
        COALESCE(NEW.raw_user_meta_data->>'first_name', 'User'),
        COALESCE(NEW.raw_user_meta_data->>'last_name', 'Name'),
        COALESCE(NEW.raw_user_meta_data->>'role', 'customer')
    );
    RETURN NEW;
END;
$$ LANGUAGE plpgsql SECURITY DEFINER;

-- Create updated_at trigger function
CREATE OR REPLACE FUNCTION public.update_updated_at_column()
RETURNS TRIGGER AS $$
BEGIN
    NEW.updated_at = NOW();
    RETURN NEW;
END;
$$ LANGUAGE plpgsql;

-- Create trigger for updated_at
CREATE TRIGGER update_user_profiles_updated_at
    BEFORE UPDATE ON public.user_profiles
    FOR EACH ROW EXECUTE FUNCTION public.update_updated_at_column();

-- Create audit log table
CREATE TABLE IF NOT EXISTS public.audit_logs (
    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    user_id UUID REFERENCES auth.users(id),
    action VARCHAR(100) NOT NULL,
    table_name VARCHAR(50),
    record_id UUID,
    old_values JSONB,
    new_values JSONB,
    ip_address INET,
    user_agent TEXT,
    created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- Create RLS policy for audit logs
CREATE POLICY "Admins can view audit logs" ON public.audit_logs
    FOR SELECT USING (
        EXISTS (
            SELECT 1 FROM public.user_profiles 
            WHERE user_id = auth.uid() AND role = 'admin'
        )
    );

-- Insert demo user profiles (after creating auth users manually)
-- Note: You'll need to create the auth users first in Supabase Auth UI
-- Then run these inserts with the actual user IDs

-- Example insert (replace with actual user IDs from auth.users):
-- INSERT INTO public.user_profiles (user_id, first_name, last_name, role) VALUES
-- ('your-admin-user-id', 'Admin', 'User', 'admin'),
-- ('your-staff-user-id', 'Staff', 'User', 'staff'),
-- ('your-tech-user-id', 'Tech', 'User', 'technician'),
-- ('your-customer-user-id', 'Customer', 'User', 'customer');
[V0_FILE]sql:file="scripts/supabase-setup.sql"
-- Enable Row Level Security
ALTER TABLE auth.users ENABLE ROW LEVEL SECURITY;

-- Create RLS policies for user_profiles
CREATE POLICY "Users can view own profile" ON public.user_profiles
    FOR SELECT USING (auth.uid() = user_id);

CREATE POLICY "Users can update own profile" ON public.user_profiles
    FOR UPDATE USING (auth.uid() = user_id);

-- Insert demo users (you'll need to create these through Supabase Auth)
-- These are just the profile records - the auth records need to be created separately

-- Create updated_at trigger function
CREATE OR REPLACE FUNCTION public.update_updated_at_column()
RETURNS TRIGGER AS $$
BEGIN
    NEW.updated_at = NOW();
    RETURN NEW;
END;
$$ LANGUAGE plpgsql;

-- Create trigger for updated_at
CREATE TRIGGER update_user_profiles_updated_at
    BEFORE UPDATE ON public.user_profiles
    FOR EACH ROW EXECUTE FUNCTION public.update_updated_at_column();

body {
  font-family: Arial, Helvetica, sans-serif;
}

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }
}

@layer base {
  :root {
    --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]typescript:file="tailwind.config.ts"
import type { Config } from "tailwindcss";

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]typescriptreact:file="technician-dashboard.tsx"
import { TechnicianDashboard } from "./components/technicians/technician-dashboard"

export default function TechnicianDashboardPage() {
  return <TechnicianDashboard />
}
[V0_FILE]json:file="tsconfig.json"
{
  "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/placeholder-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_IJzZz4OFL8qzXpQuGVVFRGLprSx3/1uv3SMJqY6_jxcFCTgTEak/public/placeholder-logo.png"
[V0_FILE]xml:file="public/placeholder-logo.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_IJzZz4OFL8qzXpQuGVVFRGLprSx3/XB_XF8ESrwbAjotfOd5Wmb/public/placeholder-logo.svg"
[V0_FILE]jpg:file="public/placeholder-user.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_IJzZz4OFL8qzXpQuGVVFRGLprSx3/ONejAluG3EJATcwwA61bXn/public/placeholder-user.jpg"
[V0_FILE]jpg:file="public/placeholder.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_IJzZz4OFL8qzXpQuGVVFRGLprSx3/BlrBc_c6JuPtjsBHFMcNJn/public/placeholder.jpg"
[V0_FILE]xml:file="public/placeholder.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_IJzZz4OFL8qzXpQuGVVFRGLprSx3/J0QvC3Vjlpi92ZtRdLC4Mx/public/placeholder.svg"
[V0_FILE]sql:file="scripts/complete-supabase-database-setup.sql"
-- =====================================================
-- MASS Car Workshop VWMS - Complete Database Setup
-- =====================================================
-- Run this entire script in your Supabase SQL Editor
-- This creates all tables, policies, functions, and sample data

-- Enable necessary extensions
CREATE EXTENSION IF NOT EXISTS "uuid-ossp";
CREATE EXTENSION IF NOT EXISTS "pgcrypto";

-- =====================================================
-- 1. USER PROFILES & AUTHENTICATION
-- =====================================================

-- Create user profiles table (extends Supabase auth.users)
CREATE TABLE IF NOT EXISTS public.user_profiles (
    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    user_id UUID REFERENCES auth.users(id) ON DELETE CASCADE,
    first_name VARCHAR(50) NOT NULL,
    last_name VARCHAR(50) NOT NULL,
    phone VARCHAR(20),
    role VARCHAR(20) NOT NULL DEFAULT 'customer' CHECK (role IN ('admin', 'staff', 'technician', 'customer')),
    is_active BOOLEAN DEFAULT true,
    avatar_url TEXT,
    created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
    updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
    UNIQUE(user_id)
);

-- =====================================================
-- 2. CUSTOMERS & VEHICLES
-- =====================================================

-- Create customers table
CREATE TABLE IF NOT EXISTS public.customers (
    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    customer_number VARCHAR(20) UNIQUE NOT NULL DEFAULT 'CUST-' || LPAD(nextval('customer_seq')::TEXT, 6, '0'),
    first_name VARCHAR(50) NOT NULL,
    last_name VARCHAR(50) NOT NULL,
    email VARCHAR(100) UNIQUE,
    phone VARCHAR(20),
    address TEXT,
    city VARCHAR(50) DEFAULT 'Hargeisa',
    country VARCHAR(50) DEFAULT 'Somaliland',
    date_of_birth DATE,
    preferred_contact VARCHAR(20) DEFAULT 'phone' CHECK (preferred_contact IN ('phone', 'email', 'sms')),
    notes TEXT,
    is_active BOOLEAN DEFAULT true,
    created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
    updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- Create sequence for customer numbers
CREATE SEQUENCE IF NOT EXISTS customer_seq START 1;

-- Create vehicles table
CREATE TABLE IF NOT EXISTS public.vehicles (
    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    customer_id UUID REFERENCES public.customers(id) ON DELETE CASCADE,
    make VARCHAR(50) NOT NULL,
    model VARCHAR(50) NOT NULL,
    year INTEGER NOT NULL CHECK (year >= 1900 AND year <= EXTRACT(YEAR FROM NOW()) + 1),
    vin VARCHAR(17) UNIQUE,
    license_plate VARCHAR(20),
    color VARCHAR(30),
    engine_type VARCHAR(50),
    transmission VARCHAR(20),
    fuel_type VARCHAR(20) DEFAULT 'gasoline',
    mileage INTEGER DEFAULT 0,
    last_service_date DATE,
    next_service_due INTEGER,
    insurance_expiry DATE,
    registration_expiry DATE,
    notes TEXT,
    is_active BOOLEAN DEFAULT true,
    created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
    updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- =====================================================
-- 3. SUPPLIERS & INVENTORY
-- =====================================================

-- Create suppliers table
CREATE TABLE IF NOT EXISTS public.suppliers (
    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    supplier_code VARCHAR(20) UNIQUE NOT NULL DEFAULT 'SUP-' || LPAD(nextval('supplier_seq')::TEXT, 4, '0'),
    name VARCHAR(100) NOT NULL,
    contact_person VARCHAR(100),
    email VARCHAR(100),
    phone VARCHAR(20),
    address TEXT,
    city VARCHAR(50) DEFAULT 'Hargeisa',
    country VARCHAR(50) DEFAULT 'Somaliland',
    category VARCHAR(50),
    payment_terms VARCHAR(50),
    credit_limit DECIMAL(12,2) DEFAULT 0,
    tax_id VARCHAR(50),
    website VARCHAR(200),
    notes TEXT,
    is_active BOOLEAN DEFAULT true,
    created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
    updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- Create sequence for supplier codes
CREATE SEQUENCE IF NOT EXISTS supplier_seq START 1;

-- Create parts catalog table
CREATE TABLE IF NOT EXISTS public.parts_catalog (
    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    part_number VARCHAR(50) NOT NULL UNIQUE,
    name VARCHAR(100) NOT NULL,
    description TEXT,
    category VARCHAR(50),
    subcategory VARCHAR(50),
    brand VARCHAR(50),
    supplier_id UUID REFERENCES public.suppliers(id),
    cost_price DECIMAL(10,2),
    selling_price DECIMAL(10,2),
    markup_percentage DECIMAL(5,2),
    stock_quantity INTEGER DEFAULT 0,
    min_stock_level INTEGER DEFAULT 5,
    max_stock_level INTEGER DEFAULT 100,
    reorder_point INTEGER DEFAULT 10,
    unit_of_measure VARCHAR(20) DEFAULT 'piece',
    weight DECIMAL(8,2),
    dimensions VARCHAR(50),
    warranty_period INTEGER, -- in months
    barcode VARCHAR(50),
    location VARCHAR(50),
    is_active BOOLEAN DEFAULT true,
    created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
    updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- Create inventory transactions table
CREATE TABLE IF NOT EXISTS public.inventory_transactions (
    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    part_id UUID REFERENCES public.parts_catalog(id) ON DELETE CASCADE,
    transaction_type VARCHAR(20) NOT NULL CHECK (transaction_type IN ('in', 'out', 'adjustment', 'transfer')),
    quantity INTEGER NOT NULL,
    unit_cost DECIMAL(10,2),
    total_cost DECIMAL(10,2),
    reference_type VARCHAR(20), -- 'purchase', 'sale', 'adjustment', 'return'
    reference_id UUID,
    notes TEXT,
    created_by UUID REFERENCES public.user_profiles(id),
    created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- =====================================================
-- 4. LABOR GUIDE & SERVICES
-- =====================================================

-- Create labor guide table
CREATE TABLE IF NOT EXISTS public.labor_guide (
    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    operation_code VARCHAR(20) NOT NULL UNIQUE,
    description TEXT NOT NULL,
    category VARCHAR(50),
    subcategory VARCHAR(50),
    standard_hours DECIMAL(4,2) NOT NULL,
    suggested_rate DECIMAL(8,2) NOT NULL,
    skill_level VARCHAR(20) DEFAULT 'intermediate' CHECK (skill_level IN ('basic', 'intermediate', 'advanced', 'expert')),
    tools_required TEXT[],
    safety_notes TEXT,
    is_active BOOLEAN DEFAULT true,
    created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
    updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- Create service packages table
CREATE TABLE IF NOT EXISTS public.service_packages (
    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    name VARCHAR(100) NOT NULL,
    description TEXT,
    category VARCHAR(50),
    duration_hours DECIMAL(4,2),
    price DECIMAL(10,2),
    includes TEXT[],
    is_active BOOLEAN DEFAULT true,
    created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- =====================================================
-- 5. APPOINTMENTS & SCHEDULING
-- =====================================================

-- Create appointments table
CREATE TABLE IF NOT EXISTS public.appointments (
    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    appointment_number VARCHAR(20) UNIQUE NOT NULL DEFAULT 'APT-' || LPAD(nextval('appointment_seq')::TEXT, 6, '0'),
    customer_id UUID REFERENCES public.customers(id) ON DELETE CASCADE,
    vehicle_id UUID REFERENCES public.vehicles(id) ON DELETE CASCADE,
    technician_id UUID REFERENCES public.user_profiles(id),
    service_advisor_id UUID REFERENCES public.user_profiles(id),
    appointment_date TIMESTAMP WITH TIME ZONE NOT NULL,
    duration_minutes INTEGER DEFAULT 60,
    service_type VARCHAR(50),
    service_package_id UUID REFERENCES public.service_packages(id),
    status VARCHAR(20) DEFAULT 'scheduled' CHECK (status IN ('scheduled', 'confirmed', 'in_progress', 'completed', 'cancelled', 'no_show')),
    priority VARCHAR(10) DEFAULT 'normal' CHECK (priority IN ('low', 'normal', 'high', 'urgent')),
    customer_notes TEXT,
    internal_notes TEXT,
    estimated_cost DECIMAL(10,2),
    reminder_sent BOOLEAN DEFAULT false,
    created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
    updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- Create sequence for appointment numbers
CREATE SEQUENCE IF NOT EXISTS appointment_seq START 1;

-- =====================================================
-- 6. JOB CARDS & WORK ORDERS
-- =====================================================

-- Create job cards table
CREATE TABLE IF NOT EXISTS public.job_cards (
    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    job_number VARCHAR(20) UNIQUE NOT NULL DEFAULT 'JOB-' || LPAD(nextval('job_seq')::TEXT, 6, '0'),
    appointment_id UUID REFERENCES public.appointments(id),
    customer_id UUID REFERENCES public.customers(id) ON DELETE CASCADE,
    vehicle_id UUID REFERENCES public.vehicles(id) ON DELETE CASCADE,
    technician_id UUID REFERENCES public.user_profiles(id),
    service_advisor_id UUID REFERENCES public.user_profiles(id),
    status VARCHAR(20) DEFAULT 'open' CHECK (status IN ('open', 'in_progress', 'waiting_parts', 'waiting_approval', 'completed', 'invoiced', 'cancelled')),
    priority VARCHAR(10) DEFAULT 'normal' CHECK (priority IN ('low', 'normal', 'high', 'urgent')),
    customer_complaint TEXT,
    diagnosis TEXT,
    work_performed TEXT,
    recommendations TEXT,
    mileage_in INTEGER,
    mileage_out INTEGER,
    labor_hours DECIMAL(4,2) DEFAULT 0,
    parts_total DECIMAL(10,2) DEFAULT 0,
    labor_total DECIMAL(10,2) DEFAULT 0,
    tax_amount DECIMAL(10,2) DEFAULT 0,
    total_amount DECIMAL(10,2) DEFAULT 0,
    started_at TIMESTAMP WITH TIME ZONE,
    completed_at TIMESTAMP WITH TIME ZONE,
    created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
    updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- Create sequence for job numbers
CREATE SEQUENCE IF NOT EXISTS job_seq START 1;

-- Create job card line items table
CREATE TABLE IF NOT EXISTS public.job_card_line_items (
    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    job_card_id UUID REFERENCES public.job_cards(id) ON DELETE CASCADE,
    type VARCHAR(20) NOT NULL CHECK (type IN ('part', 'labor', 'service', 'misc')),
    description TEXT NOT NULL,
    part_id UUID REFERENCES public.parts_catalog(id),
    labor_id UUID REFERENCES public.labor_guide(id),
    quantity DECIMAL(8,2) DEFAULT 1,
    unit_price DECIMAL(10,2) NOT NULL,
    discount_percentage DECIMAL(5,2) DEFAULT 0,
    discount_amount DECIMAL(10,2) DEFAULT 0,
    total_price DECIMAL(10,2) NOT NULL,
    is_approved BOOLEAN DEFAULT false,
    technician_id UUID REFERENCES public.user_profiles(id),
    sort_order INTEGER DEFAULT 0,
    created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- =====================================================
-- 7. DIGITAL VEHICLE INSPECTIONS (DVI)
-- =====================================================

-- Create inspection templates table
CREATE TABLE IF NOT EXISTS public.inspection_templates (
    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    name VARCHAR(100) NOT NULL,
    description TEXT,
    category VARCHAR(50),
    version VARCHAR(10) DEFAULT '1.0',
    is_default BOOLEAN DEFAULT false,
    is_active BOOLEAN DEFAULT true,
    created_by UUID REFERENCES public.user_profiles(id),
    created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
    updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- Create inspection template items table
CREATE TABLE IF NOT EXISTS public.inspection_template_items (
    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    template_id UUID REFERENCES public.inspection_templates(id) ON DELETE CASCADE,
    item_name VARCHAR(100) NOT NULL,
    category VARCHAR(50),
    subcategory VARCHAR(50),
    inspection_type VARCHAR(20) DEFAULT 'visual' CHECK (inspection_type IN ('visual', 'measurement', 'test', 'photo')),
    sort_order INTEGER DEFAULT 0,
    is_required BOOLEAN DEFAULT false,
    pass_criteria TEXT,
    fail_criteria TEXT,
    measurement_unit VARCHAR(20),
    min_value DECIMAL(10,2),
    max_value DECIMAL(10,2),
    created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- Create inspections table
CREATE TABLE IF NOT EXISTS public.inspections (
    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    inspection_number VARCHAR(20) UNIQUE NOT NULL DEFAULT 'INS-' || LPAD(nextval('inspection_seq')::TEXT, 6, '0'),
    job_card_id UUID REFERENCES public.job_cards(id),
    vehicle_id UUID REFERENCES public.vehicles(id) ON DELETE CASCADE,
    customer_id UUID REFERENCES public.customers(id) ON DELETE CASCADE,
    technician_id UUID REFERENCES public.user_profiles(id),
    template_id UUID REFERENCES public.inspection_templates(id),
    status VARCHAR(20) DEFAULT 'in_progress' CHECK (status IN ('draft', 'in_progress', 'completed', 'approved', 'declined')),
    mileage INTEGER,
    fuel_level VARCHAR(20),
    overall_condition VARCHAR(20) DEFAULT 'good' CHECK (overall_condition IN ('excellent', 'good', 'fair', 'poor')),
    safety_rating VARCHAR(20) DEFAULT 'safe' CHECK (safety_rating IN ('safe', 'attention_needed', 'unsafe')),
    customer_notes TEXT,
    technician_notes TEXT,
    recommendations TEXT,
    next_inspection_due DATE,
    started_at TIMESTAMP WITH TIME ZONE,
    completed_at TIMESTAMP WITH TIME ZONE,
    approved_at TIMESTAMP WITH TIME ZONE,
    created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
    updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- Create sequence for inspection numbers
CREATE SEQUENCE IF NOT EXISTS inspection_seq START 1;

-- Create inspection items table
CREATE TABLE IF NOT EXISTS public.inspection_items (
    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    inspection_id UUID REFERENCES public.inspections(id) ON DELETE CASCADE,
    template_item_id UUID REFERENCES public.inspection_template_items(id),
    item_name VARCHAR(100) NOT NULL,
    category VARCHAR(50),
    status VARCHAR(20) DEFAULT 'ok' CHECK (status IN ('ok', 'attention', 'immediate_attention', 'not_applicable')),
    condition_rating INTEGER CHECK (condition_rating >= 1 AND condition_rating <= 5),
    measured_value DECIMAL(10,2),
    notes TEXT,
    recommendations TEXT,
    photo_urls TEXT[],
    video_url TEXT,
    sort_order INTEGER DEFAULT 0,
    created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- Create inspection photos table
CREATE TABLE IF NOT EXISTS public.inspection_photos (
    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    inspection_id UUID REFERENCES public.inspections(id) ON DELETE CASCADE,
    inspection_item_id UUID REFERENCES public.inspection_items(id) ON DELETE CASCADE,
    photo_url TEXT NOT NULL,
    caption TEXT,
    photo_type VARCHAR(20) DEFAULT 'general' CHECK (photo_type IN ('general', 'damage', 'wear', 'before', 'after')),
    sort_order INTEGER DEFAULT 0,
    created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- =====================================================
-- 8. ESTIMATES & APPROVALS
-- =====================================================

-- Create estimates table
CREATE TABLE IF NOT EXISTS public.estimates (
    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    estimate_number VARCHAR(20) UNIQUE NOT NULL DEFAULT 'EST-' || LPAD(nextval('estimate_seq')::TEXT, 6, '0'),
    job_card_id UUID REFERENCES public.job_cards(id),
    inspection_id UUID REFERENCES public.inspections(id),
    customer_id UUID REFERENCES public.customers(id) ON DELETE CASCADE,
    vehicle_id UUID REFERENCES public.vehicles(id) ON DELETE CASCADE,
    technician_id UUID REFERENCES public.user_profiles(id),
    service_advisor_id UUID REFERENCES public.user_profiles(id),
    status VARCHAR(20) DEFAULT 'draft' CHECK (status IN ('draft', 'sent', 'viewed', 'approved', 'declined', 'expired', 'revised')),
    priority VARCHAR(10) DEFAULT 'normal' CHECK (priority IN ('low', 'normal', 'high', 'urgent')),
    work_description TEXT,
    customer_notes TEXT,
    internal_notes TEXT,
    subtotal DECIMAL(10,2) DEFAULT 0,
    discount_percentage DECIMAL(5,2) DEFAULT 0,
    discount_amount DECIMAL(10,2) DEFAULT 0,
    tax_percentage DECIMAL(5,2) DEFAULT 0,
    tax_amount DECIMAL(10,2) DEFAULT 0,
    total_amount DECIMAL(10,2) DEFAULT 0,
    valid_until DATE,
    sent_at TIMESTAMP WITH TIME ZONE,
    viewed_at TIMESTAMP WITH TIME ZONE,
    approved_at TIMESTAMP WITH TIME ZONE,
    declined_at TIMESTAMP WITH TIME ZONE,
    decline_reason TEXT,
    created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
    updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- Create sequence for estimate numbers
CREATE SEQUENCE IF NOT EXISTS estimate_seq START 1;

-- Create estimate line items table
CREATE TABLE IF NOT EXISTS public.estimate_line_items (
    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    estimate_id UUID REFERENCES public.estimates(id) ON DELETE CASCADE,
    type VARCHAR(20) NOT NULL CHECK (type IN ('part', 'labor', 'service', 'misc')),
    category VARCHAR(50),
    description TEXT NOT NULL,
    part_id UUID REFERENCES public.parts_catalog(id),
    labor_id UUID REFERENCES public.labor_guide(id),
    quantity DECIMAL(8,2) DEFAULT 1,
    unit_price DECIMAL(10,2) NOT NULL,
    discount_percentage DECIMAL(5,2) DEFAULT 0,
    discount_amount DECIMAL(10,2) DEFAULT 0,
    total_price DECIMAL(10,2) NOT NULL,
    is_approved BOOLEAN DEFAULT false,
    customer_approved BOOLEAN DEFAULT false,
    priority VARCHAR(10) DEFAULT 'normal' CHECK (priority IN ('low', 'normal', 'high', 'urgent')),
    sort_order INTEGER DEFAULT 0,
    created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- Create customer approvals table
CREATE TABLE IF NOT EXISTS public.customer_approvals (
    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    estimate_id UUID REFERENCES public.estimates(id) ON DELETE CASCADE,
    customer_id UUID REFERENCES public.customers(id) ON DELETE CASCADE,
    approval_method VARCHAR(20) DEFAULT 'digital' CHECK (approval_method IN ('digital', 'phone', 'email', 'in_person')),
    ip_address INET,
    user_agent TEXT,
    signature_data TEXT, -- Base64 encoded signature
    approved_items UUID[], -- Array of estimate line item IDs
    declined_items UUID[], -- Array of estimate line item IDs
    total_approved_amount DECIMAL(10,2),
    notes TEXT,
    approved_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- =====================================================
-- 9. INVOICING & PAYMENTS
-- =====================================================

-- Create invoices table
CREATE TABLE IF NOT EXISTS public.invoices (
    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    invoice_number VARCHAR(20) UNIQUE NOT NULL DEFAULT 'INV-' || LPAD(nextval('invoice_seq')::TEXT, 6, '0'),
    job_card_id UUID REFERENCES public.job_cards(id),
    estimate_id UUID REFERENCES public.estimates(id),
    customer_id UUID REFERENCES public.customers(id) ON DELETE CASCADE,
    vehicle_id UUID REFERENCES public.vehicles(id) ON DELETE CASCADE,
    status VARCHAR(20) DEFAULT 'draft' CHECK (status IN ('draft', 'sent', 'paid', 'partial', 'overdue', 'cancelled')),
    subtotal DECIMAL(10,2) DEFAULT 0,
    discount_amount DECIMAL(10,2) DEFAULT 0,
    tax_amount DECIMAL(10,2) DEFAULT 0,
    total_amount DECIMAL(10,2) DEFAULT 0,
    paid_amount DECIMAL(10,2) DEFAULT 0,
    balance_due DECIMAL(10,2) DEFAULT 0,
    due_date DATE,
    payment_terms VARCHAR(50) DEFAULT 'Net 30',
    notes TEXT,
    sent_at TIMESTAMP WITH TIME ZONE,
    created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
    updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- Create sequence for invoice numbers
CREATE SEQUENCE IF NOT EXISTS invoice_seq START 1;

-- Create payments table
CREATE TABLE IF NOT EXISTS public.payments (
    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    payment_number VARCHAR(20) UNIQUE NOT NULL DEFAULT 'PAY-' || LPAD(nextval('payment_seq')::TEXT, 6, '0'),
    invoice_id UUID REFERENCES public.invoices(id) ON DELETE CASCADE,
    customer_id UUID REFERENCES public.customers(id) ON DELETE CASCADE,
    amount DECIMAL(10,2) NOT NULL,
    payment_method VARCHAR(20) DEFAULT 'cash' CHECK (payment_method IN ('cash', 'card', 'bank_transfer', 'mobile_money', 'check')),
    reference_number VARCHAR(50),
    notes TEXT,
    processed_by UUID REFERENCES public.user_profiles(id),
    payment_date TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
    created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- Create sequence for payment numbers
CREATE SEQUENCE IF NOT EXISTS payment_seq START 1;

-- =====================================================
-- 10. NOTIFICATIONS & COMMUNICATIONS
-- =====================================================

-- Create notifications table
CREATE TABLE IF NOT EXISTS public.notifications (
    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    user_id UUID REFERENCES public.user_profiles(id) ON DELETE CASCADE,
    type VARCHAR(50) NOT NULL,
    title VARCHAR(200) NOT NULL,
    message TEXT NOT NULL,
    data JSONB,
    is_read BOOLEAN DEFAULT false,
    priority VARCHAR(10) DEFAULT 'normal' CHECK (priority IN ('low', 'normal', 'high', 'urgent')),
    expires_at TIMESTAMP WITH TIME ZONE,
    created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- Create communication logs table
CREATE TABLE IF NOT EXISTS public.communication_logs (
    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    customer_id UUID REFERENCES public.customers(id) ON DELETE CASCADE,
    type VARCHAR(20) NOT NULL CHECK (type IN ('email', 'sms', 'call', 'whatsapp')),
    direction VARCHAR(10) NOT NULL CHECK (direction IN ('inbound', 'outbound')),
    subject VARCHAR(200),
    content TEXT,
    status VARCHAR(20) DEFAULT 'sent' CHECK (status IN ('sent', 'delivered', 'failed', 'pending')),
    sent_by UUID REFERENCES public.user_profiles(id),
    created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- =====================================================
-- 11. AUDIT LOGS & SYSTEM LOGS
-- =====================================================

-- Create audit logs table
CREATE TABLE IF NOT EXISTS public.audit_logs (
    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    user_id UUID REFERENCES auth.users(id),
    action VARCHAR(100) NOT NULL,
    table_name VARCHAR(50),
    record_id UUID,
    old_values JSONB,
    new_values JSONB,
    ip_address INET,
    user_agent TEXT,
    created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- Create system logs table
CREATE TABLE IF NOT EXISTS public.system_logs (
    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    level VARCHAR(10) NOT NULL CHECK (level IN ('debug', 'info', 'warn', 'error', 'fatal')),
    message TEXT NOT NULL,
    context JSONB,
    user_id UUID REFERENCES auth.users(id),
    ip_address INET,
    created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- =====================================================
-- 12. ENABLE ROW LEVEL SECURITY
-- =====================================================

-- Enable RLS on all tables
ALTER TABLE public.user_profiles ENABLE ROW LEVEL SECURITY;
ALTER TABLE public.customers ENABLE ROW LEVEL SECURITY;
ALTER TABLE public.vehicles ENABLE ROW LEVEL SECURITY;
ALTER TABLE public.suppliers ENABLE ROW LEVEL SECURITY;
ALTER TABLE public.parts_catalog ENABLE ROW LEVEL SECURITY;
ALTER TABLE public.inventory_transactions ENABLE ROW LEVEL SECURITY;
ALTER TABLE public.labor_guide ENABLE ROW LEVEL SECURITY;
ALTER TABLE public.service_packages ENABLE ROW LEVEL SECURITY;
ALTER TABLE public.appointments ENABLE ROW LEVEL SECURITY;
ALTER TABLE public.job_cards ENABLE ROW LEVEL SECURITY;
ALTER TABLE public.job_card_line_items ENABLE ROW LEVEL SECURITY;
ALTER TABLE public.inspection_templates ENABLE ROW LEVEL SECURITY;
ALTER TABLE public.inspection_template_items ENABLE ROW LEVEL SECURITY;
ALTER TABLE public.inspections ENABLE ROW LEVEL SECURITY;
ALTER TABLE public.inspection_items ENABLE ROW LEVEL SECURITY;
ALTER TABLE public.inspection_photos ENABLE ROW LEVEL SECURITY;
ALTER TABLE public.estimates ENABLE ROW LEVEL SECURITY;
ALTER TABLE public.estimate_line_items ENABLE ROW LEVEL SECURITY;
ALTER TABLE public.customer_approvals ENABLE ROW LEVEL SECURITY;
ALTER TABLE public.invoices ENABLE ROW LEVEL SECURITY;
ALTER TABLE public.payments ENABLE ROW LEVEL SECURITY;
ALTER TABLE public.notifications ENABLE ROW LEVEL SECURITY;
ALTER TABLE public.communication_logs ENABLE ROW LEVEL SECURITY;
ALTER TABLE public.audit_logs ENABLE ROW LEVEL SECURITY;
ALTER TABLE public.system_logs ENABLE ROW LEVEL SECURITY;

-- =====================================================
-- 13. CREATE RLS POLICIES
-- =====================================================

-- User profiles policies
CREATE POLICY "Users can view own profile" ON public.user_profiles
    FOR SELECT USING (auth.uid() = user_id);

CREATE POLICY "Users can update own profile" ON public.user_profiles
    FOR UPDATE USING (auth.uid() = user_id);

CREATE POLICY "Staff can view all profiles" ON public.user_profiles
    FOR SELECT USING (
        EXISTS (
            SELECT 1 FROM public.user_profiles 
            WHERE user_id = auth.uid() AND role IN ('admin', 'staff')
        )
    );

-- Parts catalog policies
CREATE POLICY "All can view parts" ON public.parts_catalog
    FOR SELECT USING (true);

-- Labor guide policies
CREATE POLICY "All can view labor guide" ON public.labor_guide
    FOR SELECT USING (true);

-- General policy for most tables (staff and above can manage)
DO $$
DECLARE
    table_name TEXT;
    tables TEXT[] := ARRAY[
        'appointments', 'job_cards', 'job_card_line_items', 
        'inspections', 'inspection_items', 'inspection_photos',
        'estimates', 'estimate_line_items', 'customer_approvals',
        'invoices', 'payments', 'inventory_transactions'
    ];
BEGIN
    FOREACH table_name IN ARRAY tables
    LOOP
        EXECUTE format('
            CREATE POLICY "Staff can manage %I" ON public.%I
            FOR ALL USING (
                EXISTS (
                    SELECT 1 FROM public.user_profiles 
                    WHERE user_id = auth.uid() AND role IN (''admin'', ''staff'', ''technician'')
                )
            )', table_name, table_name);
    END LOOP;
END $$;

-- Notifications policies
CREATE POLICY "Users can view own notifications" ON public.notifications
    FOR SELECT USING (auth.uid() = user_id);

CREATE POLICY "Users can update own notifications" ON public.notifications
    FOR UPDATE USING (auth.uid() = user_id);

-- Audit logs policies (admin only)
CREATE POLICY "Admins can view audit logs" ON public.audit_logs
    FOR SELECT USING (
        EXISTS (
            SELECT 1 FROM public.user_profiles 
            WHERE user_id = auth.uid() AND role = 'admin'
        )
    );

-- =====================================================
-- 14. CREATE FUNCTIONS & TRIGGERS
-- =====================================================

-- Function to handle new user registration
CREATE OR REPLACE FUNCTION public.handle_new_user()
RETURNS TRIGGER AS $$
BEGIN
    INSERT INTO public.user_profiles (user_id, first_name, last_name, role)
    VALUES (
        NEW.id,
        COALESCE(NEW.raw_user_meta_data->>'first_name', 'User'),
        COALESCE(NEW.raw_user_meta_data->>'last_name', 'Name'),
        COALESCE(NEW.raw_user_meta_data->>'role', 'customer')
    );
    RETURN NEW;
END;
$$ LANGUAGE plpgsql SECURITY DEFINER;

-- Function to update updated_at timestamp
CREATE OR REPLACE FUNCTION public.update_updated_at_column()
RETURNS TRIGGER AS $$
BEGIN
    NEW.updated_at = NOW();
    RETURN NEW;
END;
$$ LANGUAGE plpgsql;

-- Create updated_at triggers for relevant tables
DO $$
DECLARE
    table_name TEXT;
    tables TEXT[] := ARRAY[
        'user_profiles', 'customers', 'vehicles', 'suppliers', 'parts_catalog',
        'labor_guide', 'appointments', 'job_cards', 'inspections', 'estimates', 'invoices'
    ];
BEGIN
    FOREACH table_name IN ARRAY tables
    LOOP
        EXECUTE format('
            CREATE TRIGGER update_%I_updated_at
            BEFORE UPDATE ON public.%I
            FOR EACH ROW EXECUTE FUNCTION public.update_updated_at_column()', 
            table_name, table_name);
    END LOOP;
END $$;

-- Function to calculate estimate totals
CREATE OR REPLACE FUNCTION public.calculate_estimate_totals()
RETURNS TRIGGER AS $$
DECLARE
    estimate_record RECORD;
    line_total DECIMAL(10,2);
BEGIN
    -- Get estimate details
    SELECT * INTO estimate_record FROM public.estimates WHERE id = COALESCE(NEW.estimate_id, OLD.estimate_id);
    
    -- Calculate subtotal from line items
    SELECT COALESCE(SUM(total_price), 0) INTO line_total
    FROM public.estimate_line_items 
    WHERE estimate_id = estimate_record.id;
    
    -- Update estimate totals
    UPDATE public.estimates SET
        subtotal = line_total,
        discount_amount = (line_total * COALESCE(discount_percentage, 0) / 100),
        tax_amount = ((line_total - (line_total * COALESCE(discount_percentage, 0) / 100)) * COALESCE(tax_percentage, 0) / 100),
        total_amount = line_total - (line_total * COALESCE(discount_percentage, 0) / 100) + ((line_total - (line_total * COALESCE(discount_percentage, 0) / 100)) * COALESCE(tax_percentage, 0) / 100),
        updated_at = NOW()
    WHERE id = estimate_record.id;
    
    RETURN COALESCE(NEW, OLD);
END;
$$ LANGUAGE plpgsql;

-- Create triggers for estimate calculations
CREATE TRIGGER calculate_estimate_totals_on_insert
    AFTER INSERT ON public.estimate_line_items
    FOR EACH ROW EXECUTE FUNCTION public.calculate_estimate_totals();

CREATE TRIGGER calculate_estimate_totals_on_update
    AFTER UPDATE ON public.estimate_line_items
    FOR EACH ROW EXECUTE FUNCTION public.calculate_estimate_totals();

CREATE TRIGGER calculate_estimate_totals_on_delete
    AFTER DELETE ON public.estimate_line_items
    FOR EACH ROW EXECUTE FUNCTION public.calculate_estimate_totals();

-- =====================================================
-- 15. CREATE INDEXES FOR PERFORMANCE
-- =====================================================

-- User profiles indexes
CREATE INDEX idx_user_profiles_user_id ON public.user_profiles(user_id);
CREATE INDEX idx_user_profiles_role ON public.user_profiles(role);

-- Customers indexes
CREATE INDEX idx_customers_email ON public.customers(email);
CREATE INDEX idx_customers_phone ON public.customers(phone);
CREATE INDEX idx_customers_customer_number ON public.customers(customer_number);

-- Vehicles indexes
CREATE INDEX idx_vehicles_customer_id ON public.vehicles(customer_id);
CREATE INDEX idx_vehicles_vin ON public.vehicles(vin);
CREATE INDEX idx_vehicles_license_plate ON public.vehicles(license_plate);

-- Parts catalog indexes
CREATE INDEX idx_parts_catalog_part_number ON public.parts_catalog(part_number);
CREATE INDEX idx_parts_catalog_category ON public.parts_catalog(category);
CREATE INDEX idx_parts_catalog_supplier_id ON public.parts_catalog(supplier_id);

-- Appointments indexes
CREATE INDEX idx_appointments_date ON public.appointments(appointment_date);
CREATE INDEX idx_appointments_customer_id ON public.appointments(customer_id);
CREATE INDEX idx_appointments_technician_id ON public.appointments(technician_id);
CREATE INDEX idx_appointments_status ON public.appointments(status);

-- Job cards indexes
CREATE INDEX idx_job_cards_customer_id ON public.job_cards(customer_id);
CREATE INDEX idx_job_cards_vehicle_id ON public.job_cards(vehicle_id);
CREATE INDEX idx_job_cards_technician_id ON public.job_cards(technician_id);
CREATE INDEX idx_job_cards_status ON public.job_cards(status);
CREATE INDEX idx_job_cards_job_number ON public.job_cards(job_number);

-- Inspections indexes
CREATE INDEX idx_inspections_vehicle_id ON public.inspections(vehicle_id);
CREATE INDEX idx_inspections_technician_id ON public.inspections(technician_id);
CREATE INDEX idx_inspections_status ON public.inspections(status);

-- Estimates indexes
CREATE INDEX idx_estimates_customer_id ON public.estimates(customer_id);
CREATE INDEX idx_estimates_status ON public.estimates(status);
CREATE INDEX idx_estimates_estimate_number ON public.estimates(estimate_number);

-- Invoices indexes
CREATE INDEX idx_invoices_customer_id ON public.invoices(customer_id);
CREATE INDEX idx_invoices_status ON public.invoices(status);
CREATE INDEX idx_invoices_invoice_number ON public.invoices(invoice_number);

-- =====================================================
-- 16. INSERT SAMPLE DATA
-- =====================================================

-- Insert sample customers
INSERT INTO public.customers (first_name, last_name, email, phone, address, city) VALUES
('Ahmed', 'Hassan', 'ahmed.hassan@email.com', '+252-63-123-4567', 'Jigiga Yar District', 'Hargeisa'),
('Fatima', 'Ali', 'fatima.ali@email.com', '+252-63-234-5678', 'Ahmed Dhagah District', 'Hargeisa'),
('Mohamed', 'Omar', 'mohamed.omar@email.com', '+252-63-345-6789', 'Mohamoud Haibe District', 'Hargeisa'),
('Sahra', 'Abdi', 'sahra.abdi@email.com', '+252-63-456-7890', 'Ibrahim Kodbuur District', 'Hargeisa'),
('Abdi', 'Jama', 'abdi.jama@email.com', '+252-63-567-8901', 'New Hargeisa District', 'Hargeisa'),
('Khadija', 'Mohamed', 'khadija.mohamed@email.com', '+252-63-678-9012', 'Ga'an Libah District', 'Hargeisa')
ON CONFLICT (email) DO NOTHING;

-- Insert sample vehicles
DO $$
DECLARE
    customer_ids UUID[];
    customer_id UUID;
BEGIN
    -- Get customer IDs
    SELECT ARRAY(SELECT id FROM public.customers LIMIT 6) INTO customer_ids;
    
    -- Insert vehicles for each customer
    FOR i IN 1..array_length(customer_ids, 1) LOOP
        customer_id := customer_ids[i];
        
        CASE i
            WHEN 1 THEN
                INSERT INTO public.vehicles (customer_id, make, model, year, vin, license_plate, color, mileage) VALUES
                (customer_id, 'Toyota', 'Corolla', 2018, '1NXBR32E25Z123456', 'SL-001-ABC', 'White', 85000);
            WHEN 2 THEN
                INSERT INTO public.vehicles (customer_id, make, model, year, vin, license_plate, color, mileage) VALUES
                (customer_id, 'Honda', 'Civic', 2019, '2HGFC2F59KH123456', 'SL-002-DEF', 'Silver', 72000);
            WHEN 3 THEN
                INSERT INTO public.vehicles (customer_id, make, model, year, vin, license_plate, color, mileage) VALUES
                (customer_id, 'Nissan', 'Altima', 2020, '1N4AL3AP8LC123456', 'SL-003-GHI', 'Black', 45000);
            WHEN 4 THEN
                INSERT INTO public.vehicles (customer_id, make, model, year, vin, license_plate, color, mileage) VALUES
                (customer_id, 'Hyundai', 'Elantra', 2017, 'KMHD14LA8HA123456', 'SL-004-JKL', 'Blue', 95000);
            WHEN 5 THEN
                INSERT INTO public.vehicles (customer_id, make, model, year, vin, license_plate, color, mileage) VALUES
                (customer_id, 'Kia', 'Forte', 2021, 'KNAFP4A61M5123456', 'SL-005-MNO', 'Red', 28000);
            WHEN 6 THEN
                INSERT INTO public.vehicles (customer_id, make, model, year, vin, license_plate, color, mileage) VALUES
                (customer_id, 'Mazda', 'Mazda3', 2019, 'JM1BN1L77K1123456', 'SL-006-PQR', 'Gray', 67000);
        END CASE;
    END LOOP;
END $$;

-- Insert sample parts catalog
DO $$
DECLARE
    supplier_ids UUID[];
BEGIN
    SELECT ARRAY(SELECT id FROM public.suppliers LIMIT 5) INTO supplier_ids;
    
    INSERT INTO public.parts_catalog (part_number, name, description, category, brand, supplier_id, cost_price, selling_price, stock_quantity) VALUES
    -- Engine parts
    ('ENG001', 'Engine Oil Filter', 'Standard oil filter for most vehicles', 'Engine', 'OEM', supplier_ids[1], 5.00, 8.00, 50),
    ('ENG002', 'Air Filter', 'High-flow air filter', 'Engine', 'K&N', supplier_ids[1], 15.00, 25.00, 30),
    ('ENG003', 'Spark Plugs Set', 'Iridium spark plugs (4-pack)', 'Engine', 'NGK', supplier_ids[2], 25.00, 40.00, 25),
    ('ENG004', 'Fuel Filter', 'Inline fuel filter', 'Engine', 'Bosch', supplier_ids[1], 12.00, 20.00, 40),
    
    -- Brake parts
    ('BRK001', 'Brake Pads Set', 'Front brake pads - ceramic', 'Brakes', 'Brembo', supplier_ids[2], 25.00, 40.00, 20),
    ('BRK002', 'Brake Rotors', 'Front brake rotors (pair)', 'Brakes', 'AC Delco', supplier_ids[3], 80.00, 120.00, 15),
    ('BRK003', 'Brake Fluid', 'DOT 3 brake fluid (1L)', 'Brakes', 'Castrol', supplier_ids[1], 8.00, 15.00, 35),
    
    -- Suspension parts
    ('SUS001', 'Shock Absorbers', 'Front shock absorbers (pair)', 'Suspension', 'Monroe', supplier_ids[4], 120.00, 180.00, 10),
    ('SUS002', 'Strut Assembly', 'Complete strut assembly', 'Suspension', 'KYB', supplier_ids[4], 150.00, 220.00, 8),
    
    -- Electrical parts
    ('ELE001', 'Car Battery', '12V 60Ah Car Battery', 'Electrical', 'Exide', supplier_ids[5], 80.00, 120.00, 12),
    ('ELE002', 'Alternator', 'Remanufactured alternator', 'Electrical', 'Bosch', supplier_ids[3], 180.00, 280.00, 5),
    ('ELE003', 'Starter Motor', 'Remanufactured starter', 'Electrical', 'Denso', supplier_ids[3], 150.00, 230.00, 6),
    
    -- Tires
    ('TIR001', 'All-Season Tire', '195/65R15 All-Season Tire', 'Tires', 'Michelin', supplier_ids[2], 45.00, 70.00, 16),
    ('TIR002', 'Performance Tire', '205/55R16 Performance Tire', 'Tires', 'Continental', supplier_ids[2], 65.00, 95.00, 12),
    
    -- Fluids & Lubricants
    ('FLU001', 'Engine Oil', '5W-30 Synthetic Oil (5L)', 'Fluids', 'Mobil 1', supplier_ids[1], 25.00, 40.00, 30),
    ('FLU002', 'Transmission Fluid', 'ATF Dexron VI (1L)', 'Fluids', 'Valvoline', supplier_ids[1], 12.00, 20.00, 25),
    ('FLU003', 'Coolant', 'Extended Life Coolant (4L)', 'Fluids', 'Prestone', supplier_ids[1], 18.00, 30.00, 20);
END $$;

-- Insert sample labor operations
INSERT INTO public.labor_guide (operation_code, description, category, standard_hours, suggested_rate, skill_level) VALUES
-- Maintenance
('OIL001', 'Oil Change Service', 'Maintenance', 0.5, 25.00, 'basic'),
('OIL002', 'Oil Change + Filter', 'Maintenance', 0.75, 35.00, 'basic'),
('FLU001', 'Fluid Top-up Service', 'Maintenance', 0.25, 15.00, 'basic'),
('INS001', 'Basic Vehicle Inspection', 'Inspection', 1.0, 60.00, 'intermediate'),
('INS002', 'Comprehensive Inspection', 'Inspection', 2.0, 120.00, 'intermediate'),

-- Brakes
('BRK001', 'Brake Pad Replacement', 'Brakes', 1.5, 75.00, 'intermediate'),
('BRK002', 'Brake Rotor Replacement', 'Brakes', 2.0, 100.00, 'intermediate'),
('BRK003', 'Brake System Flush', 'Brakes', 1.0, 60.00, 'intermediate'),
('BRK004', 'Brake Caliper Service', 'Brakes', 2.5, 125.00, 'advanced'),

-- Engine
('ENG001', 'Spark Plug Replacement', 'Engine', 1.0, 50.00, 'intermediate'),
('ENG002', 'Air Filter Replacement', 'Engine', 0.25, 15.00, 'basic'),
('ENG003', 'Fuel Filter Replacement', 'Engine', 0.75, 40.00, 'intermediate'),
('ENG004', 'Engine Diagnostic', 'Engine', 1.5, 90.00, 'advanced'),

-- Electrical
('ELE001', 'Battery Replacement', 'Electrical', 0.5, 30.00, 'basic'),
('ELE002', 'Alternator Replacement', 'Electrical', 2.5, 125.00, 'advanced'),
('ELE003', 'Starter Replacement', 'Electrical', 2.0, 100.00, 'advanced'),

-- Tires
('TIR001', 'Tire Installation (4 tires)', 'Tires', 1.0, 50.00, 'basic'),
('TIR002', 'Tire Rotation', 'Tires', 0.5, 25.00, 'basic'),
('TIR003', 'Wheel Alignment', 'Tires', 1.5, 75.00, 'intermediate'),
('TIR004', 'Wheel Balancing', 'Tires', 1.0, 50.00, 'intermediate'),

-- Suspension
('SUS001', 'Shock Absorber Replacement', 'Suspension', 2.0, 100.00, 'advanced'),
('SUS002', 'Strut Assembly Replacement', 'Suspension', 3.0, 150.00, 'advanced');

-- Insert sample service packages
INSERT INTO public.service_packages (name, description, category, duration_hours, price, includes) VALUES
('Basic Oil Change', 'Standard oil change service', 'Maintenance', 0.5, 35.00, ARRAY['Engine oil replacement', 'Oil filter replacement', 'Basic inspection']),
('Premium Oil Change', 'Premium oil change with inspection', 'Maintenance', 1.0, 55.00, ARRAY['Synthetic oil replacement', 'Oil filter replacement', 'Multi-point inspection', 'Fluid top-up']),
('Brake Service Package', 'Complete brake system service', 'Brakes', 2.5, 180.00, ARRAY['Brake pad replacement', 'Brake inspection', 'Brake fluid flush', 'Road test']),
('Tire Service Package', 'Complete tire service', 'Tires', 1.5, 85.00, ARRAY['Tire installation', 'Wheel balancing', 'Alignment check', 'Pressure adjustment']),
('Basic Inspection', 'Standard vehicle safety inspection', 'Inspection', 1.0, 60.00, ARRAY['Visual inspection', 'Fluid levels check', 'Tire condition check', 'Light operation test']),
('Comprehensive Inspection', 'Detailed vehicle inspection', 'Inspection', 2.0, 120.00, ARRAY['Complete visual inspection', 'Diagnostic scan', 'Road test', 'Detailed report']);

-- Insert sample inspection template
INSERT INTO public.inspection_templates (name, description, category, is_default) VALUES
('Standard Vehicle Inspection', 'Comprehensive vehicle safety and maintenance inspection', 'General', true),
('Pre-Purchase Inspection', 'Detailed inspection for vehicle purchase', 'Purchase', false),
('Annual Safety Inspection', 'Annual safety compliance inspection', 'Safety', false);

-- Insert inspection template items for standard inspection
DO $$
DECLARE
    template_id UUID;
BEGIN
    SELECT id INTO template_id FROM public.inspection_templates WHERE name = 'Standard Vehicle Inspection' LIMIT 1;
    
    IF template_id IS NOT NULL THEN
        INSERT INTO public.inspection_template_items (template_id, item_name, category, subcategory, sort_order, is_required) VALUES
        -- Engine
        (template_id, 'Engine Oil Level', 'Engine', 'Fluids', 1, true),
        (template_id, 'Engine Oil Condition', 'Engine', 'Fluids', 2, true),
        (template_id, 'Coolant Level', 'Engine', 'Fluids', 3, true),
        (template_id, 'Air Filter Condition', 'Engine', 'Filters', 4, false),
        (template_id, 'Belt Condition', 'Engine', 'Components', 5, true),
        
        -- Brakes
        (template_id, 'Brake Fluid Level', 'Brakes', 'Fluids', 10, true),
        (template_id, 'Brake Pad Thickness', 'Brakes', 'Components', 11, true),
        (template_id, 'Brake Rotor Condition', 'Brakes', 'Components', 12, true),
        (template_id, 'Brake Lines', 'Brakes', 'Components', 13, true),
        
        -- Tires
        (template_id, 'Tire Tread Depth', 'Tires', 'Condition', 20, true),
        (template_id, 'Tire Pressure', 'Tires', 'Condition', 21, true),
        (template_id, 'Tire Sidewall Condition', 'Tires', 'Condition', 22, true),
        (template_id, 'Spare Tire Condition', 'Tires', 'Condition', 23, false),
        
        -- Electrical
        (template_id, 'Battery Condition', 'Electrical', 'Components', 30, true),
        (template_id, 'Headlights Operation', 'Electrical', 'Lighting', 31, true),
        (template_id, 'Taillights Operation', 'Electrical', 'Lighting', 32, true),
        (template_id, 'Turn Signals Operation', 'Electrical', 'Lighting', 33, true),
        (template_id, 'Dashboard Warning Lights', 'Electrical', 'Systems', 34, true),
        
        -- Body & Interior
        (template_id, 'Windshield Condition', 'Body', 'Glass', 40, true),
        (template_id, 'Mirror Condition', 'Body', 'Components', 41, true),
        (template_id, 'Seat Belt Operation', 'Interior', 'Safety', 42, true),
        (template_id, 'Horn Operation', 'Interior', 'Controls', 43, true),
        
        -- Suspension
        (template_id, 'Shock Absorber Condition', 'Suspension', 'Components', 50, false),
        (template_id, 'Steering Response', 'Suspension', 'Components', 51, true),
        
        -- Exhaust
        (template_id, 'Exhaust System', 'Exhaust', 'Components', 60, true),
        (template_id, 'Emissions', 'Exhaust', 'Performance', 61, false);
    END IF;
END $$;

-- =====================================================
-- 17. CREATE VIEWS FOR REPORTING
-- =====================================================

-- Customer summary view
CREATE OR REPLACE VIEW public.customer_summary AS
SELECT 
    c.id,
    c.customer_number,
    c.first_name || ' ' || c.last_name AS full_name,
    c.email,
    c.phone,
    c.city,
    COUNT(DISTINCT v.id) AS vehicle_count,
    COUNT(DISTINCT a.id) AS appointment_count,
    COUNT(DISTINCT j.id) AS job_count,
    COALESCE(SUM(j.total_amount), 0) AS total_revenue,
    MAX(a.appointment_date) AS last_appointment,
    c.created_at
FROM public.customers c
LEFT JOIN public.vehicles v ON c.id = v.customer_id
LEFT JOIN public.appointments a ON c.id = a.customer_id
LEFT JOIN public.job_cards j ON c.id = j.customer_id
GROUP BY c.id, c.customer_number, c.first_name, c.last_name, c.email, c.phone, c.city, c.created_at;

-- Vehicle service history view
CREATE OR REPLACE VIEW public.vehicle_service_history AS
SELECT 
    v.id AS vehicle_id,
    v.make || ' ' || v.model || ' ' || v.year AS vehicle_info,
    v.license_plate,
    c.first_name || ' ' || c.last_name AS owner_name,
    j.job_number,
    j.status,
    j.customer_complaint,
    j.work_performed,
    j.total_amount,
    j.created_at AS service_date,
    j.completed_at
FROM public.vehicles v
JOIN public.customers c ON v.customer_id = c.id
LEFT JOIN public.job_cards j ON v.id = j.vehicle_id
ORDER BY v.id, j.created_at DESC;

-- Daily revenue view
CREATE OR REPLACE VIEW public.daily_revenue AS
SELECT 
    DATE(j.completed_at) AS service_date,
    COUNT(*) AS jobs_completed,
    SUM(j.total_amount) AS total_revenue,
    AVG(j.total_amount) AS average_job_value,
    SUM(j.labor_total) AS labor_revenue,
    SUM(j.parts_total) AS parts_revenue
FROM public.job_cards j
WHERE j.status = 'completed' AND j.completed_at IS NOT NULL
GROUP BY DATE(j.completed_at)
ORDER BY service_date DESC;

-- Inventory status view
CREATE OR REPLACE VIEW public.inventory_status AS
SELECT 
    p.id,
    p.part_number,
    p.name,
    p.category,
    p.stock_quantity,
    p.min_stock_level,
    p.reorder_point,
    CASE 
        WHEN p.stock_quantity <= 0 THEN 'Out of Stock'
        WHEN p.stock_quantity <= p.min_stock_level THEN 'Low Stock'
        WHEN p.stock_quantity <= p.reorder_point THEN 'Reorder Soon'
        ELSE 'In Stock'
    END AS stock_status,
    p.selling_price,
    p.cost_price,
    (p.selling_price - p.cost_price) AS profit_per_unit,
    s.name AS supplier_name
FROM public.parts_catalog p
LEFT JOIN public.suppliers s ON p.supplier_id = s.id
WHERE p.is_active = true
ORDER BY 
    CASE 
        WHEN p.stock_quantity <= 0 THEN 1
        WHEN p.stock_quantity <= p.min_stock_level THEN 2
        WHEN p.stock_quantity <= p.reorder_point THEN 3
        ELSE 4
    END,
    p.name;

-- =====================================================
-- 18. FINAL SETUP CONFIRMATION
-- =====================================================

-- Insert a system log entry to confirm setup completion
INSERT INTO public.system_logs (level, message, context) VALUES
('info', 'MASS Car Workshop VWMS database setup completed successfully', 
 jsonb_build_object(
     'setup_date', NOW(),
     'tables_created', 25,
     'policies_created', 15,
     'functions_created', 3,
     'triggers_created', 12,
     'indexes_created', 20,
     'views_created', 4,
     'sample_data_inserted', true
 ));

-- Display setup summary
DO $$
BEGIN
    RAISE NOTICE '==============================================';
    RAISE NOTICE 'MASS Car Workshop VWMS Database Setup Complete!';
    RAISE NOTICE '==============================================';
    RAISE NOTICE 'Tables Created: 25';
    RAISE NOTICE 'RLS Policies: 15+';
    RAISE NOTICE 'Functions: 3';
    RAISE NOTICE 'Triggers: 12+';
    RAISE NOTICE 'Indexes: 20+';
    RAISE NOTICE 'Views: 4';
    RAISE NOTICE 'Sample Data: Inserted';
    RAISE NOTICE '==============================================';
    RAISE NOTICE 'Your workshop management system is ready!';
    RAISE NOTICE '==============================================';
END $$;</article></body></html>