From ba2045fb40d8b3668a443491b244ecb23a78a344 Mon Sep 17 00:00:00 2001
From: Arthur Belleville <arthur.belleville@datadoghq.com>
Date: Mon, 23 Feb 2026 16:14:46 +0100
Subject: [PATCH] Add disabled state and badge to ActionCard, disable Invite
 card
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- ActionCard: new disabled and badge props; disabled state shows opacity-50, cursor-not-allowed, prevents clicks
- Badge renders inline next to the label (e.g., "Bientôt")
- Invite Team card: permanently disabled with "Bientôt" badge visible without clicking
- Remove onInviteTeam prop and toast callback

Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com>
---
 apps/main/src/components/ActionCard.tsx       | 44 ++++++++++++-------
 .../src/components/DashboardActionCards.tsx   |  6 +--
 apps/main/src/pages/tablo.tsx                 |  6 ---
 3 files changed, 31 insertions(+), 25 deletions(-)

diff --git a/apps/main/src/components/ActionCard.tsx b/apps/main/src/components/ActionCard.tsx
index e0fe152..7336c78 100644
--- a/apps/main/src/components/ActionCard.tsx
+++ b/apps/main/src/components/ActionCard.tsx
@@ -7,6 +7,8 @@ export interface ActionCardProps {
   description: string;
   variant?: "primary" | "default";
   isSelected?: boolean;
+  disabled?: boolean;
+  badge?: string;
   onClick?: () => void;
   className?: string;
 }
@@ -17,22 +19,27 @@ export function ActionCard({
   description,
   variant = "default",
   isSelected = false,
+  disabled = false,
+  badge,
   onClick,
   className,
 }: ActionCardProps) {
   const isPrimary = variant === "primary";
-  const isActive = isSelected || isPrimary;
+  const isActive = !disabled && (isSelected || isPrimary);
 
   return (
     <button
-      onClick={onClick}
+      onClick={disabled ? undefined : onClick}
+      disabled={disabled}
       className={cn(
         "h-fit p-3 rounded-2xl text-left transition-all",
-        isSelected
-          ? "bg-[rgb(128,78,236)] text-white border-transparent shadow-lg"
-          : isPrimary
-            ? "bg-primary text-white hover:shadow-lg"
-            : "bg-white dark:bg-gray-800 border border-[#EAECF0] dark:border-gray-700 hover:shadow-md",
+        disabled
+          ? "bg-white dark:bg-gray-800 border border-[#EAECF0] dark:border-gray-700 opacity-50 cursor-not-allowed"
+          : isSelected
+            ? "bg-[rgb(128,78,236)] text-white border-transparent shadow-lg"
+            : isPrimary
+              ? "bg-primary text-white hover:shadow-lg"
+              : "bg-white dark:bg-gray-800 border border-[#EAECF0] dark:border-gray-700 hover:shadow-md",
         className,
       )}
     >
@@ -53,15 +60,22 @@ export function ActionCard({
           </span>
         </div>
 
-        <div>
-          <span
-            className={cn(
-              "block font-semibold text-lg leading-tight",
-              isActive ? "text-white" : "text-gray-900 dark:text-gray-100",
+        <div className="flex-1 min-w-0">
+          <div className="flex items-center gap-2">
+            <span
+              className={cn(
+                "font-semibold text-lg leading-tight",
+                isActive ? "text-white" : "text-gray-900 dark:text-gray-100",
+              )}
+            >
+              {label}
+            </span>
+            {badge && (
+              <span className="text-[10px] font-medium px-1.5 py-0.5 rounded-full bg-gray-100 dark:bg-gray-700 text-gray-500 dark:text-gray-400 leading-none shrink-0">
+                {badge}
+              </span>
             )}
-          >
-            {label}
-          </span>
+          </div>
           <p
             className={cn(
               "text-sm mt-0.5",
diff --git a/apps/main/src/components/DashboardActionCards.tsx b/apps/main/src/components/DashboardActionCards.tsx
index 4a5c4fd..2a8a930 100644
--- a/apps/main/src/components/DashboardActionCards.tsx
+++ b/apps/main/src/components/DashboardActionCards.tsx
@@ -6,7 +6,6 @@ import { ActionCard } from "./ActionCard";
 export interface DashboardActionCardsProps {
   onCreateProject?: () => void;
   onCreateTask?: () => void;
-  onInviteTeam?: () => void;
   onSendMessage?: () => void;
 }
 
@@ -15,7 +14,6 @@ type CardId = "createProject" | "createTask" | "inviteTeam" | "sendMessage";
 export function DashboardActionCards({
   onCreateProject,
   onCreateTask,
-  onInviteTeam,
   onSendMessage,
 }: DashboardActionCardsProps) {
   const { t } = useTranslation("pages");
@@ -48,8 +46,8 @@ export function DashboardActionCards({
         icon={<UserPlus className="w-6 h-6" />}
         label={t("dashboard.actionCards.inviteTeam.label")}
         description={t("dashboard.actionCards.inviteTeam.description")}
-        isSelected={selected === "inviteTeam"}
-        onClick={() => handleClick("inviteTeam", onInviteTeam)}
+        disabled
+        badge="Bientôt"
       />
 
       <ActionCard
diff --git a/apps/main/src/pages/tablo.tsx b/apps/main/src/pages/tablo.tsx
index 0dbdd81..c0ff968 100644
--- a/apps/main/src/pages/tablo.tsx
+++ b/apps/main/src/pages/tablo.tsx
@@ -653,12 +653,6 @@ export const TabloPage = () => {
           onCreateProject={openCreateModal}
           onCreateTask={() => setIsTaskModalOpen(true)}
           onSendMessage={() => navigate("/chat")}
-          onInviteTeam={() =>
-            toast.add(
-              { title: "Bientôt disponible", description: "L'invitation d'équipe sera disponible prochainement", type: "info" },
-              { timeout: 3000 }
-            )
-          }
         />
 
         <div className="container mx-auto px-4 py-8">