small adjustments

2025-09-08 22:05:53 +02:00 · 2025-09-08 22:05:53 +02:00 · 223a7d5cad
commit 223a7d5cad
parent 75e72c1207
4 changed files with 77 additions and 56 deletions
--- 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: <Grid2X2Icon className="w-5 h-5" />,
-    },
+  type List<T> = 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: <SquareKanban className="w-5 h-5" />,
    },
+    {
+      path: "/availabilities",
+      label: "Disponibilités",
+      icon: <CalendarIcon className="w-5 h-5" />,
+    },
+    {
+      path: "/bookings",
+      label: "Réservations",
+      icon: <CalendarCheckIcon className="w-5 h-5" />,
+    },
    {
      path: "/kanban",
      label: "Kanban",
@ -282,6 +297,12 @@ export function MainNavigation({ isCollapsed }: { isCollapsed: boolean }) {
      icon: <ConstructionIcon className="w-5 h-5" />,
      isDisabled: true,
    },
+    { isHorizontalBar: true },
+    {
+      path: "/",
+      label: "Tableaux",
+      icon: <Grid2X2Icon className="w-5 h-5" />,
+    },
    {
      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 (
+              <li key="horizontal-bar" className="my-2">
+                <Separator className="border-gray-300/20" />
+              </li>
+            );
+          }
+
+          const { path, label, icon, isDisabled } = item;
+
+          return !isDisabled ? (
            <li key={label}>
              <NavLink isActive={location.pathname === path}>
                <RouterLink
@ -322,8 +353,8 @@ export function MainNavigation({ isCollapsed }: { isCollapsed: boolean }) {
                </RouterLink>
              </NavLink>
            </li>
-          ) : null
-        )}
+          ) : null;
+        })}
      </ul>
      <ul
        role="list"
--- a/ui/src/pages/planning.tsx
+++ b/ui/src/pages/planning.tsx
@ -12,6 +12,7 @@ import { Outlet, useNavigate, useParams } from "react-router-dom";
 import { generateICSFromEvents, downloadICSFile } from "@ui/utils/helpers";
 import { ImportICSModal } from "@ui/components/ImportICSModal";
 import { WebcalModal } from "@ui/components/WebcalModal";
+import { FolderInputIcon, PlusIcon } from "lucide-react";

 type ViewType = "month" | "week" | "day";

@ -692,29 +693,18 @@ export const PlanningPage = () => {
                  );
                }
              }}
-              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
+              <PlusIcon className="w-5 h-5 mr-2" />
+              <span className="text-sm">Créer un événement</span>
            </button>

            <button
              onClick={() => setIsImportModalOpen(true)}
              className="w-full px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors font-medium shadow-sm mt-2 flex items-center justify-center space-x-2"
            >
-              <svg
-                className="w-4 h-4"
-                fill="none"
-                stroke="currentColor"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth="2"
-                  d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M9 19l3 3m0 0l3-3m-3 3V10"
-                />
-              </svg>
-              <span>Importer un planning</span>
+              <FolderInputIcon className="w-5 h-5 mr-2" />
+              <span className="text-sm">Importer un planning</span>
            </button>
          </div>

--- a/ui/src/pages/tablo.tsx
+++ b/ui/src/pages/tablo.tsx
@ -336,7 +336,7 @@ export const TabloPage = () => {
        }}
      >
        <div
-          className={`bg-white dark:bg-gray-800 rounded-lg shadow-lg transition-all duration-300 w-64 overflow-hidden border border-gray-200 dark:border-gray-700 ${
+          className={`bg-white dark:bg-gray-800 rounded-lg shadow-lg transition-all duration-300 w-56 overflow-hidden border border-gray-200 dark:border-gray-700 ${
            isAdmin
              ? "hover:shadow-xl cursor-pointer"
              : "hover:shadow-xl cursor-pointer opacity-75"
@ -347,7 +347,7 @@ export const TabloPage = () => {
          }}
        >
          {/* Image or Color */}
-          <div className="relative h-56 group">
+          <div className="relative h-40 group">
            {tablo.image ? (
              <img
                src={tablo.image}
@ -360,7 +360,7 @@ export const TabloPage = () => {
                  tablo.color || "bg-gray-400"
                } flex items-center justify-center`}
              >
-                <h3 className="text-white font-bold text-2xl text-center px-4">
+                <h3 className="text-white font-bold text-xl text-center px-4">
                  {tablo.name}
                </h3>
              </div>
@ -421,10 +421,10 @@ export const TabloPage = () => {
          </div>

          {/* Content */}
-          <div className="p-4">
-            <div className="space-y-2">
-              <div className="flex items-center gap-2">
-                <h3 className="text-gray-900 dark:text-white font-semibold text-lg truncate">
+          <div className="p-3">
+            <div className="space-y-1">
+              <div className="flex items-center gap-1">
+                <h3 className="text-gray-900 dark:text-white font-semibold text-base truncate">
                  {tablo.name}
                </h3>
                {/* Status badge */}
@ -673,7 +673,7 @@ export const TabloPage = () => {
      <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
        <div className="container mx-auto px-4 py-8">
          {filteredTablos && filteredTablos.length > 0 ? (
-            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
              {/* Render tablos */}
              {filteredTablos.map((tablo) => renderTablo(tablo))}
            </div>
--- 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",