Codigo en React generado por IA para el proyecto ganaderia-assaf

import React, { useState } from ‘react’;
import { Tabs, TabsContent, TabsList, TabsTrigger } from «@/components/ui/tabs»
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from «@/components/ui/card»
import { Input } from «@/components/ui/input»
import { Label } from «@/components/ui/label»
import { Button } from «@/components/ui/button»
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from «@/components/ui/select»
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from «@/components/ui/table»
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from «@/components/ui/dialog»
import { toast } from «@/components/ui/use-toast»

const RegistroOvejas = ({ ganaderos }) => {
const [raza, setRaza] = useState(»);
const [ubicacion, setUbicacion] = useState(»);
const [fechaRegistro, setFechaRegistro] = useState(»);
const [autorRegistro, setAutorRegistro] = useState(»);

const razas = [«Assaf», «Churra», «Castellana», «Latxa», «Manchega»];

const handleSubmit = () => {
// Aquí iría la lógica para guardar el registro
toast({
title: «Registro guardado»,
description: «El registro de la oveja ha sido guardado con éxito.»,
})
};

return (
<Card>
<CardHeader>
<CardTitle>Registro de Ovejas</CardTitle>
<CardDescription>Ingrese los datos de las ovejas</CardDescription>
</CardHeader>
<CardContent>
<div className=»grid w-full items-center gap-4″>
<div className=»flex flex-col space-y-1.5″>
<Label htmlFor=»raza»>Raza</Label>
<Select onValueChange={setRaza}>
<SelectTrigger id=»raza»>
<SelectValue placeholder=»Seleccione una raza» />
</SelectTrigger>
<SelectContent position=»popper»>
{razas.map((r) => (
<SelectItem key={r} value={r}>{r}</SelectItem>
))}
</SelectContent>
</Select>
</div>
<div className=»flex flex-col space-y-1.5″>
<Label htmlFor=»ubicacion»>Ubicación</Label>
<Input id=»ubicacion» placeholder=»Coordenadas o dirección» value={ubicacion} onChange={(e) => setUbicacion(e.target.value)} />
</div>
<div className=»flex flex-col space-y-1.5″>
<Label htmlFor=»fechaRegistro»>Fecha de Registro</Label>
<Input id=»fechaRegistro» type=»date» value={fechaRegistro} onChange={(e) => setFechaRegistro(e.target.value)} />
</div>
<div className=»flex flex-col space-y-1.5″>
<Label htmlFor=»autorRegistro»>Autor del Registro</Label>
<Select onValueChange={setAutorRegistro}>
<SelectTrigger id=»autorRegistro»>
<SelectValue placeholder=»Seleccione un ganadero» />
</SelectTrigger>
<SelectContent position=»popper»>
{ganaderos.map((g) => (
<SelectItem key={g.id} value={g.id}>{g.nombre}</SelectItem>
))}
</SelectContent>
</Select>
</div>
</div>
</CardContent>
<CardFooter>
<Button onClick={handleSubmit}>Guardar Registro</Button>
</CardFooter>
</Card>
);
};

const GestionGanaderos = () => {
const [ganaderos, setGanaderos] = useState([
{ id: 1, nombre: «Juan Pérez», telefono: «123456789» },
{ id: 2, nombre: «María García», telefono: «987654321» },
]);
const [nombre, setNombre] = useState(»);
const [telefono, setTelefono] = useState(»);
const [editingId, setEditingId] = useState(null);
const [isDialogOpen, setIsDialogOpen] = useState(false);

const handleEdit = (ganadero) => {
setNombre(ganadero.nombre);
setTelefono(ganadero.telefono);
setEditingId(ganadero.id);
setIsDialogOpen(true);
};

const handleDelete = (id) => {
setGanaderos(ganaderos.filter(g => g.id !== id));
toast({
title: «Ganadero eliminado»,
description: «El ganadero ha sido eliminado con éxito.»,
variant: «destructive»,
})
};

return (
<Card>
<CardHeader>
<CardTitle>Gestión de Ganaderos</CardTitle>
<CardDescription>Altas, bajas, modificaciones y consultas de ganaderos</CardDescription>
</CardHeader>
<CardContent>
<Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
<DialogTrigger asChild>
<Button>Añadir Ganadero</Button>
</DialogTrigger>
<DialogContent>
<DialogHeader>
<DialogTitle>{editingId ? ‘Editar’ : ‘Añadir’} Ganadero</DialogTitle>
<DialogDescription>
Ingrese los datos del ganadero a continuación.
</DialogDescription>
</DialogHeader>
<form onSubmit={handleSubmit}>
<div className=»grid gap-4 py-4″>
<div className=»grid grid-cols-4 items-center gap-4″>
<Label htmlFor=»nombre» className=»text-right»>
Nombre
</Label>
<Input id=»nombre» value={nombre} onChange={(e) => setNombre(e.target.value)} className=»col-span-3″ />
</div>
<div className=»grid grid-cols-4 items-center gap-4″>
<Label htmlFor=»telefono» className=»text-right»>
Teléfono
</Label>
<Input id=»telefono» value={telefono} onChange={(e) => setTelefono(e.target.value)} className=»col-span-3″ />
</div>
</div>
<DialogFooter>
<Button type=»submit»>{editingId ? ‘Actualizar’ : ‘Añadir’} Ganadero</Button>
</DialogFooter>
</form>
</DialogContent>
</Dialog>
<Table>
<TableHeader>
<TableRow>
<TableHead>Nombre</TableHead>
<TableHead>Teléfono</TableHead>
<TableHead>Acciones</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{ganaderos.map((ganadero) => (
<TableRow key={ganadero.id}>
<TableCell>{ganadero.nombre}</TableCell>
<TableCell>{ganadero.telefono}</TableCell>
<TableCell>
<Button variant=»outline» className=»mr-2″ onClick={() => handleEdit(ganadero)}>Editar</Button>
<Button variant=»destructive» onClick={() => handleDelete(ganadero.id)}>Eliminar</Button>
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</CardContent>
</Card>
);
};

const App = () => {
const [ganaderos, setGanaderos] = useState([
{ id: 1, nombre: «Juan Pérez», telefono: «123456789» },
{ id: 2, nombre: «María García», telefono: «987654321» },
]);

return (
<div className=»container mx-auto p-4″>
<h1 className=»text-3xl font-bold mb-4″>Gestión de Ganadería Ovina Assaf</h1>
<Tabs defaultValue=»ovejas»>
<TabsList className=»grid w-full grid-cols-2″>
<TabsTrigger value=»ovejas»>Ovejas</TabsTrigger>
<TabsTrigger value=»ganaderos»>Ganaderos</TabsTrigger>
</TabsList>
<TabsContent value=»ovejas»><RegistroOvejas ganaderos={ganaderos} /></TabsContent>
<TabsContent value=»ganaderos»><GestionGanaderos /></TabsContent>
</Tabs>
</div>
);
};

export default App;