[V0_FILE]typescript:file="lib/supabase/client.ts" isMerged="true" import { createBrowserClient } from "@supabase/ssr" export function createClient() { return createBrowserClient(process.env.NEXT_PUBLIC_SUPABASE_URL!, process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!) } [V0_FILE]typescript:file="lib/supabase/server.ts" isMerged="true" import { createServerClient } from "@supabase/ssr" import { cookies } from "next/headers" /** * Especially important if using Fluid compute: Don't put this client in a * global variable. Always create a new client within each function when using * it. */ export async function createClient() { const cookieStore = await cookies() return createServerClient(process.env.NEXT_PUBLIC_SUPABASE_URL!, process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!, { cookies: { getAll() { return cookieStore.getAll() }, setAll(cookiesToSet) { try { cookiesToSet.forEach(({ name, value, options }) => cookieStore.set(name, value, options)) } catch { // The "setAll" method was called from a Server Component. // This can be ignored if you have middleware refreshing // user sessions. } }, }, }) } [V0_FILE]typescript:file="lib/supabase/middleware.ts" isMerged="true" import { createServerClient } from "@supabase/ssr" import { NextResponse, type NextRequest } from "next/server" export async function updateSession(request: NextRequest) { let supabaseResponse = NextResponse.next({ request, }) // With Fluid compute, don't put this client in a global environment // variable. Always create a new one on each request. const supabase = createServerClient( process.env.NEXT_PUBLIC_SUPABASE_URL!, process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!, { cookies: { getAll() { return request.cookies.getAll() }, setAll(cookiesToSet) { cookiesToSet.forEach(({ name, value }) => request.cookies.set(name, value)) supabaseResponse = NextResponse.next({ request, }) cookiesToSet.forEach(({ name, value, options }) => supabaseResponse.cookies.set(name, value, options)) }, }, }, ) // Do not run code between createServerClient and // supabase.auth.getUser(). A simple mistake could make it very hard to debug // issues with users being randomly logged out. // IMPORTANT: If you remove getUser() and you use server-side rendering // with the Supabase client, your users may be randomly logged out. const { data: { user }, } = await supabase.auth.getUser() if ( request.nextUrl.pathname !== "/" && !user && !request.nextUrl.pathname.startsWith("/login") && !request.nextUrl.pathname.startsWith("/auth") ) { // no user, potentially respond by redirecting the user to the login page const url = request.nextUrl.clone() url.pathname = "/auth/login" return NextResponse.redirect(url) } // IMPORTANT: You *must* return the supabaseResponse object as it is. // If you're creating a new response object with NextResponse.next() make sure to: // 1. Pass the request in it, like so: // const myNewResponse = NextResponse.next({ request }) // 2. Copy over the cookies, like so: // myNewResponse.cookies.setAll(supabaseResponse.cookies.getAll()) // 3. Change the myNewResponse object to fit your needs, but avoid changing // the cookies! // 4. Finally: // return myNewResponse // If this is not done, you may be causing the browser and server to go out // of sync and terminate the user's session prematurely! return supabaseResponse } [V0_FILE]typescript:file="middleware.ts" isMerged="true" import { updateSession } from "@/lib/supabase/middleware" import type { NextRequest } from "next/server" export async function middleware(request: NextRequest) { return await updateSession(request) } export const config = { matcher: [ /* * Match all request paths except: * - _next/static (static files) * - _next/image (image optimization files) * - favicon.ico (favicon file) * - images - .svg, .png, .jpg, .jpeg, .gif, .webp * Feel free to modify this pattern to include more paths. */ "/((?!_next/static|_next/image|favicon.ico|.*.(?:svg|png|jpg|jpeg|gif|webp)$).*)", ], } [V0_FILE]sql:file="scripts/001_create_animals_table.sql" isMerged="true" -- Create animals table for storing animal reports CREATE TABLE IF NOT EXISTS public.animals ( id UUID PRIMARY KEY DEFAULT gen_random_uuid(), name TEXT NOT NULL, species TEXT NOT NULL, description TEXT, location TEXT NOT NULL, status TEXT NOT NULL CHECK (status IN ('lost', 'found')), contact_info TEXT NOT NULL, image_url TEXT, user_id UUID NOT NULL REFERENCES auth.users(id) ON DELETE CASCADE, created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(), updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW() ); -- Enable Row Level Security ALTER TABLE public.animals ENABLE ROW LEVEL SECURITY; -- Create RLS policies for animals table CREATE POLICY "animals_select_all" ON public.animals FOR SELECT USING (true); -- Anyone can view all animal reports CREATE POLICY "animals_insert_own" ON public.animals FOR INSERT WITH CHECK (auth.uid() = user_id); -- Users can only insert their own reports CREATE POLICY "animals_update_own" ON public.animals FOR UPDATE USING (auth.uid() = user_id); -- Users can only update their own reports CREATE POLICY "animals_delete_own" ON public.animals FOR DELETE USING (auth.uid() = user_id); -- Users can only delete their own reports -- Create updated_at trigger function CREATE OR REPLACE FUNCTION 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_animals_updated_at BEFORE UPDATE ON public.animals FOR EACH ROW EXECUTE FUNCTION update_updated_at_column(); [V0_FILE]sql:file="scripts/002_create_storage_bucket.sql" isMerged="true" -- Create storage bucket for animal images INSERT INTO storage.buckets (id, name, public) VALUES ('animal-images', 'animal-images', true) ON CONFLICT (id) DO NOTHING; -- Create storage policies CREATE POLICY "animal_images_select_all" ON storage.objects FOR SELECT USING (bucket_id = 'animal-images'); CREATE POLICY "animal_images_insert_authenticated" ON storage.objects FOR INSERT WITH CHECK (bucket_id = 'animal-images' AND auth.role() = 'authenticated'); CREATE POLICY "animal_images_update_own" ON storage.objects FOR UPDATE USING (bucket_id = 'animal-images' AND auth.uid()::text = (storage.foldername(name))[1]); CREATE POLICY "animal_images_delete_own" ON storage.objects FOR DELETE USING (bucket_id = 'animal-images' AND auth.uid()::text = (storage.foldername(name))[1]); [V0_FILE]json:file="package.json" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "geist": "^1.3.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "14.2.25", "next-themes": "^0.4.6", "react": "^19", "react-day-picker": "9.8.0", "react-dom": "^19", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^0.9.9", "zod": "3.25.67", "@supabase/ssr": "0.7.0" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^18", "@types/react-dom": "^18", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]python:file="scripts/run_database_setup.py" isMerged="true" import os import subprocess def run_sql_script(script_path): """Execute a SQL script""" print(f"Executing {script_path}...") # Read the SQL file with open(script_path, 'r') as file: sql_content = file.read() print(f"SQL Content:\n{sql_content}") print(f"✅ {script_path} ready to execute") # Execute the database setup scripts if __name__ == "__main__": scripts = [ "scripts/001_create_animals_table.sql", "scripts/002_create_storage_bucket.sql" ] for script in scripts: if os.path.exists(script): run_sql_script(script) else: print(f"❌ Script not found: {script}") print("\n🎉 Database schema setup complete!") print("The animals table and storage bucket are ready for use.") [V0_FILE]css:file="app/globals.css" isQuickEdit="true" isMerged="true" @import "tailwindcss"; @import "tw-animate-css"; @custom-variant dark (&:is(.dark *)); :root { /* Updated color tokens for warm animal rescue theme */ --background: oklch(1 0 0); /* #ffffff */ --foreground: oklch(0.35 0.01 258.34); /* #4b5563 */ --card: oklch(0.98 0.02 102.37); /* #fefce8 */ --card-foreground: oklch(0.35 0.01 258.34); /* #4b5563 */ --popover: oklch(0.98 0.02 102.37); /* #fefce8 */ --popover-foreground: oklch(0.35 0.01 258.34); /* #4b5563 */ --primary: oklch(0.45 0.13 65.11); /* #a16207 */ --primary-foreground: oklch(1 0 0); /* #ffffff */ --secondary: oklch(0.55 0.15 263.71); /* #6366f1 */ --secondary-foreground: oklch(1 0 0); /* #ffffff */ --muted: oklch(0.97 0.01 247.86); /* #f8fafc */ --muted-foreground: oklch(0.35 0.01 258.34); /* #4b5563 */ --accent: oklch(0.55 0.15 263.71); /* #6366f1 */ --accent-foreground: oklch(1 0 0); /* #ffffff */ --destructive: oklch(0.55 0.22 25.33); /* #dc2626 */ --destructive-foreground: oklch(1 0 0); /* #ffffff */ --border: oklch(0.91 0.01 247.86); /* #e5e7eb */ --input: oklch(1 0 0); /* #ffffff */ --ring: oklch(0.55 0.15 263.71); /* #6366f1 */ --radius: 0.5rem; --sidebar: oklch(0.98 0.02 102.37); /* #fefce8 */ --sidebar-foreground: oklch(0.35 0.01 258.34); /* #4b5563 */ --sidebar-primary: oklch(0.45 0.13 65.11); /* #a16207 */ --sidebar-primary-foreground: oklch(1 0 0); /* #ffffff */ --sidebar-accent: oklch(0.55 0.15 263.71); /* #6366f1 */ --sidebar-accent-foreground: oklch(1 0 0); /* #ffffff */ --sidebar-border: oklch(0.91 0.01 247.86); /* #e5e7eb */ --sidebar-ring: oklch(0.55 0.15 263.71); /* #6366f1 */ } .dark { --background: oklch(0.145 0 0); --foreground: oklch(0.985 0 0); --card: oklch(0.145 0 0); --card-foreground: oklch(0.985 0 0); --popover: oklch(0.145 0 0); --popover-foreground: oklch(0.985 0 0); --primary: oklch(0.985 0 0); --primary-foreground: oklch(0.205 0 0); --secondary: oklch(0.269 0 0); --secondary-foreground: oklch(0.985 0 0); --muted: oklch(0.269 0 0); --muted-foreground: oklch(0.708 0 0); --accent: oklch(0.269 0 0); --accent-foreground: oklch(0.985 0 0); --destructive: oklch(0.396 0.141 25.723); --destructive-foreground: oklch(0.637 0.237 25.331); --border: oklch(0.269 0 0); --input: oklch(0.269 0 0); --ring: oklch(0.439 0 0); --sidebar: oklch(0.205 0 0); --sidebar-foreground: oklch(0.985 0 0); --sidebar-primary: oklch(0.488 0.243 264.376); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.269 0 0); --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(0.269 0 0); --sidebar-ring: oklch(0.439 0 0); } @theme inline { --font-sans: var(--font-geist-sans); --font-mono: var(--font-geist-mono); --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } } [V0_FILE]typescriptreact:file="app/auth/login/page.tsx" isMerged="true" "use client" import type React from "react" import { createClient } from "@/lib/supabase/client" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import Link from "next/link" import { useRouter } from "next/navigation" import { useState } from "react" import { Heart } from "lucide-react" export default function LoginPage() { const [email, setEmail] = useState("") const [password, setPassword] = useState("") const [error, setError] = useState(null) const [isLoading, setIsLoading] = useState(false) const router = useRouter() const handleLogin = async (e: React.FormEvent) => { e.preventDefault() const supabase = createClient() setIsLoading(true) setError(null) try { const { error } = await supabase.auth.signInWithPassword({ email, password, }) if (error) throw error router.push("/") } catch (error: unknown) { setError(error instanceof Error ? error.message : "An error occurred") } finally { setIsLoading(false) } } return (

Encuentro Animal

Reuniendo familias con sus mascotas

Iniciar Sesión Ingresa tus datos para acceder a tu cuenta

¿No tienes cuenta? Regístrate aquí

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

Encuentro Animal

Únete a nuestra comunidad de rescate

Crear Cuenta Regístrate para reportar y encontrar mascotas

¿Ya tienes cuenta? Inicia sesión aquí

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

Encuentro Animal

¡Cuenta Creada! Revisa tu correo electrónico para confirmar tu cuenta

Te hemos enviado un enlace de confirmación a tu correo electrónico. Haz clic en el enlace para activar tu cuenta y comenzar a ayudar a reunir mascotas con sus familias.

) } [V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" import { redirect } from "next/navigation" import { createClient } from "@/lib/supabase/server" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import Link from "next/link" import { Heart, PlusCircle, Search } from "lucide-react" export default async function HomePage() { const supabase = await createClient() const { data, error } = await supabase.auth.getUser() if (error || !data?.user) { redirect("/auth/login") } return (

Encuentro Animal

Bienvenido, {data.user.email}

Ayuda a reunir mascotas con sus familias

Reporta mascotas perdidas o encontradas en tu comunidad. Juntos podemos hacer la diferencia en la vida de estos animales.

Reportar Mascota ¿Perdiste tu mascota o encontraste una? Crea un reporte para ayudar a reunir familias.

Buscar Mascotas Explora los reportes de mascotas perdidas y encontradas en tu área.

) } [V0_FILE]typescriptreact:file="app/loading.tsx" isFixed="true" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/report/page.tsx" isMerged="true" import { redirect } from "next/navigation" import { createClient } from "@/lib/supabase/server" import ReportForm from "@/components/report-form" import { Heart, ArrowLeft } from "lucide-react" import Link from "next/link" import { Button } from "@/components/ui/button" export default async function ReportPage() { const supabase = await createClient() const { data, error } = await supabase.auth.getUser() if (error || !data?.user) { redirect("/auth/login") } return (

Encuentro Animal

Reportar Mascota

Completa la información para ayudar a reunir mascotas con sus familias

) } [V0_FILE]typescriptreact:file="components/report-form.tsx" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { useRouter } from "next/navigation" import { createClient } from "@/lib/supabase/client" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Textarea } from "@/components/ui/textarea" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Upload, X, CheckCircle } from "lucide-react" interface ReportFormProps { userId: string } export default function ReportForm({ userId }: ReportFormProps) { const [formData, setFormData] = useState({ name: "", species: "", description: "", location: "", status: "", contactInfo: "", }) const [imageFile, setImageFile] = useState(null) const [imagePreview, setImagePreview] = useState(null) const [isLoading, setIsLoading] = useState(false) const [error, setError] = useState(null) const [success, setSuccess] = useState(false) const router = useRouter() const handleInputChange = (field: string, value: string) => { setFormData((prev) => ({ ...prev, [field]: value })) } const handleImageChange = (e: React.ChangeEvent) => { const file = e.target.files?.[0] if (file) { if (file.size > 5 * 1024 * 1024) { setError("La imagen debe ser menor a 5MB") return } setImageFile(file) const reader = new FileReader() reader.onload = (e) => setImagePreview(e.target?.result as string) reader.readAsDataURL(file) setError(null) } } const removeImage = () => { setImageFile(null) setImagePreview(null) } const uploadImage = async (file: File): Promise => { const supabase = createClient() const fileExt = file.name.split(".").pop() const fileName = `${userId}/${Date.now()}.${fileExt}` const { error: uploadError } = await supabase.storage.from("animal-images").upload(fileName, file) if (uploadError) { console.error("Upload error:", uploadError) return null } const { data: { publicUrl }, } = supabase.storage.from("animal-images").getPublicUrl(fileName) return publicUrl } const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() setIsLoading(true) setError(null) try { const supabase = createClient() // Upload image if provided let imageUrl = null if (imageFile) { imageUrl = await uploadImage(imageFile) if (!imageUrl) { throw new Error("Error al subir la imagen") } } // Insert animal report const { error: insertError } = await supabase.from("animals").insert({ name: formData.name, species: formData.species, description: formData.description, location: formData.location, status: formData.status, contact_info: formData.contactInfo, image_url: imageUrl, user_id: userId, }) if (insertError) throw insertError setSuccess(true) setTimeout(() => { router.push("/animals") }, 2000) } catch (error: unknown) { setError(error instanceof Error ? error.message : "Error al crear el reporte") } finally { setIsLoading(false) } } if (success) { return (

¡Reporte Creado!

Tu reporte ha sido publicado exitosamente. Redirigiendo a la lista de animales...

) } return ( Información de la Mascota Proporciona todos los detalles posibles para ayudar en la búsqueda

Nombre de la Mascota handleInputChange("name", e.target.value)} required />

Especie

Estado

Ubicación handleInputChange("location", e.target.value)} required />

Descripción

handleInputChange("description", e.target.value)}
              rows={4}
            />
          </div>

<div className="space-y-2">
            <Label htmlFor="contactInfo">Información de Contacto</Label>
            <Input
              id="contactInfo"
              placeholder="Teléfono, email o forma de contacto"
              value={formData.contactInfo}
              onChange={(e) => handleInputChange("contactInfo", e.target.value)}
              required
            />
          </div>

<div className="space-y-2">
            <Label>Foto de la Mascota</Label>
            {!imagePreview ? (
              <div className="border-2 border-dashed border-border rounded-lg p-8 text-center">
                <Upload className="h-12 w-12 text-muted-foreground mx-auto mb-4" />
                <p className="text-muted-foreground mb-2">Sube una foto de la mascota</p>
                <p className="text-sm text-muted-foreground mb-4">Máximo 5MB - JPG, PNG, WEBP</p>
                <Button type="button" variant="outline" asChild>
                  <label htmlFor="image" className="cursor-pointer">
                    Seleccionar Imagen
                  </label>
                </Button>
                <input id="image" type="file" accept="image/*" onChange={handleImageChange} className="hidden" />
              </div>
            ) : (
              <div className="relative">
                <img
                  src={imagePreview || "/placeholder.svg"}
                  alt="Preview"
                  className="w-full h-48 object-cover rounded-lg border"
                />
                <Button
                  type="button"
                  variant="destructive"
                  size="sm"
                  className="absolute top-2 right-2"
                  onClick={removeImage}
                >
                  <X className="h-4 w-4" />
                </Button>
              </div>
            )}
          </div>

{error && <div className="text-destructive text-sm bg-destructive/10 p-3 rounded-md">{error}</div>}

<Button type="submit" className="w-full" disabled={isLoading}>
            {isLoading ? "Creando reporte..." : "Crear Reporte"}
          </Button>
        </form>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="components/ui/textarea.tsx" isMerged="true"
import * as React from "react"

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

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

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

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

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

const Select = SelectPrimitive.Root

const SelectGroup = SelectPrimitive.Group

const SelectValue = SelectPrimitive.Value

const SelectTrigger = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.Trigger>,
  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
>(({ className, children, ...props }, ref) => (
  <SelectPrimitive.Trigger
    ref={ref}
    className={cn(
      "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-base 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 md:text-sm",
      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="app/animals/page.tsx"
import { redirect } from "next/navigation"
import { createClient } from "@/lib/supabase/server"
import AnimalsList from "@/components/animals-list"
import { Heart, ArrowLeft } from "lucide-react"
import Link from "next/link"
import { Button } from "@/components/ui/button"

export default async function AnimalsPage() {
  const supabase = await createClient()
  const { data, error } = await supabase.auth.getUser()

if (error || !data?.user) {
    redirect("/auth/login")
  }

// Fetch all animals
  const { data: animals, error: animalsError } = await supabase
    .from("animals")
    .select("*")
    .order("created_at", { ascending: false })

if (animalsError) {
    console.error("Error fetching animals:", animalsError)
  }

return (
    <div className="min-h-screen bg-gradient-to-br from-card to-background">
      <header className="border-b bg-card/50 backdrop-blur-sm">
        <div className="container mx-auto px-4 py-4 flex items-center justify-between">
          <div className="flex items-center gap-4">
            <Button asChild variant="ghost" size="sm">
              <Link href="/" className="flex items-center gap-2">
                <ArrowLeft className="h-4 w-4" />
                Volver
              </Link>
            </Button>
            <div className="flex items-center gap-2">
              <Heart className="h-6 w-6 text-primary fill-primary" />
              <h1 className="text-xl font-bold text-primary">Encuentro Animal</h1>
            </div>
          </div>
          <Button asChild>
            <Link href="/report">Reportar Mascota</Link>
          </Button>
        </div>
      </header>

<main className="container mx-auto px-4 py-8">
        <div className="text-center mb-8">
          <h2 className="text-3xl font-bold text-foreground mb-2">Mascotas Reportadas</h2>
          <p className="text-muted-foreground">
            Explora los reportes de mascotas perdidas y encontradas en tu comunidad
          </p>
        </div>
        <AnimalsList initialAnimals={animals || []} />
      </main>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/animals-list.tsx"
"use client"

import { useState, useMemo } from "react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Search, MapPin, Phone, Calendar, Heart } from "lucide-react"

interface Animal {
  id: string
  name: string
  species: string
  description: string | null
  location: string
  status: "lost" | "found"
  contact_info: string
  image_url: string | null
  created_at: string
}

interface AnimalsListProps {
  initialAnimals: Animal[]
}

export default function AnimalsList({ initialAnimals }: AnimalsListProps) {
  const [searchTerm, setSearchTerm] = useState("")
  const [statusFilter, setStatusFilter] = useState<string>("all")
  const [speciesFilter, setSpeciesFilter] = useState<string>("all")

const filteredAnimals = useMemo(() => {
    return initialAnimals.filter((animal) => {
      const matchesSearch =
        animal.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
        animal.species.toLowerCase().includes(searchTerm.toLowerCase()) ||
        animal.location.toLowerCase().includes(searchTerm.toLowerCase()) ||
        (animal.description && animal.description.toLowerCase().includes(searchTerm.toLowerCase()))

const matchesStatus = statusFilter === "all" || animal.status === statusFilter
      const matchesSpecies = speciesFilter === "all" || animal.species === speciesFilter

return matchesSearch && matchesStatus && matchesSpecies
    })
  }, [initialAnimals, searchTerm, statusFilter, speciesFilter])

const clearFilters = () => {
    setSearchTerm("")
    setStatusFilter("all")
    setSpeciesFilter("all")
  }

if (initialAnimals.length === 0) {
    return (
      <div className="text-center py-12">
        <Heart className="h-16 w-16 text-muted-foreground mx-auto mb-4" />
        <h3 className="text-xl font-semibold text-foreground mb-2">No hay reportes aún</h3>
        <p className="text-muted-foreground mb-4">Sé el primero en reportar una mascota perdida o encontrada</p>
        <Button asChild>
          <a href="/report">Crear Primer Reporte</a>
        </Button>
      </div>
    )
  }

return (
    <div className="space-y-6">
      {/* Filters */}
      <Card className="shadow-lg border-0">
        <CardHeader>
          <CardTitle className="text-lg">Filtros de Búsqueda</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="grid md:grid-cols-4 gap-4">
            <div className="relative">
              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
              <Input
                placeholder="Buscar por nombre, especie, ubicación..."
                value={searchTerm}
                onChange={(e) => setSearchTerm(e.target.value)}
                className="pl-10"
              />
            </div>
            <Select value={statusFilter} onValueChange={setStatusFilter}>
              <SelectTrigger>
                <SelectValue placeholder="Estado" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="all">Todos</SelectItem>
                <SelectItem value="lost">Perdidas</SelectItem>
                <SelectItem value="found">Encontradas</SelectItem>
              </SelectContent>
            </Select>
            <Select value={speciesFilter} onValueChange={setSpeciesFilter}>
              <SelectTrigger>
                <SelectValue placeholder="Especie" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="all">Todas</SelectItem>
                <SelectItem value="perro">Perro</SelectItem>
                <SelectItem value="gato">Gato</SelectItem>
                <SelectItem value="ave">Ave</SelectItem>
                <SelectItem value="conejo">Conejo</SelectItem>
                <SelectItem value="otro">Otro</SelectItem>
              </SelectContent>
            </Select>
            <Button variant="outline" onClick={clearFilters}>
              Limpiar Filtros
            </Button>
          </div>
        </CardContent>
      </Card>

{/* Results count */}
      <div className="text-sm text-muted-foreground">
        Mostrando {filteredAnimals.length} de {initialAnimals.length} reportes
      </div>

{/* Animals grid */}
      {filteredAnimals.length === 0 ? (
        <div className="text-center py-12">
          <Search className="h-16 w-16 text-muted-foreground mx-auto mb-4" />
          <h3 className="text-xl font-semibold text-foreground mb-2">No se encontraron resultados</h3>
          <p className="text-muted-foreground mb-4">Intenta ajustar los filtros de búsqueda</p>
          <Button variant="outline" onClick={clearFilters}>
            Limpiar Filtros
          </Button>
        </div>
      ) : (
        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
          {filteredAnimals.map((animal) => (
            <AnimalCard key={animal.id} animal={animal} />
          ))}
        </div>
      )}
    </div>
  )
}

function AnimalCard({ animal }: { animal: Animal }) {
  const formatDate = (dateString: string) => {
    return new Date(dateString).toLocaleDateString("es-ES", {
      year: "numeric",
      month: "long",
      day: "numeric",
    })
  }

const getStatusColor = (status: string) => {
    return status === "lost" ? "bg-destructive" : "bg-primary"
  }

const getStatusText = (status: string) => {
    return status === "lost" ? "Perdida" : "Encontrada"
  }

return (
    <Card className="shadow-lg border-0 hover:shadow-xl transition-shadow overflow-hidden">
      {animal.image_url && (
        <div className="aspect-video relative overflow-hidden">
          <img
            src={animal.image_url || "/placeholder.svg"}
            alt={animal.name}
            className="w-full h-full object-cover"
            onError={(e) => {
              const target = e.target as HTMLImageElement
              target.src = "/placeholder.svg?height=200&width=300"
            }}
          />
          <Badge className={`absolute top-2 right-2 ${getStatusColor(animal.status)} text-white`}>
            {getStatusText(animal.status)}
          </Badge>
        </div>
      )}
      <CardHeader>
        <div className="flex items-start justify-between">
          <div>
            <CardTitle className="text-xl text-foreground">{animal.name}</CardTitle>
            <CardDescription className="capitalize">{animal.species}</CardDescription>
          </div>
          {!animal.image_url && (
            <Badge className={`${getStatusColor(animal.status)} text-white`}>{getStatusText(animal.status)}</Badge>
          )}
        </div>
      </CardHeader>
      <CardContent className="space-y-3">
        {animal.description && <p className="text-sm text-muted-foreground line-clamp-3">{animal.description}</p>}
        <div className="flex items-center gap-2 text-sm text-muted-foreground">
          <MapPin className="h-4 w-4" />
          <span>{animal.location}</span>
        </div>
        <div className="flex items-center gap-2 text-sm text-muted-foreground">
          <Calendar className="h-4 w-4" />
          <span>Reportado el {formatDate(animal.created_at)}</span>
        </div>
        <div className="pt-2 border-t">
          <div className="flex items-center gap-2 text-sm">
            <Phone className="h-4 w-4 text-accent" />
            <span className="font-medium">Contacto:</span>
            <span className="text-accent">{animal.contact_info}</span>
          </div>
        </div>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="components/ui/badge.tsx"
import type * as React from "react"
import { cva, type VariantProps } from "class-variance-authority"

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

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

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

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

export { Badge, badgeVariants }</article></body></html>

About

Tags

Share

About

Tags

Share

More from artugrande

About

Tags

Share

About

Tags

Share

More from artugrande