diff --git a/susconecta/app/(main-routes)/calendar/page.tsx b/susconecta/app/(main-routes)/calendar/page.tsx index 292c8ad..4e427a2 100644 --- a/susconecta/app/(main-routes)/calendar/page.tsx +++ b/susconecta/app/(main-routes)/calendar/page.tsx @@ -144,6 +144,17 @@ export default function AgendamentoPage() { setThreeDEvents((prev) => prev.filter((e) => e.id !== id)); }; + // Tenta clicar no botão de filtro correspondente (procura por texto do botão) + const clickFilter = (label: string) => { + try { + const buttons = Array.from(document.querySelectorAll("button")); + const match = buttons.find((b) => b.textContent?.trim().toLowerCase().includes(label.toLowerCase())); + if (match) match.click(); + } catch { + // ignore + } + }; + return (
@@ -158,9 +169,17 @@ export default function AgendamentoPage() { Navegue através dos atalhos: Calendário (C), Fila de espera (F) ou 3D (3).

-
+
+ {/* Botões rápidos de filtros (acionam os triggers se existirem no DOM) */} +
+ + + +
+
-
+
{/* --- AQUI ESTÁ A SUBSTITUIÇÃO --- */} {activeTab === "calendar" ? ( diff --git a/susconecta/components/features/general/event-manager.tsx b/susconecta/components/features/general/event-manager.tsx index 1089eb9..a009277 100644 --- a/susconecta/components/features/general/event-manager.tsx +++ b/susconecta/components/features/general/event-manager.tsx @@ -16,16 +16,8 @@ import { DialogTitle, } from "@/components/ui/dialog" import { Badge } from "@/components/ui/badge" -import { ChevronLeft, ChevronRight, Plus, Calendar, Clock, Grid3x3, List, Search, Filter, X } from "lucide-react" +import { ChevronLeft, ChevronRight, Plus, Calendar, Clock, Grid3x3, List, Search, X } from "lucide-react" import { cn } from "@/lib/utils" -import { - DropdownMenu, - DropdownMenuContent, - DropdownMenuCheckboxItem, - DropdownMenuLabel, - DropdownMenuSeparator, - DropdownMenuTrigger, -} from "@/components/ui/dropdown-menu" export interface Event { id: string @@ -60,20 +52,16 @@ const defaultColors = [ { name: "Red", value: "red", bg: "bg-red-500", text: "text-red-700" }, ] -// Helper para padrão pt-BR (data e hora) -const formatDateTimeBR = (date?: Date) => - date ? new Intl.DateTimeFormat("pt-BR", { dateStyle: "short", timeStyle: "short" }).format(date) : "" - export function EventManager({ events: initialEvents = [], onEventCreate, onEventUpdate, onEventDelete, - categories: _categories = ["Meeting", "Task", "Reminder", "Personal"], + categories = ["Meeting", "Task", "Reminder", "Personal"], colors = defaultColors, defaultView = "month", className, - availableTags: _availableTags = ["Important", "Urgent", "Work", "Personal", "Team", "Client"], + availableTags = ["Important", "Urgent", "Work", "Personal", "Team", "Client"], }: EventManagerProps) { const [events, setEvents] = useState(initialEvents) const [currentDate, setCurrentDate] = useState(new Date()) @@ -86,13 +74,11 @@ export function EventManager({ title: "", description: "", color: colors[0].value, - category: _categories[0], + category: categories[0], tags: [], }) + const [searchQuery, setSearchQuery] = useState("") - const [selectedColors, setSelectedColors] = useState([]) - const [selectedTags, setSelectedTags] = useState([]) - const [selectedCategories, setSelectedCategories] = useState([]) // Dialog: lista completa de pacientes do dia const [dayDialogEvents, setDayDialogEvents] = useState(null) @@ -106,42 +92,22 @@ export function EventManager({ const filteredEvents = useMemo(() => { return events.filter((event) => { - // Search filter if (searchQuery) { const query = searchQuery.toLowerCase() const matchesSearch = event.title.toLowerCase().includes(query) || - event.description?.toLowerCase().includes(query) - + event.description?.toLowerCase().includes(query) || + event.category?.toLowerCase().includes(query) || + event.tags?.some((tag) => tag.toLowerCase().includes(query)) if (!matchesSearch) return false } - - // Color filter - if (selectedColors.length > 0 && !selectedColors.includes(event.color)) { - return false - } - - // Tag filter - if (selectedTags.length > 0) { - const hasMatchingTag = event.tags?.some((tag) => selectedTags.includes(tag)) - if (!hasMatchingTag) return false - } - - // Category filter - if (selectedCategories.length > 0 && event.category && !selectedCategories.includes(event.category)) { - return false - } - return true }) - }, [events, searchQuery, selectedColors, selectedTags, selectedCategories]) + }, [events, searchQuery]) - const hasActiveFilters = selectedColors.length > 0 || selectedTags.length > 0 || selectedCategories.length > 0 + const hasActiveFilters = false const clearFilters = () => { - setSelectedColors([]) - setSelectedTags([]) - setSelectedCategories([]) setSearchQuery("") } @@ -157,6 +123,7 @@ export function EventManager({ color: newEvent.color || colors[0].value, category: newEvent.category, attendees: newEvent.attendees, + tags: newEvent.tags || [], } setEvents((prev) => [...prev, event]) @@ -167,10 +134,10 @@ export function EventManager({ title: "", description: "", color: colors[0].value, - category: _categories[0], + category: categories[0], tags: [], }) - }, [newEvent, colors, _categories, onEventCreate]) + }, [newEvent, colors, categories, onEventCreate]) const handleUpdateEvent = useCallback(() => { if (!selectedEvent) return @@ -412,95 +379,9 @@ export function EventManager({ ) : null} - - {/* Filtro de Cores (único), logo abaixo do input */} -
- - - - - - Filtrar por Cor - - {colors.map((color) => ( - { - setSelectedColors((prev) => - checked ? [...prev, color.value] : prev.filter((c) => c !== color.value), - ) - }} - > -
-
- {color.name} -
- - ))} - - - {hasActiveFilters && ( - - )} -
- {hasActiveFilters && ( -
- Filtros ativos: - {selectedColors.map((colorValue) => { - const color = getColorClasses(colorValue) - return ( - -
- {color.name} - - - ) - })} - {selectedTags.map((tag) => ( - - {tag} - - - ))} - {selectedCategories.map((category) => ( - - {category} - - - ))} -
- )} - - {/* Calendar Views - Month */} + {/* Calendar Views - Pass filteredEvents instead of events */} {view === "month" && (
{dayDialogEvents?.map((ev) => ( -
+
{ + setSelectedEvent(ev) + setIsDialogOpen(true) + setIsDayDialogOpen(false) + }} + onKeyDown={(e) => { + if (e.key === "Enter" || e.key === " ") { + setSelectedEvent(ev) + setIsDialogOpen(true) + setIsDayDialogOpen(false) + } + }} + className="flex items-start gap-3 p-2 border-b last:border-b-0 rounded-md cursor-pointer hover:bg-accent/40 focus:outline-none focus:ring-2 focus:ring-primary/30" + >
{ev.title}
- {formatDateTimeBR(ev.startTime)} - {formatDateTimeBR(ev.endTime)} + {ev.startTime.toLocaleTimeString("pt-BR",{hour:"2-digit",minute:"2-digit"})} + {" - "} + {ev.endTime.toLocaleTimeString("pt-BR",{hour:"2-digit",minute:"2-digit"})}
{ev.description && (
{ev.description}
)} +
+ {ev.category && {ev.category}} + {ev.tags?.map((t) => ( + {t} + ))} +
))} @@ -548,9 +454,50 @@ export function EventManager({ + {view === "week" && ( + { + setSelectedEvent(event) + setIsDialogOpen(true) + }} + onDragStart={(event) => handleDragStart(event)} + onDragEnd={() => handleDragEnd()} + onDrop={handleDrop} + getColorClasses={getColorClasses} + /> + )} + + {view === "day" && ( + { + setSelectedEvent(event) + setIsDialogOpen(true) + }} + onDragStart={(event) => handleDragStart(event)} + onDragEnd={() => handleDragEnd()} + onDrop={handleDrop} + getColorClasses={getColorClasses} + /> + )} + + {view === "list" && ( + { + setSelectedEvent(event) + setIsDialogOpen(true) + }} + getColorClasses={getColorClasses} + /> + )} + {/* Event Dialog */} - + {isCreating ? "Criar Evento" : "Detalhes do Evento"} @@ -619,10 +566,6 @@ export function EventManager({ : setSelectedEvent((prev) => (prev ? { ...prev, startTime: date } : null)) }} /> - {/* Exibe também em pt-BR para usuários com SO/teclado em inglês */} -

- {formatDateTimeBR(isCreating ? newEvent.startTime : selectedEvent?.startTime)} -

@@ -650,38 +593,12 @@ export function EventManager({ : setSelectedEvent((prev) => (prev ? { ...prev, endTime: date } : null)) }} /> - {/* Exibe também em pt-BR para usuários com SO/teclado em inglês */} -

- {formatDateTimeBR(isCreating ? newEvent.endTime : selectedEvent?.endTime)} -

-
- - -
+ {/* Campos de Categoria/Cor removidos */} + + {/* Campo de Tags removido */}
@@ -729,8 +646,12 @@ function EventCard({ const [isHovered, setIsHovered] = useState(false) const colorClasses = getColorClasses(event.color) - const formatTime = (date: Date) => - date.toLocaleTimeString("pt-BR", { hour: "2-digit", minute: "2-digit" }) + const formatTime = (date: Date) => { + return date.toLocaleTimeString("en-US", { + hour: "2-digit", + minute: "2-digit", + }) + } const getDuration = () => { const diff = event.endTime.getTime() - event.startTime.getTime() @@ -779,6 +700,18 @@ function EventCard({ ({getDuration()})
+
+ {event.category && ( + + {event.category} + + )} + {event.tags?.map((tag) => ( + + {tag} + + ))} +
@@ -809,6 +742,20 @@ function EventCard({ {formatTime(event.startTime)} - {formatTime(event.endTime)} + {isHovered && ( +
+ {event.category && ( + + {event.category} + + )} + {event.tags?.map((tag) => ( + + {tag} + + ))} +
+ )} ) } @@ -850,6 +797,18 @@ function EventCard({ ({getDuration()}) +
+ {event.category && ( + + {event.category} + + )} + {event.tags?.map((tag) => ( + + {tag} + + ))} +
@@ -1165,11 +1124,13 @@ function ListView({ month: "long", day: "numeric", }) - if (!acc[dateKey]) acc[dateKey] = [] + if (!acc[dateKey]) { + acc[dateKey] = [] + } acc[dateKey].push(event) return acc }, - {} as Record + {} as Record, ) return ( @@ -1201,12 +1162,28 @@ function ListView({

)} +
+ {event.category && ( + + {event.category} + + )} +
{event.startTime.toLocaleTimeString("pt-BR", { hour: "2-digit", minute: "2-digit" })} - {event.endTime.toLocaleTimeString("pt-BR", { hour: "2-digit", minute: "2-digit" })}
+ {event.tags && event.tags.length > 0 && ( +
+ {event.tags.map((tag) => ( + + {tag} + + ))} +
+ )}