Vision Refactor
This commit is contained in:
parent
8c51fae1a7
commit
2e5dc2e9f7
@ -50,7 +50,6 @@ export default function VisionPage() {
|
||||
} | null>(null);
|
||||
const [jitsiUrl, setJitsiUrl] = useState<string | null>(null);
|
||||
const [scheduledMeetings, setScheduledMeetings] = useState<ScheduledMeeting[]>([]);
|
||||
const [showCalendar, setShowCalendar] = useState(false);
|
||||
const [showMeetingDialog, setShowMeetingDialog] = useState(false);
|
||||
const [selectedDate, setSelectedDate] = useState<Date | undefined>(new Date());
|
||||
const [meetingForm, setMeetingForm] = useState<{
|
||||
@ -371,90 +370,81 @@ export default function VisionPage() {
|
||||
{/* Calendar Section */}
|
||||
<div className="mb-8">
|
||||
<div className="bg-white rounded-lg border border-gray-200 p-4">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<Calendar className="h-5 w-5 text-purple-600" />
|
||||
<h2 className="text-xl font-semibold text-gray-900">
|
||||
Calendrier des réunions
|
||||
</h2>
|
||||
</div>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => setShowCalendar(!showCalendar)}
|
||||
className="flex items-center gap-2"
|
||||
>
|
||||
{showCalendar ? "Masquer" : "Afficher"} le calendrier
|
||||
</Button>
|
||||
<div className="flex items-center gap-2 mb-4">
|
||||
<Calendar className="h-5 w-5 text-purple-600" />
|
||||
<h2 className="text-xl font-semibold text-gray-900">
|
||||
Calendrier des réunions
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
{showCalendar && (
|
||||
<div className="flex flex-col lg:flex-row gap-6">
|
||||
<div className="flex-1">
|
||||
<CalendarComponent
|
||||
mode="single"
|
||||
selected={selectedDate}
|
||||
onSelect={setSelectedDate}
|
||||
className="rounded-md border"
|
||||
modifiers={{
|
||||
hasMeeting: (date) => {
|
||||
if (!date) return false;
|
||||
return getMeetingsForDate(date).length > 0;
|
||||
},
|
||||
}}
|
||||
modifiersClassNames={{
|
||||
hasMeeting: "bg-blue-100 text-blue-900 font-semibold",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
{selectedDate && (
|
||||
<div>
|
||||
<h3 className="font-semibold text-gray-900 mb-3">
|
||||
Réunions du {selectedDate.toLocaleDateString('fr-FR', { weekday: 'long', day: 'numeric', month: 'long' })}
|
||||
</h3>
|
||||
{getMeetingsForDate(selectedDate).length === 0 ? (
|
||||
<p className="text-gray-500 text-sm">Aucune réunion planifiée</p>
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
{getMeetingsForDate(selectedDate).map((meeting) => (
|
||||
<div
|
||||
key={meeting.id}
|
||||
className="bg-gray-50 rounded-lg border border-gray-200 p-3 flex items-center justify-between"
|
||||
>
|
||||
<div>
|
||||
<h4 className="font-medium text-gray-900">
|
||||
{meeting.title || `${meeting.type === "group" ? "Groupe" : "Mission"}: ${meeting.entityName}`}
|
||||
</h4>
|
||||
<p className="text-sm text-gray-500">{meeting.time}</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
onClick={() => handleConferenceClick(meeting.type, meeting.entityId, meeting.entityName)}
|
||||
>
|
||||
<Video className="h-4 w-4 mr-1" />
|
||||
Rejoindre
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => handleDeleteMeeting(meeting.id)}
|
||||
className="text-red-600 hover:text-red-700"
|
||||
>
|
||||
<X className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex flex-col lg:flex-row gap-6">
|
||||
<div className="flex-1">
|
||||
<CalendarComponent
|
||||
mode="single"
|
||||
selected={selectedDate}
|
||||
onSelect={setSelectedDate}
|
||||
className="rounded-md border"
|
||||
classNames={{
|
||||
day: "h-9 w-9 p-0 font-normal border border-gray-200 bg-white aria-selected:bg-blue-600 aria-selected:text-white",
|
||||
}}
|
||||
modifiers={{
|
||||
hasMeeting: (date) => {
|
||||
if (!date) return false;
|
||||
return getMeetingsForDate(date).length > 0;
|
||||
},
|
||||
}}
|
||||
modifiersClassNames={{
|
||||
hasMeeting: "bg-blue-100 text-blue-900 font-semibold",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
<div className="flex-1">
|
||||
{selectedDate && (
|
||||
<div>
|
||||
<h3 className="font-semibold text-gray-900 mb-3">
|
||||
Réunions du {selectedDate.toLocaleDateString('fr-FR', { weekday: 'long', day: 'numeric', month: 'long' })}
|
||||
</h3>
|
||||
{getMeetingsForDate(selectedDate).length === 0 ? (
|
||||
<p className="text-gray-500 text-sm">Aucune réunion planifiée</p>
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
{getMeetingsForDate(selectedDate).map((meeting) => (
|
||||
<div
|
||||
key={meeting.id}
|
||||
className="bg-gray-50 rounded-lg border border-gray-200 p-3 flex items-center justify-between"
|
||||
>
|
||||
<div>
|
||||
<h4 className="font-medium text-gray-900">
|
||||
{meeting.title || `${meeting.type === "group" ? "Groupe" : "Mission"}: ${meeting.entityName}`}
|
||||
</h4>
|
||||
<p className="text-sm text-gray-500">{meeting.time}</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
onClick={() => handleConferenceClick(meeting.type, meeting.entityId, meeting.entityName)}
|
||||
>
|
||||
<Video className="h-4 w-4 mr-1" />
|
||||
Rejoindre
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => handleDeleteMeeting(meeting.id)}
|
||||
className="text-red-600 hover:text-red-700"
|
||||
>
|
||||
<X className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -622,7 +612,7 @@ export default function VisionPage() {
|
||||
value={meetingForm.title}
|
||||
onChange={(e) => setMeetingForm({ ...meetingForm, title: e.target.value })}
|
||||
placeholder={`Réunion ${meetingForm.type === "group" ? "du groupe" : "de la mission"}`}
|
||||
className="mt-1"
|
||||
className="mt-1 bg-black text-white border-gray-700 placeholder-gray-400"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
@ -632,7 +622,7 @@ export default function VisionPage() {
|
||||
type="date"
|
||||
value={meetingForm.date}
|
||||
onChange={(e) => setMeetingForm({ ...meetingForm, date: e.target.value })}
|
||||
className="mt-1"
|
||||
className="mt-1 bg-black text-white border-gray-700"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
@ -643,7 +633,7 @@ export default function VisionPage() {
|
||||
type="time"
|
||||
value={meetingForm.time}
|
||||
onChange={(e) => setMeetingForm({ ...meetingForm, time: e.target.value })}
|
||||
className="mt-1"
|
||||
className="mt-1 bg-black text-white border-gray-700"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
@ -655,7 +645,6 @@ export default function VisionPage() {
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => {
|
||||
setShowMeetingDialog(false);
|
||||
setMeetingForm({
|
||||
@ -667,6 +656,7 @@ export default function VisionPage() {
|
||||
title: "",
|
||||
});
|
||||
}}
|
||||
className="bg-black text-white hover:bg-gray-900 border border-black"
|
||||
>
|
||||
Annuler
|
||||
</Button>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user