Merge branch 'main' into pablogracia/set-seed-data

.env.example

@@ -1,4 +1,5 @@
 NEXT_PUBLIC_SUPABASE_URL=
 NEXT_PUBLIC_SUPABASE_ANON_KEY=
-
-API_KEY=
+SUPABASE_GOOGLE_AUTH_ID=
+SUPABASE_GOOGLE_AUTH_SECRET=
+API_KEY=

CONTRIBUTING.md

@@ -46,33 +46,69 @@ Este mensaje indica que se han añadido instrucciones de instalación local en e
 
 ¡Gracias por contribuir! Tu ayuda hace una gran diferencia para el proyecto.
 
-<br/>
-
 ## Desarrollo local - levantar db de desarrollo local
 
 ### Pre requisitos
 
-- [docker](https://docs.docker.com/engine/install/) y [docker compose](https://docs.docker.com/compose/install/)
-- [cli de supabase](https://supabase.com/docs/guides/local-development/cli/getting-started)
+- [Docker](https://docs.docker.com/engine/install/) y [Docker Compose](https://docs.docker.com/compose/install/)
+- [Supabase CLI](https://supabase.com/docs/guides/local-development/cli/getting-started)
 
-### Instalar self hosted supabase
+Si ya tienes cualquiera de los dos, **actualizalos para evitar errores**.
 
-```
+Si usas docker desktop en Windows, esta es la configuración que deberías tener.
+<img src="https://supabase.com/docs/_next/image?url=%2Fdocs%2Fimg%2Fguides%2Fcli%2Fdocker-win.png&w=3840&q=75&dpl=dpl_EU6MXvnLKJuwyo4VfbBx9GiJt9Qx" style="margin: 10px 0px; width: 55rem;">
+
+### Iniciar supabase en local
+
+Entramos en la carpeta del repositorio
+
+```bash
 cd ${DIRECTORIO_DE_EMERGENCY_CV}
-supabase login
-supabase init
-supabase link --project-ref nmvcsenkfqbdlfdtiqdo
+```
+
+Iniciamos la base de datos (**tener docker encendido**)
+
+```bash
 supabase start
 ```
 
-### Para hacer cambios en el schema
+Si no vemos las tablas ni los datos de ejemplo cargados podemos refrescar la base de datos con:
+
+```bash
+supabase db reset
+```
+
+### Hacer cambios en el schema
 
-- Editar como queremos que sea en local (studio de supabase)
-- Ejecutar el comando:
+#### Crear migracion automatica
 
+Nos interesa usar esta opción, cuando queremos **editar la base de datos desde el studio web**
+
+Cuando acabemos de realizar los cambios en el studio web, ejecutaremos el siguiente comando para generar la migration.
+
+```bash
+supabase db diff -f nombre_migracion
 ```
-// nombre de la migracion es indicativo, no tiene nigun efecto
-supabase db diff -f ${NOMBRE_DE_LA_MIGRACION}
+
+#### Crear migración manual
+
+Nos interesa usar esta opción, cuando queremos **editar la base de datos con codigo SQL manual**.
+
+Primero, creamos la el archivo migration con
+
+```bash
+supabase migration new nombre_migracion
+```
+
+Se creara un **nuevo fichero** con el nombre que hemos usado **en supabase/migrations**
+
+En ese archivo añadiremos todo el código SQL que necesitemos
+
+Si queremos visualizar nuestros cambios en local, podemos usar
+
+```bash
+supabase db reset
 ```
 
-- Esto generara una migracion en el local, hay que añadir esto al PR y github actions lo pondra en produccion.
+<br>
+La migration que generemos, la añadiremos en el PR.

next.config.mjs

@@ -5,6 +5,14 @@ const nextConfig = {
   experimental: {
     serverActions: true,
   },
+  images: {
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: 'lh3.googleusercontent.com',
+      },
+    ],
+  },
 };
 
 export default nextConfig;

src/app/layout.tsx

@@ -1,7 +1,7 @@
 import './globals.css';
 import 'leaflet/dist/leaflet.css';
-import EmergencyLayout from '@/components/layout/EmergencyLayout';
-import { EmergencyProvider } from '@/context/EmergencyProvider';
+import SidebarLayout from '@/components/layout/SidebarLayout';
+import { ModalProvider } from '@/context/ModalProvider';
 import { TownsProvider } from '@/context/TownProvider';
 import { createClient } from '@/lib/supabase/server';
 import { SessionProvider } from '@/context/SessionProvider';
@@ -33,9 +33,9 @@ export default async function RootLayout({ children }: PropsWithChildren) {
         <SessionProvider session={session}>
           <QueryClientProvider>
             <TownsProvider towns={towns}>
-              <EmergencyProvider>
-                <EmergencyLayout>{children}</EmergencyLayout>
-              </EmergencyProvider>
+              <ModalProvider>
+                <SidebarLayout>{children}</SidebarLayout>
+              </ModalProvider>
             </TownsProvider>
           </QueryClientProvider>
         </SessionProvider>

src/app/page.tsx

@@ -159,10 +159,10 @@ export default function Home() {
       priority: 'high',
     },
     {
-      title: 'Personas Desaparecidas',
-      description: 'Reportar o buscar personas',
+      title: 'Desaparecidos y Extraviados',
+      description: 'Reportar o buscar Personas, animales y vehículos',
       icon: Users,
-      path: 'https://desaparecidosdana.pythonanywhere.com/',
+      path: '/personas-animales-desaparecidos',
       color: 'purple',
       priority: 'high',
     },

src/app/personas-animales-desaparecidos/page.js

@@ -0,0 +1,61 @@
+// personas-animales-desaparecidos/page.js
+
+import { Users, PawPrint, Car, UserSearch } from 'lucide-react';
+
+export default function PersonasAnimalesDesaparecidos() {
+  return (
+    <div className="mx-auto p-4 max-w-4xl">
+      {/* Encabezado con fondo de color e icono */}
+      <div className="flex items-center justify-between bg-purple-100 p-6 rounded-t-lg shadow">
+        <h1 className="text-2xl font-bold text-purple-800 flex items-center gap-2">
+          <UserSearch className="h-8 w-8 text-purple-500" />
+          Personas, Animales y Vehículos Desaparecidos
+        </h1>
+      </div>
+
+      {/* Tarjeta grande para información */}
+      <div className="bg-white p-8 rounded-b-lg shadow mb-8">
+        <p className="text-gray-700 text-lg">
+          En esta página puedes acceder a diferentes herramientas externas para encontrar personas, animales y vehículos
+          desaparecidos. Selecciona la opción que necesitas para más información y para reportar un caso o buscar ayuda.
+        </p>
+      </div>
+
+      {/* Tres columnas de botones */}
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+        {/* Botón para Personas Desaparecidas */}
+        <a
+          href="https://desaparecidosdana.pythonanywhere.com/"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="flex flex-col items-center justify-center bg-white border-l-4 border-blue-500 p-6 rounded-lg shadow hover:shadow-md transition-transform transform hover:-translate-y-1"
+        >
+          <Users className="h-10 w-10 text-blue-500 mb-2" />
+          <h2 className="text-lg font-bold text-blue-600 text-center">Personas Desaparecidas</h2>
+        </a>
+
+        {/* Botón para Animales Desaparecidos */}
+        <a
+          href="https://gorogoro.es/dana"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="flex flex-col items-center justify-center bg-white border-l-4 border-green-500 p-6 rounded-lg shadow hover:shadow-md transition-transform transform hover:-translate-y-1"
+        >
+          <PawPrint className="h-10 w-10 text-green-500 mb-2" />
+          <h2 className="text-lg font-bold text-green-600 text-center">Animales Desaparecidos</h2>
+        </a>
+
+        {/* Botón para Vehículos Extraviados */}
+        <a
+          href="https://tucochedana.es/"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="flex flex-col items-center justify-center bg-white border-l-4 border-purple-500 p-6 rounded-lg shadow hover:shadow-md transition-transform transform hover:-translate-y-1"
+        >
+          <Car className="h-10 w-10 text-purple-500 mb-2" />
+          <h2 className="text-lg font-bold text-purple-600 text-center">Vehículos Extraviados</h2>
+        </a>
+      </div>
+    </div>
+  );
+}

src/app/solicitar-ayuda/_components/Form/FormContainer.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { FormEvent, useCallback, useEffect, useMemo, useState } from 'react';
 
 import { FormRenderer } from './FormRenderer';
 import { FormData, Status } from '../types';
@@ -32,6 +32,8 @@ export function FormContainer() {
   const router = useRouter();
   const session = useSession();
 
+  const userId = session.user?.id;
+
   const [formData, setFormData] = useState<FormData>({
     nombre: session?.user?.user_metadata?.full_name || session?.user?.user_metadata?.nombre || ''.split(' ')[0],
     ubicacion: '',
@@ -62,7 +64,7 @@ export function FormContainer() {
   });
 
   const handleSubmit = useCallback(
-    async (e: any) => {
+    async (e: FormEvent) => {
       e.preventDefault();
 
       /* Form validation */
@@ -107,6 +109,7 @@ export function FormContainer() {
           },
           town_id: parseInt(formData.pueblo),
           status: 'active',
+          user_id: userId,
         };
 
         await helpRequestService.createRequest(helpRequestData);
@@ -139,7 +142,7 @@ export function FormContainer() {
         });
       }
     },
-    [formData, router],
+    [userId, formData, router],
   );
 
   const handleInputElementChange: React.ChangeEventHandler<HTMLInputElement> = useCallback((e) => {