calendar

client/next.config.mjs

@@ -1,4 +1,13 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {};
+const nextConfig = {
+    images: {
+        remotePatterns: [
+            {
+                protocol: 'https',
+                hostname: 'res.cloudinary.com'
+            },
+        ]
+    },
+};
 
 export default nextConfig;

client/src/actions/doctors/doctorActions.ts

@@ -1,5 +1,8 @@
 'use server'
 
+import { Doctors } from "@/interfaces/doctors"
+import { redirect } from "next/navigation"
+
 const BASE_URL = process.env.API_URL
 
 export const getAllDoctors = async () => {
@@ -16,11 +19,32 @@ export const getAllDoctors = async () => {
 export const getDoctorById = async (id: number) => {
   const url = BASE_URL + '/doctor/getById/' + id
 
-  const data = await fetch(url).then((res) => res.json())
+  const data: Doctors = await fetch(url).then((res) => res.json())
 
-  if (data) {
-    return data
+  if (!data) {
+    redirect("/")
+  }
+
+  return data
+}
+
+export const getDoctorsBySpecialty = async (specialty: string) => {
+  const url = BASE_URL + '/doctor/allDoctors'
+
+  const data: Doctors[] = await fetch(url).then((res) => res.json())
+
+  const filterBySpecialty = data.filter(doctor => doctor.specialization === specialty)
+
+  if (!filterBySpecialty) {
+    return undefined
   }
 
-  return null
+  return filterBySpecialty
 }
+
+export const getHoursDoctor = async (id: number) => {
+  const url = BASE_URL + `/appointment/occupied-times/${id}`
+
+  const data = await fetch(url).then((res) => res.json())
+
+}

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

@@ -1,15 +1,48 @@
-import { DoctorDetails } from '@/ui/doctors/Details'
 import { getDoctorById } from '@/actions/doctors/doctorActions'
+import { CalendarDemo } from '@/components/CalendarDemo'
+import Image from 'next/image'
+import { redirect } from 'next/navigation'
 
 export default async function AppointmentById({ params }: { params: { id: string } }) {
   const id = Number(params.id)
 
   const doctor = await getDoctorById(id)
 
+
+  if (!doctor) {
+    redirect("/dashboard")
+  }
+
   return (
-    <div className="flex flex-col p-4 gap-4">
-      <h3>Agenda del doctor </h3>
-      <DoctorDetails doctor={doctor} />
+    <div className=" max-w-[1400px] mx-auto px-6 py-10">
+      <div className="flex justify-between">
+        <div>
+          <h2 className="mb-6 text-2xl">Selecciona un turno</h2>
+          <div className="flex gap-8">
+
+            <figure className='relative size-20 rounded-full overflow-hidden'>
+              <Image src={doctor.img} fill sizes='(max-width: 728px) 100px' alt='' />
+            </figure>
+            <div>
+              <h3>{doctor.name}</h3>
+              <span>{doctor.specialization}</span>
+
+              <p className="mt-2">Clínica colón - jujuy 2176</p>
+            </div>
+          </div>
+
+        </div>
+
+        <div>
+          <div className="bg-zinc-200 p-6 rounded-lg">
+            <h2 className="font-bold">Primer turno disponible</h2>
+            <p>Martes 22 de Octubre <span className="font-bold">14:00hs</span></p>
+          </div>
+        </div>
+      </div>
+
+      <CalendarDemo />
+
     </div>
   )
 }

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

@@ -3,7 +3,6 @@ import Link from "next/link";
 
 export default function ConfirmedPage({ params }: { params: { name: string } }) {
 
-    console.log(params.name)
     return (
         <div className="h-[calc(100vh-112px)] flex justify-center items-center pb-10">
 

client/src/app/(patients)/clinic/[name]/page.tsx

@@ -4,7 +4,6 @@ import { Select } from "@/ui";
 import Image from "next/image";
 
 export default function ClinicPage({ params }: { params: { name: string } }) {
-    console.log(params.name)
     return (
         <div className="max-w-[1200px] mx-auto px-4">
 

client/src/app/(patients)/specialty/[name]/page.tsx

@@ -1,9 +1,12 @@
+import { getDoctorsBySpecialty } from "@/actions/doctors/doctorActions";
 import { DoctorCard } from "@/ui";
 
+export default async function SpecialtyPage({ params }: { params: { name: string } }) {
 
-export default function SpecialtyPage() {
+    const specialty = decodeURIComponent(params.name)
+
+    const doctors = await getDoctorsBySpecialty(specialty)
 
-    const images = ["/images/doctors/img1.jpg", "/images/doctors/img2.jpg", "/images/doctors/img3.jpg", "/images/doctors/img4.jpg", "/images/doctors/img5.jpg", "/images/doctors/img6.jpg", "/images/doctors/img7.jpg"]
 
     return (
         <div className="max-w-[1200px] mx-auto px-4">
@@ -12,8 +15,8 @@ export default function SpecialtyPage() {
 
                 <div className="my-8">
                     {
-                        images.map(item => (
-                            <DoctorCard key={item} name="Dra. Mónica Gonzalez" img={item} speciality="Traumatología" place="Clínica Colón" />
+                        doctors?.map(doctor => (
+                            <DoctorCard key={doctor.id} id={doctor.id} name={doctor.name} img={doctor.img} speciality={doctor.specialization} place="Clínica Colón" />
                         ))
                     }
                 </div>

client/src/app/layout.tsx

@@ -1,7 +1,6 @@
 import type { Metadata } from "next";
 import { Poppins } from 'next/font/google'
 import "./globals.css";
-import { Header } from "@/ui/patient/Header";
 
 const poppins = Poppins({
   style: 'normal',
@@ -25,7 +24,6 @@ export default function RootLayout({
         className={`${poppins.className} antialiased`}
       >
         <main>
-          <Header />
           {children}
         </main>
       </body>

client/src/app/page.tsx

@@ -3,10 +3,12 @@ import Image from "next/image";
 import Link from "next/link";
 import HomeImage from '/public/images/home.png'
 import { ButtonComponent } from "@/ui";
+import { Header } from "@/ui/patient/Header";
 
 export default function Home() {
   return (
     <div>
+      <Header />
       <div>
         <div className="relative w-full overflow-hidden">
           <div className="flex transition-transform ease-out duration-500">

client/src/components/CalendarDemo.tsx

@@ -13,7 +13,7 @@ export function CalendarDemo() {
     const [date, setDate] = useState<Date | undefined>(new Date())
     const [hour, setHour] = useState<string>("")
 
-    const formatYear = format(date ?? new Date(), "MM/dd/yyyy")
+    const formatYear = format(date ?? new Date(), 'yyyy-MM-dd')
     const formattedDate = format(formatYear, "EEEE d 'de' MMMM", { locale: es });
 
     const createHourItem = (hour: string) => (
@@ -30,12 +30,9 @@ export function CalendarDemo() {
 
     const filterHours = () => {
 
-        if (formatYear === "10/17/2024") {
+        if (formatYear === "2024-10-18") {
             return amHours.filter(item => !hourArray.includes(item.hour))
-        } else {
-            return amHours
-        }
-
+        } else { return amHours }
     }
 
     return (

client/src/components/alertDialog.tsx

@@ -35,7 +35,7 @@ export const AlertDialogCalendar = ({ openDialog, setOpenDialog, hour, formatted
                     </AlertDialogHeader>
                     <AlertDialogFooter>
                         <AlertDialogCancel>Cancel</AlertDialogCancel>
-                        <AlertDialogAction onClick={() => route.push("/calendar/confirmed/123")}>Continue</AlertDialogAction>
+                        <AlertDialogAction onClick={() => route.push("/appointment/confirmed/123")}>Continue</AlertDialogAction>
                     </AlertDialogFooter>
                 </AlertDialogContent>
             </AlertDialog>

client/src/components/search/SearchResults.tsx

@@ -47,7 +47,7 @@ export const SearchResults: React.FC<Props> = async ({ query, data }) => {
   }
 
   const results = getDoctorData(data)
-  console.log(results);
+  // 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()))

client/src/interfaces/doctors.ts

@@ -0,0 +1,11 @@
+export interface Doctors {
+    id: number;
+    name: string;
+    password: string;
+    email: string;
+    phone: string;
+    img: string;
+    active: boolean;
+    specialization: string;
+    licenseNumber: string;
+}

client/src/ui/auth/LoginForm.tsx

@@ -14,7 +14,6 @@ export function LoginForm() {
 
     const submit = handleSubmit(data => {
 
-        console.log(data)
         reset({
             email: "",
             password: "",

client/src/ui/auth/RegisterForm.tsx

@@ -14,7 +14,6 @@ export function RegisterForm() {
 
     const submit = handleSubmit(data => {
 
-        console.log(data)
         reset({
             email: "",
             password: "",

client/src/ui/cards/SpecialityCard.tsx

@@ -7,7 +7,7 @@ interface Props {
 }
 export function SpecialityCard({ name, img }: Props) {
   return (
-    <Link href={`/appointment?q=${name}`} className="flex flex-col border  rounded">
+    <Link href={`/specialty/${name}`} className="flex flex-col border  rounded">
       <>
         {img !== '' ? (
           <Image src={img} height={120} width={275} alt={name + "image"} />

client/src/ui/dashboard/TopMenu.tsx

@@ -14,8 +14,14 @@ export function TopMenu() {
                         <li >
                             <Link
                                 className="border-2 border-[#004784] rounded-full px-6 py-2 font-semibold"
-                                href={"/calendar"}>Mis turnos</Link>
+                                href={"/dashboard"}>Mis turnos</Link>
                         </li>
+                        <li >
+                            <Link
+                                className="border-2 border-[#004784] rounded-full px-6 py-2 font-semibold"
+                                href={"/appointment"}>Reservar turno</Link>
+                        </li>
+
                         {
                             icons.map((item, index) => (
                                 <li key={index}>