From 118b23bfb1a45e0cd6df10fd88599dd2716a5ce8 Mon Sep 17 00:00:00 2001
From: Arthur Belleville <arthur.belleville@datadoghq.com>
Date: Wed, 15 Apr 2026 14:18:27 +0200
Subject: [PATCH] feat(main): add client invite UI to share dialog

Adds three React Query hooks (usePendingClientInvites, useCreateClientInvite, useCancelClientInvite) and a new Client Access section in the share dialog with email input, pending invite list, expiry countdown, and orange warning badge for invites expiring in less than 5 days.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 apps/main/src/hooks/client_invites.ts |  89 ++++++++++++++++++
 apps/main/src/pages/tablo-details.tsx | 126 ++++++++++++++++++++++++++
 2 files changed, 215 insertions(+)
 create mode 100644 apps/main/src/hooks/client_invites.ts

diff --git a/apps/main/src/hooks/client_invites.ts b/apps/main/src/hooks/client_invites.ts
new file mode 100644
index 0000000..ea6d49b
--- /dev/null
+++ b/apps/main/src/hooks/client_invites.ts
@@ -0,0 +1,89 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { toast, useSession } from "@xtablo/shared";
+import { useAuthedApi } from "./auth";
+
+type PendingClientInvite = {
+  id: number;
+  invited_email: string;
+  expires_at: string;
+  is_pending: boolean;
+  created_at: string;
+};
+
+export const usePendingClientInvites = (tabloId: string) => {
+  const api = useAuthedApi();
+  const { session } = useSession();
+
+  return useQuery({
+    queryKey: ["client-invites", tabloId],
+    queryFn: async () => {
+      const { data } = await api.get<PendingClientInvite[]>(
+        `/api/v1/client-invites/${tabloId}/pending`
+      );
+      return data;
+    },
+    enabled: !!tabloId && !!session,
+  });
+};
+
+export const useCreateClientInvite = () => {
+  const api = useAuthedApi();
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async ({ tabloId, email }: { tabloId: string; email: string }) => {
+      const { data } = await api.post<PendingClientInvite>(
+        `/api/v1/client-invites/${tabloId}`,
+        { email }
+      );
+      return data;
+    },
+    onSuccess: (_data, { tabloId }) => {
+      queryClient.invalidateQueries({ queryKey: ["client-invites", tabloId] });
+      toast.add(
+        {
+          title: "Lien magique envoyé",
+          description: "L'invitation client a été envoyée avec succès",
+          type: "success",
+        },
+        { timeout: 3000 }
+      );
+    },
+    onError: (error) => {
+      console.error("Error creating client invite:", error);
+      toast.add(
+        {
+          title: "Erreur",
+          description: "Impossible d'envoyer l'invitation client",
+          type: "error",
+        },
+        { timeout: 5000 }
+      );
+    },
+  });
+};
+
+export const useCancelClientInvite = () => {
+  const api = useAuthedApi();
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async ({ tabloId, inviteId }: { tabloId: string; inviteId: number }) => {
+      await api.delete(`/api/v1/client-invites/${tabloId}/${inviteId}`);
+    },
+    onSuccess: (_data, { tabloId }) => {
+      queryClient.invalidateQueries({ queryKey: ["client-invites", tabloId] });
+    },
+    onError: (error) => {
+      console.error("Error cancelling client invite:", error);
+      toast.add(
+        {
+          title: "Erreur",
+          description: "Impossible d'annuler l'invitation client",
+          type: "error",
+        },
+        { timeout: 5000 }
+      );
+    },
+  });
+};
diff --git a/apps/main/src/pages/tablo-details.tsx b/apps/main/src/pages/tablo-details.tsx
index 940ba76..42d82f2 100644
--- a/apps/main/src/pages/tablo-details.tsx
+++ b/apps/main/src/pages/tablo-details.tsx
@@ -34,6 +34,7 @@ import {
   Sun,
   UserPlusIcon,
   Waves,
+  XIcon,
   Zap,
 } from "lucide-react";
 import { useEffect, useState } from "react";
@@ -52,6 +53,11 @@ import { useInviteUser } from "../hooks/invite";
 import { useTabloFileNames, useDownloadTabloFile, useUploadTabloFile, useDeleteTabloFile } from "../hooks/tablo_data";
 import { useTabloFolders, useCreateTabloFolder, useUpdateTabloFolder, useDeleteTabloFolder } from "../hooks/tablo_folders";
 import { useCancelTabloInvite, usePendingTabloInvitesByTablo } from "../hooks/tablo_invites";
+import {
+  usePendingClientInvites,
+  useCreateClientInvite,
+  useCancelClientInvite,
+} from "../hooks/client_invites";
 import {
   useTabloMembers,
   useTabloOverviewLayout,
@@ -187,6 +193,7 @@ export const TabloDetailsPage = () => {
   const [showAllOverviewTasks, setShowAllOverviewTasks] = useState(false);
   const [isShareDialogOpen, setIsShareDialogOpen] = useState(false);
   const [inviteEmail, setInviteEmail] = useState("");
+  const [clientInviteEmail, setClientInviteEmail] = useState("");
   const [isLayoutEditMode, setIsLayoutEditMode] = useState(false);
   const [draggedOverviewBlock, setDraggedOverviewBlock] = useState<{
     zone: "left" | "right";
@@ -200,6 +207,9 @@ export const TabloDetailsPage = () => {
   const { data: pendingInvites } = usePendingTabloInvitesByTablo(tabloId ?? "");
   const { mutate: cancelInvite, isPending: isCancellingInvite } = useCancelTabloInvite();
   const { mutate: inviteUser, isPending: isInvitingUser } = useInviteUser();
+  const { data: pendingClientInvites } = usePendingClientInvites(tabloId ?? "");
+  const { mutate: createClientInvite, isPending: isCreatingClientInvite } = useCreateClientInvite();
+  const { mutate: cancelClientInvite, isPending: isCancellingClientInvite } = useCancelClientInvite();
   const { mutate: updateTask } = useUpdateTask();
   const { mutate: updateTablo, mutateAsync: updateTabloAsync } = useUpdateTablo();
   const { mutate: createTask } = useCreateTask();
@@ -1032,6 +1042,122 @@ export const TabloDetailsPage = () => {
                 </div>
               </div>
             )}
+
+            {/* Separator */}
+            <div className="border-t border-border pt-4">
+              {/* Client Access Section */}
+              <div className="mb-3">
+                <h4 className="text-sm font-semibold text-foreground">Accès client</h4>
+                <p className="text-xs text-muted-foreground">
+                  Invitez des clients externes via un lien magique
+                </p>
+              </div>
+
+              {/* Client Invite Input */}
+              <div className="flex flex-col sm:flex-row gap-2">
+                <Input
+                  type="email"
+                  value={clientInviteEmail}
+                  onChange={(e) => setClientInviteEmail(e.target.value)}
+                  placeholder="Email du client"
+                  className="flex-1 min-h-[44px]"
+                />
+                {isCreatingClientInvite ? (
+                  <div className="flex justify-center items-center px-4">
+                    <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-primary" />
+                  </div>
+                ) : (
+                  <Button
+                    type="button"
+                    onClick={() => {
+                      if (tabloId && clientInviteEmail) {
+                        createClientInvite(
+                          { tabloId, email: clientInviteEmail },
+                          { onSuccess: () => setClientInviteEmail("") }
+                        );
+                      }
+                    }}
+                    disabled={!isEmailValid(clientInviteEmail)}
+                  >
+                    Envoyer le lien
+                  </Button>
+                )}
+              </div>
+
+              {/* Pending Client Invites */}
+              {pendingClientInvites && pendingClientInvites.length > 0 && (
+                <div className="mt-3">
+                  <h4 className="text-sm font-semibold text-foreground mb-2">
+                    Invitations client en attente ({pendingClientInvites.length})
+                  </h4>
+                  <div className="space-y-2 max-h-32 overflow-y-auto">
+                    {pendingClientInvites.map((invite) => {
+                      const daysUntilExpiry = Math.ceil(
+                        (new Date(invite.expires_at).getTime() - Date.now()) / (1000 * 60 * 60 * 24)
+                      );
+                      const isExpiringSoon = daysUntilExpiry < 5;
+                      return (
+                        <div
+                          key={invite.id}
+                          className="flex items-center space-x-2 p-2 bg-blue-50 dark:bg-blue-950/20 rounded-lg border border-dashed border-blue-200 dark:border-blue-900/50"
+                        >
+                          <div className="w-8 h-8 bg-blue-100 dark:bg-blue-900/30 rounded-full flex items-center justify-center text-blue-600 dark:text-blue-400 text-xs flex-shrink-0">
+                            <svg
+                              className="w-4 h-4"
+                              fill="none"
+                              stroke="currentColor"
+                              viewBox="0 0 24 24"
+                            >
+                              <path
+                                strokeLinecap="round"
+                                strokeLinejoin="round"
+                                strokeWidth={2}
+                                d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"
+                              />
+                            </svg>
+                          </div>
+                          <div className="flex-1 min-w-0">
+                            <span className="text-xs font-medium text-foreground truncate block">
+                              {invite.invited_email}
+                            </span>
+                            <span
+                              className={`text-xs ${
+                                isExpiringSoon
+                                  ? "text-orange-600 dark:text-orange-400 font-medium"
+                                  : "text-muted-foreground"
+                              }`}
+                            >
+                              {isExpiringSoon && "⚠ "}
+                              Expire dans {daysUntilExpiry} jour{daysUntilExpiry !== 1 ? "s" : ""}
+                            </span>
+                          </div>
+                          {isExpiringSoon && (
+                            <span className="text-xs px-1.5 py-0.5 bg-orange-100 dark:bg-orange-900/30 text-orange-700 dark:text-orange-300 rounded font-medium flex-shrink-0">
+                              Bientôt expiré
+                            </span>
+                          )}
+                          <Button
+                            size="sm"
+                            variant="ghost"
+                            className="h-7 w-7 p-0 flex-shrink-0"
+                            onClick={() =>
+                              cancelClientInvite({
+                                tabloId: tabloId ?? "",
+                                inviteId: invite.id,
+                              })
+                            }
+                            disabled={isCancellingClientInvite || !tabloId}
+                            title="Annuler l'invitation"
+                          >
+                            <XIcon className="w-3.5 h-3.5" />
+                          </Button>
+                        </div>
+                      );
+                    })}
+                  </div>
+                </div>
+              )}
+            </div>
           </div>
         </DialogContent>
       </Dialog>