pull

client/.env.example

@@ -0,0 +1 @@
+API_URL=https://clinica-medica-production.up.railway.app/api/v1/

client/.gitignore

@@ -19,13 +19,15 @@
 # misc
 .DS_Store
 *.pem
+.vscode
 
 # debug
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 
 # local env files
+.env
 .env*.local
 
 # vercel

client/src/actions/doctors/doctorActions.ts

@@ -0,0 +1,26 @@
+'use server'
+
+const BASE_URL = process.env.API_URL
+
+export const getAllDoctors = async () => {
+  const url = BASE_URL + '/doctor/allDoctors'
+  const data = await fetch(url).then((res) => res.json())
+
+  if (data) {
+    return data
+  }
+
+  return []
+}
+
+export const getDoctorById = async (id: number) => {
+  const url = BASE_URL + '/doctor/getById/' + id
+
+  const data = await fetch(url).then((res) => res.json())
+
+  if (data) {
+    return data
+  }
+
+  return null
+}

client/src/app/(patients)/appointment/[id]/page.tsx

@@ -1,31 +1,10 @@
-import { Data } from '@/interfaces/user'
-import data from '../../../../utils/data.json'
 import { DoctorDetails } from '@/ui/doctors/Details'
+import { getDoctorById } from '@/actions/doctors/doctorActions'
 
 export default async function AppointmentById({ params }: { params: { id: string } }) {
   const id = Number(params.id)
-  /*   const url = '../../../../utils/data.json'
-    const data = await fetch(url) */
 
-  const getDoctorData = (data: Data) => {
-    const doctor = data.doctors.find((doctor) => {
-      const user = data.users.find((user) => user.id === doctor.id_user && user.id === id)
-      return user
-    })
-
-    const user = data.users.find((user) => user.id === doctor?.id_user)
-    return {
-      speciality: doctor?.speciality || 'error',
-      name: user?.name || 'error',
-      dni: user?.dni || '12312312',
-      phone: user?.phone || 'error',
-      email: user?.email || 'error',
-      address: user?.address || 'error'
-    }
-
-  }
-
-  const doctor = getDoctorData(data)
+  const doctor = await getDoctorById(id)
 
   return (
     <div className="flex flex-col p-4 gap-4">

client/src/app/(patients)/appointment/page.tsx

@@ -1,9 +1,10 @@
-import data from '../../../utils/data.json'
 import { DoctorList } from "@/ui/doctors/List"
 import { Search, SearchResults } from "@/components";
 import { Suspense } from "react";
+import { getAllDoctors } from '@/actions/doctors/doctorActions';
+import { DoctorFromResponse } from "@/interfaces/user";
 
-export default function AppointmentsPage({
+export default async function AppointmentsPage({
   searchParams,
 }: {
   searchParams?: {
@@ -15,18 +16,22 @@ export default function AppointmentsPage({
 }) {
   const query = searchParams?.q || '';
 
-  const doctorListWithPlacesFiltered = data.doctors.filter((doctor, index, self) =>
+  const data: DoctorFromResponse[] = await getAllDoctors()
+
+  const doctorListWithPlacesFiltered = data.filter((doctor, index, self) =>
     index === self.findIndex((d) => d.place === doctor.place)
   )
-  const doctorListWithSpecialityFiltered = data.doctors.filter((doctor, index, self) =>
-    index === self.findIndex((d) => d.speciality === doctor.speciality)
+  const doctorListWithSpecialityFiltered = data.filter((doctor, index, self) =>
+    index === self.findIndex((d) => d.specialization === doctor.specialization)
   )
+
+
   return (
     <div className="w-full max-w-[1480px] m-auto h-screen flex flex-col p-4 gap-4">
       <div className="relative flex flex-col">
         <Search placeholder="Buscá por profesional, establecimiento o especialidad..." />
         <Suspense key={query} fallback={'Cargando ...'}>
-          <SearchResults query={query} />
+          <SearchResults query={query} data={data} />
         </Suspense>
       </div>
 

client/src/app/layout.tsx

@@ -1,10 +1,12 @@
 import type { Metadata } from "next";
-import { Inter } from 'next/font/google'
+import { Poppins } from 'next/font/google'
 import "./globals.css";
+import { Header } from "@/ui/patient/Header";
 
-const inter = Inter({
-  subsets: ['latin'],
-  display: 'swap',
+const poppins = Poppins({
+  style: 'normal',
+  weight: ['400', '500', '600'],
+  subsets: ['latin']
 })
 
 export const metadata: Metadata = {
@@ -20,9 +22,10 @@ export default function RootLayout({
   return (
     <html lang="en">
       <body
-        className={`${inter.className} antialiased`}
+        className={`${poppins.className} antialiased`}
       >
         <main>
+          <Header />
           {children}
         </main>
       </body>

client/src/app/page.tsx

@@ -1,56 +1,36 @@
 
 import Image from "next/image";
 import Link from "next/link";
-import HomeImage from '/public/images/home.jpg'
+import HomeImage from '/public/images/home.png'
+import { ButtonComponent } from "@/ui";
 
 export default function Home() {
   return (
     <div>
       <div>
-        {/* Navbar */}
-        <nav className="bg-gray-800 text-white px-4 py-3 flex justify-between items-center">
-          <div className="text-lg font-bold">Logo</div>
-          <div className="space-x-4">
-            {/* Enlace a Registrarse */}
-            <Link href="/auth/register">
-              <button className="bg-gray-700 hover:bg-gray-600 text-white py-2 px-4 rounded">
-                Registrarse
-              </button>
-            </Link>
-            {/* Enlace a Iniciar Sesión */}
-            <Link href="/auth/login">
-              <button className="bg-blue-500 hover:bg-blue-400 text-white py-2 px-4 rounded">
-                Iniciar Sesión
-              </button>
-            </Link>
-          </div>
-        </nav>
-
-        {/* Slider */}
-        <header className="w-full">
-          <div className="relative w-full h-64 overflow-hidden">
-            <div className="flex transition-transform ease-out duration-500">
-              {/* Imagen*/}
-              <div className="min-w-full h-64 flex items-center justify-center">
-                <Image
-                  src={HomeImage}
-                  width={1200}
-                  height={1200}
-                  alt="Policonsultorio 1"
-                  className="w-full h-full object-cover"
-                />
-              </div>
+        <div className="relative w-full overflow-hidden">
+          <div className="flex transition-transform ease-out duration-500">
+            <div className="min-w-full flex items-center justify-center">
+              <Image
+                src={HomeImage}
+                width={1200}
+                height={1200}
+                alt="Policonsultorio 1"
+                className="w-full h-full object-cover"
+              />
             </div>
           </div>
-        </header>
+        </div>
 
-        {/* Contenido principal */}
-        <main className="p-8 text-center">
-          <h1 className="text-4xl font-bold mb-4">Bienvenido</h1>
-          <p className="text-lg text-gray-600">Policonsultorio</p>
-          <Link href={'/appointment'} className="text-lg text-gray-600">Agendar Cita</Link>
-        </main>
+        <div className="flex flex-col gap-12 gaptext-center absolute left-[239px] top-[326px]">
+          <h1 className="font-medium mb-4 text-[#004784] text-6xl text-start max-w-[868px]">Comenzá gestionar tus citas
+            en un solo lugar.</h1>
+          <p className="max-w-[555px] text-start text-gray-600">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas dolor nulla, maximus sit amet nulla egestas, egestas maximus sapien. Aliquam eget libero id justo molestie ultricies. Fusce ac nisi dignissim, finibus libero  amet, congue orci. Fusce non gravida nunc. Praesent fermentum egestas eros, non imperdiet dolor. </p>
+          <Link href={'/appointment'} className="mt-16 max-w-max">
+            <ButtonComponent size="big" variant="dark" text="Reservá un turno" />
+          </Link>
+        </div>
       </div>
-    </div>
+    </div >
   );
 }

client/src/components/search/SearchResults.tsx

@@ -1,74 +1,74 @@
-import data from '../../utils/data.json'
-import { Data } from "@/interfaces/user"
-import { DoctorCard, PlaceCard, SpecialityCard } from "@/ui"
+import { DoctorFromResponse } from '@/interfaces/user'
+import { DoctorCard, PlaceCard, Placeholder, SpecialityCard } from "@/ui"
 
 type Props = {
   query: string
+  data: DoctorFromResponse[]
 }
 
-export const SearchResults: React.FC<Props> = async ({ query }) => {
-  const getDoctorData = (data: Data) => {
-    const doctorList = data.doctors
+export const SearchResults: React.FC<Props> = async ({ query, data }) => {
+  const getDoctorData = (data: DoctorFromResponse[]) => {
+    const doctorList = data
       .filter((doctor) => {
-        const user = data.users.find((user) => user.id === doctor.id_user)
+        const user = data.find((user) => user.id === doctor.id)
 
         if (user) {
           const matchesQuery =
             user.name.toLowerCase().includes(query.toLowerCase()) ||
-            doctor.place.toLowerCase().includes(query.toLowerCase()) ||
-            doctor.speciality.toLowerCase().includes(query.toLowerCase())
+            doctor.place?.toLowerCase().includes(query.toLowerCase()) ||
+            doctor.specialization.toLowerCase().includes(query.toLowerCase())
 
           return matchesQuery
         }
         return false
       })
       .map((doctor) => {
-        const user = data.users.find((user) => user.id === doctor.id_user)
+        const user = data.find((user) => user.id === doctor.id)
 
         if (user) {
           return {
             id: user.id,
             name: user.name,
-            speciality: doctor.speciality,
-            place: doctor.place,
-            address: doctor.address || "Dirección no disponible"
-
+            speciality: doctor.specialization,
+            place: 'Consultorio Principal',
+            address: doctor.email || 'Dirección no disponible',
           }
         }
       })
       .filter(Boolean)
 
     const uniqueDoctorList = Array.from(
       new Map(
-        doctorList.map(item => [`${item?.speciality}-${item?.place}`, item])
+        doctorList.map((item) => [`${item?.speciality}-${item?.place}`, item])
       ).values()
     )
 
     return uniqueDoctorList
   }
 
   const results = getDoctorData(data)
+  console.log(results);
 
   const isNameSearch = results.some(result => result?.name.toLowerCase().includes(query.toLowerCase()))
   const isSpecialitySearch = results.some(result => result?.speciality.toLowerCase().includes(query.toLowerCase()))
   const isPlaceSearch = results.some(result => result?.place.toLowerCase().includes(query.toLowerCase()))
 
-  let filteredResults = results;
+  let filteredResults = results
 
   if (isSpecialitySearch) {
     filteredResults = Array.from(
       new Map(
         filteredResults.map(item => [item?.speciality, item])
       ).values()
-    );
+    )
   }
 
   if (isPlaceSearch) {
     filteredResults = Array.from(
       new Map(
         filteredResults.map(item => [item?.place, item])
       ).values()
-    );
+    )
   }
 
   return (
@@ -82,7 +82,7 @@ export const SearchResults: React.FC<Props> = async ({ query }) => {
           <>
             <div className='flex flex-wrap gap-4 h-min w-full max-w-6xl'>
               {filteredResults.map((doctor) => (
-                <div className="flex h-min flex-grow" key={doctor?.id}>
+                <div className="flex h-min flex-grow flex-wrap gap-4" key={doctor?.id}>
                   {isNameSearch && (
                     <DoctorCard id={doctor?.id} name={doctor?.name} img="" place={doctor?.place} speciality={doctor?.speciality} />
                   )}
@@ -95,9 +95,7 @@ export const SearchResults: React.FC<Props> = async ({ query }) => {
                 </div>
               ))}
             </div>
-            <div className='w-[212px] h-[450px] bg-gray-300 ml-auto text-center content-center'>
-              <p className='text-xl p-2'>Chat bot o Publicidad</p>
-            </div>
+            <Placeholder />
           </>
         )}
         {results.length === 0 && query && (

client/src/interfaces/user.d.ts

@@ -38,3 +38,16 @@ export interface Data {
   users: User[]
   doctors: Doctor[]
 }
+
+export interface DoctorFromResponse {
+  id: number
+  name: string
+  password: string
+  email: string
+  phone: string
+  img: string
+  active: boolean
+  specialization: string
+  licenseNumber: string
+  place?: string
+}

client/src/ui/buttons/ButtonComponent.tsx

@@ -0,0 +1,17 @@
+interface Props {
+  className?: string
+  size: 'normal' | 'big'
+  variant: 'light' | 'dark'
+  text: string
+}
+
+export function ButtonComponent({ className, size, variant, text }: Props) {
+  const style = variant === 'light' ? 'bg-white text-secondaryBlue-500' : 'bg-secondaryBlue-500 text-white '
+  const sizing = size === 'normal' ? 'text-lg w-[220px] h-16' : 'text-[32px] w-[419px] h-24'
+
+  return (
+    <button type="button" className={`rounded-[64px] border border-secondaryBlue-500 ${className} ${style} ${sizing}`}>
+      {text}
+    </button>
+  )
+}