vision refactor
This commit is contained in:
parent
d9ce6869a8
commit
e634e900a4
@ -7,7 +7,7 @@ import { ResponsiveIframe } from "@/app/components/responsive-iframe";
|
|||||||
import { Users, FolderKanban, Video, ArrowLeft, Loader2, Calendar, Clock, Plus, X } from "lucide-react";
|
import { Users, FolderKanban, Video, ArrowLeft, Loader2, Calendar, Clock, Plus, X } from "lucide-react";
|
||||||
import { Button } from "@/components/ui/button";
|
import { Button } from "@/components/ui/button";
|
||||||
import { useToast } from "@/components/ui/use-toast";
|
import { useToast } from "@/components/ui/use-toast";
|
||||||
import { CalendarClient } from "@/components/calendar/calendar-client";
|
import { Calendar as CalendarComponent } from "@/components/ui/calendar";
|
||||||
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog";
|
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog";
|
||||||
import { Input } from "@/components/ui/input";
|
import { Input } from "@/components/ui/input";
|
||||||
import { Label } from "@/components/ui/label";
|
import { Label } from "@/components/ui/label";
|
||||||
@ -52,8 +52,6 @@ export default function VisionPage() {
|
|||||||
const [scheduledMeetings, setScheduledMeetings] = useState<ScheduledMeeting[]>([]);
|
const [scheduledMeetings, setScheduledMeetings] = useState<ScheduledMeeting[]>([]);
|
||||||
const [showMeetingDialog, setShowMeetingDialog] = useState(false);
|
const [showMeetingDialog, setShowMeetingDialog] = useState(false);
|
||||||
const [selectedDate, setSelectedDate] = useState<Date | undefined>(new Date());
|
const [selectedDate, setSelectedDate] = useState<Date | undefined>(new Date());
|
||||||
const [calendars, setCalendars] = useState<any[]>([]);
|
|
||||||
const [calendarsLoading, setCalendarsLoading] = useState(true);
|
|
||||||
const [meetingForm, setMeetingForm] = useState<{
|
const [meetingForm, setMeetingForm] = useState<{
|
||||||
type: "group" | "mission" | "";
|
type: "group" | "mission" | "";
|
||||||
entityId: string;
|
entityId: string;
|
||||||
@ -98,32 +96,6 @@ export default function VisionPage() {
|
|||||||
}
|
}
|
||||||
}, [scheduledMeetings, session, status]);
|
}, [scheduledMeetings, session, status]);
|
||||||
|
|
||||||
// Fetch calendars
|
|
||||||
useEffect(() => {
|
|
||||||
const fetchCalendars = async () => {
|
|
||||||
if (status !== "authenticated" || !session?.user?.id) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
try {
|
|
||||||
setCalendarsLoading(true);
|
|
||||||
const response = await fetch("/api/calendars");
|
|
||||||
if (response.ok) {
|
|
||||||
const calendarsData = await response.json();
|
|
||||||
setCalendars(Array.isArray(calendarsData) ? calendarsData : []);
|
|
||||||
} else {
|
|
||||||
console.error("Failed to fetch calendars");
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
console.error("Error fetching calendars:", error);
|
|
||||||
} finally {
|
|
||||||
setCalendarsLoading(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
fetchCalendars();
|
|
||||||
}, [session, status]);
|
|
||||||
|
|
||||||
// Fetch user groups and missions
|
// Fetch user groups and missions
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const fetchData = async () => {
|
const fetchData = async () => {
|
||||||
@ -406,75 +378,86 @@ export default function VisionPage() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="flex flex-col lg:flex-row gap-6">
|
<div className="flex flex-col lg:flex-row gap-6">
|
||||||
{/* Colonne calendrier (étroite) - CalendarClient avec dimensions réduites */}
|
{/* Colonne calendrier (étroite) */}
|
||||||
<div id="vision-calendar" className="w-full lg:w-80 lg:flex-shrink-0">
|
<div id="vision-calendar" className="w-full lg:w-80 lg:flex-shrink-0">
|
||||||
{calendarsLoading ? (
|
<style dangerouslySetInnerHTML={{__html: `
|
||||||
<div className="flex items-center justify-center h-64">
|
#vision-calendar .rdp-caption_label {
|
||||||
<Loader2 className="h-6 w-6 animate-spin text-purple-600" />
|
color: #111827 !important;
|
||||||
</div>
|
font-weight: 600 !important;
|
||||||
) : session?.user?.id ? (
|
font-size: 0.875rem !important;
|
||||||
<div className="vision-calendar-wrapper" style={{ height: 'auto', maxHeight: '600px' }}>
|
}
|
||||||
<style dangerouslySetInnerHTML={{__html: `
|
#vision-calendar .rdp-nav_button {
|
||||||
.vision-calendar-wrapper .fc {
|
color: #374151 !important;
|
||||||
font-size: 0.75rem !important;
|
background-color: white !important;
|
||||||
}
|
}
|
||||||
.vision-calendar-wrapper .fc-toolbar {
|
#vision-calendar .rdp-nav_button:hover {
|
||||||
padding: 0.5rem !important;
|
color: #111827 !important;
|
||||||
margin-bottom: 0.5rem !important;
|
}
|
||||||
}
|
#vision-calendar .rdp-nav_button svg,
|
||||||
.vision-calendar-wrapper .fc-toolbar-title {
|
#vision-calendar .rdp-nav_button path {
|
||||||
font-size: 0.875rem !important;
|
color: #374151 !important;
|
||||||
font-weight: 600 !important;
|
stroke: #374151 !important;
|
||||||
}
|
fill: #374151 !important;
|
||||||
.vision-calendar-wrapper .fc-button {
|
}
|
||||||
padding: 0.25rem 0.5rem !important;
|
#vision-calendar .rdp-nav_button:hover svg,
|
||||||
font-size: 0.75rem !important;
|
#vision-calendar .rdp-nav_button:hover path {
|
||||||
height: auto !important;
|
color: #111827 !important;
|
||||||
}
|
stroke: #111827 !important;
|
||||||
.vision-calendar-wrapper .fc-daygrid-day {
|
fill: #111827 !important;
|
||||||
min-height: 3rem !important;
|
}
|
||||||
}
|
#vision-calendar .rdp-day {
|
||||||
.vision-calendar-wrapper .fc-daygrid-day-number {
|
color: #1f2937 !important;
|
||||||
padding: 0.25rem !important;
|
background-color: white !important;
|
||||||
font-size: 0.75rem !important;
|
width: 2.5rem !important;
|
||||||
}
|
height: 2.5rem !important;
|
||||||
.vision-calendar-wrapper .fc-daygrid-event {
|
font-size: 0.875rem !important;
|
||||||
font-size: 0.65rem !important;
|
}
|
||||||
padding: 0.125rem 0.25rem !important;
|
#vision-calendar .rdp-day_today {
|
||||||
margin: 0.125rem !important;
|
background-color: #DBEAFE !important;
|
||||||
}
|
color: #1d4ed8 !important;
|
||||||
.vision-calendar-wrapper .fc-col-header-cell {
|
border: 2px solid #3b82f6 !important;
|
||||||
padding: 0.25rem !important;
|
font-weight: 600 !important;
|
||||||
font-size: 0.7rem !important;
|
}
|
||||||
}
|
#vision-calendar .rdp-day_selected {
|
||||||
.vision-calendar-wrapper .fc-scrollgrid {
|
background-color: #2563eb !important;
|
||||||
border-width: 1px !important;
|
color: white !important;
|
||||||
}
|
}
|
||||||
.vision-calendar-wrapper .fc-daygrid-day-frame {
|
#vision-calendar .rdp-day_outside {
|
||||||
min-height: 3rem !important;
|
color: #9ca3af !important;
|
||||||
}
|
background-color: white !important;
|
||||||
/* Masquer les éléments non nécessaires pour Vision */
|
}
|
||||||
.vision-calendar-wrapper .calendar-selector,
|
#vision-calendar .rdp-day.hasMeeting {
|
||||||
.vision-calendar-wrapper .calendar-stats,
|
background-color: #2563eb !important;
|
||||||
.vision-calendar-wrapper .calendar-view-switcher {
|
color: white !important;
|
||||||
display: none !important;
|
font-weight: 600 !important;
|
||||||
}
|
}
|
||||||
/* Réduire la taille de la colonne des événements du jour si elle existe */
|
#vision-calendar .rdp-day.hasMeeting:hover {
|
||||||
.vision-calendar-wrapper .w-80.flex-shrink-0 {
|
background-color: #1d4ed8 !important;
|
||||||
display: none !important;
|
color: white !important;
|
||||||
}
|
}
|
||||||
`}} />
|
#vision-calendar .rdp-day:not(.rdp-day_disabled):hover {
|
||||||
<CalendarClient
|
background-color: #f3f4f6 !important;
|
||||||
initialCalendars={calendars}
|
}
|
||||||
userId={session.user.id}
|
#vision-calendar .rdp-day.hasMeeting:not(.rdp-day_disabled):hover {
|
||||||
userProfile={{
|
background-color: #1d4ed8 !important;
|
||||||
name: session.user.name || '',
|
color: white !important;
|
||||||
email: session.user.email || '',
|
}
|
||||||
avatar: session.user.image || undefined
|
`}} />
|
||||||
}}
|
<CalendarComponent
|
||||||
/>
|
mode="single"
|
||||||
</div>
|
selected={selectedDate}
|
||||||
) : null}
|
onSelect={setSelectedDate}
|
||||||
|
className="rounded-md border"
|
||||||
|
modifiers={{
|
||||||
|
hasMeeting: (date) => {
|
||||||
|
if (!date) return false;
|
||||||
|
return getMeetingsForDate(date).length > 0;
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
modifiersClassNames={{
|
||||||
|
hasMeeting: "hasMeeting",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
{/* Colonne invisible pour espacer calendrier et liste des réunions */}
|
{/* Colonne invisible pour espacer calendrier et liste des réunions */}
|
||||||
<div className="hidden lg:block w-8" />
|
<div className="hidden lg:block w-8" />
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user