From 334adb5ba1c86cad503b969c0807c02e66fd7a22 Mon Sep 17 00:00:00 2001 From: Jonas Francisco Date: Wed, 5 Nov 2025 23:58:53 -0300 Subject: [PATCH] ajuste visual calendario --- .../app/(main-routes)/calendar/page.tsx | 15 + .../features/general/event-manager.tsx | 444 ++---------------- 2 files changed, 65 insertions(+), 394 deletions(-) diff --git a/susconecta/app/(main-routes)/calendar/page.tsx b/susconecta/app/(main-routes)/calendar/page.tsx index 8d261c9..292c8ad 100644 --- a/susconecta/app/(main-routes)/calendar/page.tsx +++ b/susconecta/app/(main-routes)/calendar/page.tsx @@ -17,6 +17,21 @@ export default function AgendamentoPage() { const [activeTab, setActiveTab] = useState<"calendar" | "3d">("calendar"); const [threeDEvents, setThreeDEvents] = useState([]); + // Padroniza idioma da página para pt-BR (afeta componentes que usam o lang do documento) + useEffect(() => { + try { + // Atributos no + document.documentElement.lang = "pt-BR"; + document.documentElement.setAttribute("xml:lang", "pt-BR"); + document.documentElement.setAttribute("data-lang", "pt-BR"); + // Cookie de locale (usado por apps com i18n) + const oneYear = 60 * 60 * 24 * 365; + document.cookie = `NEXT_LOCALE=pt-BR; Path=/; Max-Age=${oneYear}; SameSite=Lax`; + } catch { + // ignore + } + }, []); + // --- NOVO ESTADO --- // Estado para alimentar o NOVO EventManager com dados da API const [managerEvents, setManagerEvents] = useState([]); diff --git a/susconecta/components/features/general/event-manager.tsx b/susconecta/components/features/general/event-manager.tsx index e493641..1089eb9 100644 --- a/susconecta/components/features/general/event-manager.tsx +++ b/susconecta/components/features/general/event-manager.tsx @@ -60,16 +60,20 @@ 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 = ["Meeting", "Task", "Reminder", "Personal"], + categories: _categories = ["Meeting", "Task", "Reminder", "Personal"], colors = defaultColors, defaultView = "month", className, - availableTags = ["Important", "Urgent", "Work", "Personal", "Team", "Client"], + availableTags: _availableTags = ["Important", "Urgent", "Work", "Personal", "Team", "Client"], }: EventManagerProps) { const [events, setEvents] = useState(initialEvents) const [currentDate, setCurrentDate] = useState(new Date()) @@ -82,10 +86,9 @@ 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([]) @@ -108,9 +111,7 @@ export function EventManager({ const query = searchQuery.toLowerCase() const matchesSearch = event.title.toLowerCase().includes(query) || - event.description?.toLowerCase().includes(query) || - event.category?.toLowerCase().includes(query) || - event.tags?.some((tag) => tag.toLowerCase().includes(query)) + event.description?.toLowerCase().includes(query) if (!matchesSearch) return false } @@ -156,7 +157,6 @@ export function EventManager({ color: newEvent.color || colors[0].value, category: newEvent.category, attendees: newEvent.attendees, - tags: newEvent.tags || [], } setEvents((prev) => [...prev, event]) @@ -167,10 +167,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 @@ -248,24 +248,6 @@ export function EventManager({ [colors], ) - const toggleTag = (tag: string, isCreating: boolean) => { - if (isCreating) { - setNewEvent((prev) => ({ - ...prev, - tags: prev.tags?.includes(tag) ? prev.tags.filter((t) => t !== tag) : [...(prev.tags || []), tag], - })) - } else { - setSelectedEvent((prev) => - prev - ? { - ...prev, - tags: prev.tags?.includes(tag) ? prev.tags.filter((t) => t !== tag) : [...(prev.tags || []), tag], - } - : null, - ) - } - } - return (
{/* Header */} @@ -295,9 +277,6 @@ export function EventManager({ - @@ -434,123 +413,8 @@ export function EventManager({
- {/* Mobile: Horizontal scroll with full-length buttons */} -
-
- {/* Color Filter */} - - - - - - Filtrar por Cor - - {colors.map((color) => ( - { - setSelectedColors((prev) => - checked ? [...prev, color.value] : prev.filter((c) => c !== color.value), - ) - }} - > -
-
- {color.name} -
- - ))} - - - - {/* Tag Filter */} - - - - - - Filtrar por Tag - - {availableTags.map((tag) => ( - { - setSelectedTags((prev) => (checked ? [...prev, tag] : prev.filter((t) => t !== tag))) - }} - > - {tag} - - ))} - - - - {/* Category Filter */} - - - - - - Filtrar por Categoria - - {categories.map((category) => ( - { - setSelectedCategories((prev) => - checked ? [...prev, category] : prev.filter((c) => c !== category), - ) - }} - > - {category} - - ))} - - - - {hasActiveFilters && ( - - )} -
-
- - {/* Desktop: Original layout */} -
- {/* Color Filter */} + {/* Filtro de Cores (único), logo abaixo do input */} +
- + Filtrar por Cor {colors.map((color) => ( @@ -584,69 +448,6 @@ export function EventManager({ ))} - - {/* Tag Filter */} - - - - - - Filtrar por Tag - - {availableTags.map((tag) => ( - { - setSelectedTags((prev) => (checked ? [...prev, tag] : prev.filter((t) => t !== tag))) - }} - > - {tag} - - ))} - - - - {/* Category Filter */} - - - - - - Filtrar por Categoria - - {categories.map((category) => ( - { - setSelectedCategories((prev) => - checked ? [...prev, category] : prev.filter((c) => c !== category), - ) - }} - > - {category} - - ))} - - - {hasActiveFilters && (
)} - {/* Calendar Views - Pass filteredEvents instead of events */} + {/* Calendar Views - Month */} {view === "month" && (
{ev.title}
- {ev.startTime.toLocaleTimeString("pt-BR",{hour:"2-digit",minute:"2-digit"})} - {" - "} - {ev.endTime.toLocaleTimeString("pt-BR",{hour:"2-digit",minute:"2-digit"})} + {formatDateTimeBR(ev.startTime)} - {formatDateTimeBR(ev.endTime)}
{ev.description && (
{ev.description}
)} -
- {ev.category && {ev.category}} - {ev.tags?.map((t) => ( - {t} - ))} -
))} @@ -755,47 +548,6 @@ 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 */} @@ -867,6 +619,10 @@ 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)} +

@@ -894,77 +650,37 @@ 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)} +

- -
- {availableTags.map((tag) => { - const isSelected = isCreating ? newEvent.tags?.includes(tag) : selectedEvent?.tags?.includes(tag) - return ( - toggleTag(tag, isCreating)} - > - {tag} - - ) - })} -
+ +
@@ -1013,12 +729,8 @@ function EventCard({ const [isHovered, setIsHovered] = useState(false) const colorClasses = getColorClasses(event.color) - const formatTime = (date: Date) => { - return date.toLocaleTimeString("en-US", { - hour: "2-digit", - minute: "2-digit", - }) - } + const formatTime = (date: Date) => + date.toLocaleTimeString("pt-BR", { hour: "2-digit", minute: "2-digit" }) const getDuration = () => { const diff = event.endTime.getTime() - event.startTime.getTime() @@ -1067,18 +779,6 @@ function EventCard({ ({getDuration()}) -
- {event.category && ( - - {event.category} - - )} - {event.tags?.map((tag) => ( - - {tag} - - ))} -
@@ -1109,20 +809,6 @@ function EventCard({ {formatTime(event.startTime)} - {formatTime(event.endTime)} - {isHovered && ( -
- {event.category && ( - - {event.category} - - )} - {event.tags?.map((tag) => ( - - {tag} - - ))} -
- )} ) } @@ -1164,18 +850,6 @@ function EventCard({ ({getDuration()}) -
- {event.category && ( - - {event.category} - - )} - {event.tags?.map((tag) => ( - - {tag} - - ))} -
@@ -1491,13 +1165,11 @@ 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 ( @@ -1529,28 +1201,12 @@ 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} - - ))} -
- )}