arthur/xtablo-source
1
0
Fork 0
Code Issues Pull requests 1 Projects Releases Packages Wiki Activity Actions 5

Polish events view: upcoming filter, purple button, tablo icon

Browse source 
- Only show upcoming events (today and future) by default
- Change "Créer un événement" button to #804EEC purple
- Replace MapPin icon with the tablo's colored initial avatar to show which project the event belongs to

Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Arthur Belleville 2026-02-21 21:09:54 +01:00
parent 8df335384d
commit 7e64fbbaa3
No known key found for this signature in database
1 changed files with 16 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
apps/main/src/pages/planning.tsx
View file

@ -11,7 +11,7 @@ import {
SelectValue,
} from "@xtablo/ui/components/select";
import { TypographyH3, TypographyH4 } from "@xtablo/ui/components/typography";
import { ClockIcon, Download, EllipsisVerticalIcon, FolderInputIcon, MapPinIcon, PlusIcon, RefreshCcw, SlidersHorizontalIcon } from "lucide-react";
import { ClockIcon, Download, EllipsisVerticalIcon, FolderInputIcon, PlusIcon, RefreshCcw, SlidersHorizontalIcon } from "lucide-react";
import { useCallback, useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import { Outlet, useNavigate, useParams, useSearchParams } from "react-router-dom";
@ -793,13 +793,16 @@ export const PlanningPage = () => {
// ── Events card view ──────────────────────────────────────────────────────
const renderEventsView = () => {
const today = new Date();
today.setHours(0, 0, 0, 0);
const q = eventsSearchQuery.toLowerCase();
const filtered = tabloEvents.filter(
(e) =>
!q ||
e.title?.toLowerCase().includes(q) ||
e.description?.toLowerCase().includes(q)
);
const filtered = tabloEvents.filter((e) => {
const eventDate = e.start_date ? new Date(e.start_date + "T00:00:00") : null;
const isUpcoming = !eventDate || eventDate >= today;
const matchesSearch =
!q || e.title?.toLowerCase().includes(q) || e.description?.toLowerCase().includes(q);
return isUpcoming && matchesSearch;
});
const months = ["JAN", "FÉV", "MAR", "AVR", "MAI", "JUN", "JUL", "AOÛ", "SEP", "OCT", "NOV", "DÉC"];
@ -817,7 +820,7 @@ export const PlanningPage = () => {
navigate(`/planning/create?date=${currentDate.toISOString()}${selectedTabloId !== "all" ? `&tablo_id=${selectedTabloId}` : ""}`);
}}
disabled={isReadOnly}
className="flex items-center gap-2 px-5 py-3 bg-primary text-white rounded-xl hover:bg-primary/90 transition-colors font-medium shadow-sm disabled:opacity-50"
className="flex items-center gap-2 px-5 py-3 bg-[#804EEC] hover:bg-[#6f3fd4] text-white rounded-xl transition-colors font-medium shadow-sm disabled:opacity-50"
>
<PlusIcon className="w-5 h-5" />
<span>{t("planning:createEvent")}</span>
@ -919,7 +922,11 @@ export const PlanningPage = () => {
)}
{event.tablo_name && (
<div className="flex items-center gap-2.5 text-[#344054] dark:text-gray-300">
<MapPinIcon className="w-4 h-4 flex-shrink-0" />
<div
className={`w-4 h-4 rounded-[3px] flex-shrink-0 flex items-center justify-center text-[7px] font-bold text-white ${event.tablo_color || "bg-gray-400"}`}
>
{event.tablo_name.charAt(0).toUpperCase()}
</div>
<span className="text-sm truncate">{event.tablo_name}</span>
</div>
)}