forked from RiseUP/riseup_squad_03
Replace hardcoded user with live profile data
This commit is contained in:
EdilbertoC
100
src/components/calendar/AgendaDailyView.jsx
Normal file
100
src/components/calendar/AgendaDailyView.jsx
Normal file
@@ -0,0 +1,100 @@
|
||||
import React from 'react'
|
||||
import { format, isToday } from 'date-fns'
|
||||
import { ptBR } from 'date-fns/locale'
|
||||
|
||||
import { sortAppointmentsByTime } from '../../utils/agendaDate.js'
|
||||
|
||||
export function AgendaDailyView({ baseDate, appointments, onAppointmentClick }) {
|
||||
const dailyAppointments = sortAppointmentsByTime(appointments)
|
||||
|
||||
return (
|
||||
<div className="rounded-2xl border border-[#404040] bg-[#262626] p-5">
|
||||
<div className="flex flex-col gap-3 border-b border-[#404040] pb-4 md:flex-row md:items-end md:justify-between">
|
||||
<div>
|
||||
<span className="text-xs font-semibold uppercase tracking-[0.16em] text-[#737373]">
|
||||
Vista ampliada do dia
|
||||
</span>
|
||||
<h3 className="mt-2 text-xl font-bold text-[#e5e5e5]">
|
||||
{format(baseDate, "EEEE, dd 'de' MMMM", { locale: ptBR })}
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<span className="rounded-full border border-[#404040] bg-[#1f1f1f] px-3 py-1 text-xs font-semibold text-[#a3a3a3]">
|
||||
{dailyAppointments.length} {dailyAppointments.length === 1 ? 'agendamento' : 'agendamentos'}
|
||||
</span>
|
||||
{isToday(baseDate) && (
|
||||
<span className="rounded-full border border-[#3b82f6]/30 bg-[#3b82f6]/10 px-3 py-1 text-xs font-semibold text-[#93c5fd]">
|
||||
Hoje
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{dailyAppointments.length === 0 ? (
|
||||
<div className="mt-4 rounded-xl border border-dashed border-[#404040] bg-[#1f1f1f] p-8 text-center">
|
||||
<h3 className="text-base font-bold text-[#e5e5e5]">Nenhum horário encontrado</h3>
|
||||
<p className="mt-2 text-sm leading-6 text-[#a3a3a3]">
|
||||
Ajuste o filtro ou altere o período no calendário.
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="mt-4 grid gap-3">
|
||||
{dailyAppointments.map((appointment) => (
|
||||
<article
|
||||
key={appointment.id}
|
||||
className={`grid gap-4 rounded-xl border p-4 md:grid-cols-[96px_1fr_auto] ${getStatusColors(appointment.status)}`}
|
||||
>
|
||||
<div>
|
||||
<p className="text-2xl font-bold leading-none">{appointment.time || '--:--'}</p>
|
||||
<p className="mt-2 text-[11px] font-semibold uppercase tracking-[0.14em] opacity-80">
|
||||
{appointment.mode}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<button
|
||||
className="text-left text-base font-bold transition hover:opacity-85"
|
||||
onClick={() => onAppointmentClick && onAppointmentClick(appointment)}
|
||||
type="button"
|
||||
>
|
||||
{appointment.patient}
|
||||
</button>
|
||||
<p className="mt-1 text-sm opacity-90">
|
||||
{appointment.type} com {appointment.professional}
|
||||
</p>
|
||||
<div className="mt-3 flex flex-wrap gap-2 text-xs font-medium opacity-80">
|
||||
<span className="rounded-full bg-black/15 px-2.5 py-1">{appointment.room}</span>
|
||||
<span className="rounded-full bg-black/15 px-2.5 py-1">{appointment.type}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start justify-start md:justify-end">
|
||||
<span className="rounded-full border border-current/20 bg-black/10 px-3 py-1 text-xs font-bold">
|
||||
{appointment.status}
|
||||
</span>
|
||||
</div>
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function getStatusColors(status) {
|
||||
switch (status) {
|
||||
case 'Confirmada':
|
||||
return 'border-[#14532d] bg-[#052e1a] text-[#a7f3d0]'
|
||||
case 'Em triagem':
|
||||
return 'border-[#78350f] bg-[#2d1e05] text-[#fde68a]'
|
||||
case 'Concluida':
|
||||
case 'Concluída':
|
||||
return 'border-[#1e3a8a] bg-[#172554] text-[#bfdbfe]'
|
||||
case 'Cancelada':
|
||||
return 'border-[#7f1d1d] bg-[#450a0a] text-[#fecaca]'
|
||||
case 'Aguardando':
|
||||
default:
|
||||
return 'border-[#404040] bg-[#1f1f1f] text-[#e5e5e5]'
|
||||
}
|
||||
}
|
||||
107
src/components/calendar/AgendaMonthlyView.jsx
Normal file
107
src/components/calendar/AgendaMonthlyView.jsx
Normal file
@@ -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]'
|
||||
}
|
||||
}
|
||||
122
src/components/calendar/AgendaWeeklyView.jsx
Normal file
122
src/components/calendar/AgendaWeeklyView.jsx
Normal file
@@ -0,0 +1,122 @@
|
||||
import React from 'react'
|
||||
import {
|
||||
startOfWeek,
|
||||
endOfWeek,
|
||||
eachDayOfInterval,
|
||||
format,
|
||||
isSameDay,
|
||||
isToday,
|
||||
} from 'date-fns'
|
||||
import { ptBR } from 'date-fns/locale'
|
||||
|
||||
import { parseLocalDate, sortAppointmentsByTime } from '../../utils/agendaDate.js'
|
||||
|
||||
export function AgendaWeeklyView({ baseDate, appointments, onAppointmentClick }) {
|
||||
const start = startOfWeek(baseDate, { weekStartsOn: 0 })
|
||||
const end = endOfWeek(baseDate, { weekStartsOn: 0 })
|
||||
const days = eachDayOfInterval({ start, end })
|
||||
|
||||
const weeklyAppointments = sortAppointmentsByTime(
|
||||
appointments.filter((appointment) => {
|
||||
if (!appointment.date) return false
|
||||
|
||||
const appointmentDate = parseLocalDate(appointment.date)
|
||||
return appointmentDate && appointmentDate >= start && appointmentDate <= end
|
||||
}),
|
||||
)
|
||||
|
||||
return (
|
||||
<div className="rounded-2xl border border-[#404040] bg-[#262626] p-5">
|
||||
<div className="grid grid-cols-7 gap-4 border-b border-[#404040] pb-4">
|
||||
{days.map((day) => {
|
||||
const isWeekend = day.getDay() === 0
|
||||
|
||||
return (
|
||||
<div key={day.toISOString()} className="text-center">
|
||||
<span
|
||||
className={`block text-xs font-semibold uppercase tracking-[0.16em] ${
|
||||
isWeekend ? 'text-[#93c5fd]' : 'text-[#a3a3a3]'
|
||||
}`}
|
||||
>
|
||||
{format(day, 'EEE', { locale: ptBR })}
|
||||
</span>
|
||||
<span className={`mt-1 block text-2xl font-bold ${isToday(day) ? 'text-[#3b82f6]' : 'text-[#e5e5e5]'}`}>
|
||||
{format(day, 'dd')}
|
||||
</span>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
|
||||
<div className="mt-4 grid min-h-[400px] grid-cols-7 gap-4">
|
||||
{days.map((day) => {
|
||||
const dayAppointments = weeklyAppointments.filter((appointment) => {
|
||||
if (!appointment.date) return false
|
||||
|
||||
const appointmentDate = parseLocalDate(appointment.date)
|
||||
return appointmentDate && isSameDay(appointmentDate, day)
|
||||
})
|
||||
|
||||
return (
|
||||
<div
|
||||
key={day.toISOString()}
|
||||
className="flex h-full flex-col gap-2 rounded-lg border border-[#404040]/50 bg-[#1f1f1f] p-2"
|
||||
>
|
||||
{dayAppointments.length === 0 ? (
|
||||
<div className="flex h-full items-center justify-center p-4">
|
||||
<span className="text-center text-xs text-[#737373]">Livre</span>
|
||||
</div>
|
||||
) : (
|
||||
dayAppointments.map((appointment) => (
|
||||
<button
|
||||
key={appointment.id}
|
||||
onClick={() => onAppointmentClick && onAppointmentClick(appointment)}
|
||||
className={`flex w-full flex-col items-start rounded-md border p-2 text-left shadow-sm transition hover:brightness-110 ${getStatusColors(appointment.status)}`}
|
||||
>
|
||||
<div className="mb-1 flex items-center gap-2">
|
||||
<span className="rounded bg-black/20 px-1.5 py-0.5 text-xs font-bold leading-none">
|
||||
{appointment.time}
|
||||
</span>
|
||||
<span className="truncate text-[10px] font-semibold uppercase tracking-wider opacity-80">
|
||||
{appointment.mode}
|
||||
</span>
|
||||
</div>
|
||||
<span className="w-full truncate text-xs font-bold leading-tight" title={appointment.patient}>
|
||||
{appointment.patient}
|
||||
</span>
|
||||
<span
|
||||
className="mt-0.5 w-full truncate text-[10px] font-medium opacity-80"
|
||||
title={appointment.professional}
|
||||
>
|
||||
Dr(a). {appointment.professional?.split(' ')[0]}
|
||||
</span>
|
||||
</button>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function getStatusColors(status) {
|
||||
switch (status) {
|
||||
case 'Confirmada':
|
||||
return 'border-[#14532d] bg-[#052e1a] text-[#10b981]'
|
||||
case 'Em triagem':
|
||||
return 'border-[#78350f] bg-[#2d1e05] text-[#f59e0b]'
|
||||
case 'Concluida':
|
||||
case 'Concluída':
|
||||
return 'border-[#1e3a8a] bg-[#172554] text-[#60a5fa]'
|
||||
case 'Aguardando':
|
||||
return 'border-[#404040] bg-[#303030] text-[#e5e5e5]'
|
||||
case 'Cancelada':
|
||||
return 'border-[#7f1d1d] bg-[#450a0a] text-[#f87171] opacity-75'
|
||||
case 'Bloqueado':
|
||||
return 'border-[#404040] bg-[#1f1f1f] text-[#737373]'
|
||||
default:
|
||||
return 'border-[#404040] bg-[#303030] text-[#e5e5e5]'
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user