Replace hardcoded user with live profile data

2026-04-28 12:46:39 -03:00
parent d496494b3e
commit 000abb39ac
15 changed files with 993 additions and 358 deletions
--- a/src/components/calendar/AgendaMonthlyView.jsx
+++ b/src/components/calendar/AgendaMonthlyView.jsx
@@ -0,0 +1,107 @@
+import React from 'react'
+import {
+  startOfMonth,
+  endOfMonth,
+  startOfWeek,
+  endOfWeek,
+  eachDayOfInterval,
+  format,
+  isSameMonth,
+  isSameDay,
+  isToday,
+} from 'date-fns'
+
+import { parseLocalDate, sortAppointmentsByTime } from '../../utils/agendaDate.js'
+
+export function AgendaMonthlyView({ baseDate, appointments, onDayClick }) {
+  const monthStart = startOfMonth(baseDate)
+  const monthEnd = endOfMonth(monthStart)
+  const startDate = startOfWeek(monthStart, { weekStartsOn: 0 })
+  const endDate = endOfWeek(monthEnd, { weekStartsOn: 0 })
+
+  const days = eachDayOfInterval({ start: startDate, end: endDate })
+  const weekDays = ['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sáb']
+
+  return (
+    <div className="rounded-2xl border border-[#404040] bg-[#262626] p-5">
+      <div className="grid grid-cols-7 gap-px border-b border-[#404040] pb-4">
+        {weekDays.map((day) => (
+          <div key={day} className="text-center text-xs font-semibold uppercase tracking-widest text-[#a3a3a3]">
+            {day}
+          </div>
+        ))}
+      </div>
+
+      <div className="mt-4 grid grid-cols-7 gap-2">
+        {days.map((day) => {
+          const isCurrentMonth = isSameMonth(day, monthStart)
+
+          const dayAppointments = sortAppointmentsByTime(
+            appointments.filter((appointment) => {
+              if (!appointment.date) return false
+
+              const appointmentDate = parseLocalDate(appointment.date)
+              return appointmentDate && isSameDay(appointmentDate, day)
+            }),
+          )
+
+          return (
+            <button
+              key={day.toISOString()}
+              onClick={() => onDayClick && onDayClick(day)}
+              className={`flex min-h-[100px] flex-col rounded-xl border p-2 text-left transition hover:border-[#525252] ${
+                isCurrentMonth
+                  ? 'border-[#404040] bg-[#1f1f1f]'
+                  : 'border-transparent bg-transparent opacity-40 hover:opacity-80'
+              }`}
+            >
+              <span
+                className={`text-sm font-bold ${
+                  isToday(day)
+                    ? 'flex h-6 w-6 items-center justify-center rounded-full bg-[#3b82f6] text-white'
+                    : 'text-[#e5e5e5]'
+                }`}
+              >
+                {format(day, 'd')}
+              </span>
+
+              <div className="mt-2 flex w-full flex-col gap-1">
+                {dayAppointments.slice(0, 3).map((appointment) => (
+                  <div
+                    key={appointment.id}
+                    className="flex items-center gap-1.5 truncate rounded bg-[#303030] px-1.5 py-1 text-[10px] font-semibold text-[#a3a3a3]"
+                  >
+                    <span className={`h-1.5 w-1.5 shrink-0 rounded-full ${getDotColor(appointment.status)}`} />
+                    <span className="truncate">
+                      {appointment.time} - {appointment.patient}
+                    </span>
+                  </div>
+                ))}
+                {dayAppointments.length > 3 && (
+                  <span className="text-[10px] font-semibold text-[#3b82f6]">
+                    + {dayAppointments.length - 3} mais
+                  </span>
+                )}
+              </div>
+            </button>
+          )
+        })}
+      </div>
+    </div>
+  )
+}
+
+function getDotColor(status) {
+  switch (status) {
+    case 'Confirmada':
+      return 'bg-[#10b981]'
+    case 'Em triagem':
+      return 'bg-[#f59e0b]'
+    case 'Aguardando':
+      return 'bg-[#a3a3a3]'
+    case 'Bloqueado':
+      return 'bg-[#737373]'
+    default:
+      return 'bg-[#3b82f6]'
+  }
+}