From 223a7d5cadc3d9d2b07d9548a54f5c19b3c298a2 Mon Sep 17 00:00:00 2001 From: Arthur Belleville Date: Mon, 8 Sep 2025 22:05:53 +0200 Subject: [PATCH] small adjustments --- ui/src/components/NavigationBar.tsx | 61 +++++++++++++++++++------ ui/src/pages/planning.tsx | 22 +++------ ui/src/pages/tablo.tsx | 16 +++---- xtablo-expo/app/(app)/(tabs)/tablos.tsx | 34 +++++++------- 4 files changed, 77 insertions(+), 56 deletions(-) diff --git a/ui/src/components/NavigationBar.tsx b/ui/src/components/NavigationBar.tsx index d60f627..97c5cce 100644 --- a/ui/src/components/NavigationBar.tsx +++ b/ui/src/components/NavigationBar.tsx @@ -11,6 +11,8 @@ import { MessageCircleIcon, SquareKanban, Kanban, + CalendarIcon, + CalendarCheckIcon, } from "lucide-react"; import { Link as RouterLink, useLocation } from "react-router-dom"; import { Separator } from "react-aria-components"; @@ -242,17 +244,20 @@ export const SideNavigation = ({ export function MainNavigation({ isCollapsed }: { isCollapsed: boolean }) { const location = useLocation(); - const navItems: { - path: string; - label: string; - icon: React.ReactNode; - isDisabled?: boolean; - }[] = [ - { - path: "/", - label: "Tableaux", - icon: , - }, + type List = T[]; + + const navItems: List< + | { + path: string; + label: string; + icon: React.ReactNode; + isDisabled?: boolean; + isHorizontalBar?: never; + } + | { + isHorizontalBar: boolean; + } + > = [ { path: "/devis", label: "Devis", @@ -270,6 +275,16 @@ export function MainNavigation({ isCollapsed }: { isCollapsed: boolean }) { label: "Planning", icon: , }, + { + path: "/availabilities", + label: "Disponibilités", + icon: , + }, + { + path: "/bookings", + label: "Réservations", + icon: , + }, { path: "/kanban", label: "Kanban", @@ -282,6 +297,12 @@ export function MainNavigation({ isCollapsed }: { isCollapsed: boolean }) { icon: , isDisabled: true, }, + { isHorizontalBar: true }, + { + path: "/", + label: "Tableaux", + icon: , + }, { path: "/chat", label: "Discussions", @@ -294,8 +315,18 @@ export function MainNavigation({ isCollapsed }: { isCollapsed: boolean }) { role="list" className={twMerge("grid py-3", isCollapsed ? "pl-2.5 pr-3" : "")} > - {navItems.map(({ path, label, icon, isDisabled }) => - !isDisabled ? ( + {navItems.map((item) => { + if ("isHorizontalBar" in item) { + return ( +
  • + +
    • + ); + } + + const { path, label, icon, isDisabled } = item; + + return !isDisabled ? (
    • - ) : null - )} + ) : null; + })}
      { ); } }} - className="w-full px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors font-medium shadow-sm disabled:opacity-50 disabled:cursor-not-allowed" + className="w-full px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors font-medium shadow-sm disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center space-x-2" > - + Créer un événement + + Créer un événement diff --git a/ui/src/pages/tablo.tsx b/ui/src/pages/tablo.tsx index e632346..5ad744c 100644 --- a/ui/src/pages/tablo.tsx +++ b/ui/src/pages/tablo.tsx @@ -336,7 +336,7 @@ export const TabloPage = () => { }} >
      { }} > {/* Image or Color */} -
      +
      {tablo.image ? ( { tablo.color || "bg-gray-400" } flex items-center justify-center`} > -

      +

      {tablo.name}

      @@ -421,10 +421,10 @@ export const TabloPage = () => {
      {/* Content */} -
      -
      -
      -

      +
      +
      +
      +

      {tablo.name}

      {/* Status badge */} @@ -673,7 +673,7 @@ export const TabloPage = () => {
      {filteredTablos && filteredTablos.length > 0 ? ( -
      +
      {/* Render tablos */} {filteredTablos.map((tablo) => renderTablo(tablo))}
      diff --git a/xtablo-expo/app/(app)/(tabs)/tablos.tsx b/xtablo-expo/app/(app)/(tabs)/tablos.tsx index e4135c2..fc42306 100644 --- a/xtablo-expo/app/(app)/(tabs)/tablos.tsx +++ b/xtablo-expo/app/(app)/(tabs)/tablos.tsx @@ -814,7 +814,7 @@ const styles = StyleSheet.create({ tabloCard: { backgroundColor: "white", borderRadius: 16, - marginBottom: 16, + marginBottom: 12, marginHorizontal: 8, shadowColor: "#000", shadowOffset: { width: 0, height: 2 }, @@ -824,7 +824,7 @@ const styles = StyleSheet.create({ overflow: "hidden", }, tabloHeader: { - height: 120, + height: 90, justifyContent: "center", alignItems: "center", position: "relative", @@ -836,35 +836,35 @@ const styles = StyleSheet.create({ alignItems: "center", }, tabloInitials: { - fontSize: 32, + fontSize: 24, fontWeight: "bold", color: "white", }, tabloInfo: { - padding: 16, + padding: 12, }, nameRow: { flexDirection: "row", alignItems: "flex-start", justifyContent: "space-between", - marginBottom: 12, + marginBottom: 6, gap: 8, }, tabloName: { - fontSize: 18, + fontSize: 16, fontWeight: "bold", color: "#1f2937", flex: 1, }, nameStatusBadge: { - paddingHorizontal: 8, - paddingVertical: 4, - borderRadius: 12, + paddingHorizontal: 6, + paddingVertical: 3, + borderRadius: 10, alignSelf: "flex-start", }, nameStatusText: { - fontSize: 10, + fontSize: 9, fontWeight: "600", textTransform: "uppercase", }, @@ -877,14 +877,14 @@ const styles = StyleSheet.create({ flex: 1, }, roleBadge: { - paddingHorizontal: 8, - paddingVertical: 4, - borderRadius: 8, + paddingHorizontal: 6, + paddingVertical: 3, + borderRadius: 7, alignSelf: "flex-start", }, roleText: { color: "white", - fontSize: 12, + fontSize: 11, fontWeight: "600", }, actionsRow: { @@ -892,9 +892,9 @@ const styles = StyleSheet.create({ gap: 8, }, cardActionButton: { - width: 32, - height: 32, - borderRadius: 16, + width: 28, + height: 28, + borderRadius: 14, backgroundColor: "#f3f4f6", justifyContent: "center", alignItems: "center",