feat: WIP element Chat intergration

apps/edr-freight-web/backoffice/src/pages/chat/ChatLaunchPage.tsx

@@ -0,0 +1,62 @@
+import { Alert, Button, Card, Center, Loader, Stack, Text } from "@mantine/core";
+import { MessageSquare, TriangleAlert } from "lucide-react";
+
+import { PageContainer, PageHeader } from "@/components/page";
+import { useChatSso } from "@/features/chat/useChatSso";
+
+/**
+ * Chat itself lives at chat.edr.et (Element), not in this app — this page's
+ * only job is a fresh one-click sign-in link into it. A real `<a>` (not
+ * `window.open()` in a click handler) so the browser never treats it as a
+ * blocked popup, and no iframe: Element's own CSP refuses to be framed.
+ */
+export default function ChatLaunchPage() {
+  const { data: url, isLoading, isError, refetch } = useChatSso();
+
+  return (
+    <PageContainer>
+      <PageHeader title="Chat" subtitle="Internal messaging for EDR staff" />
+      <Card withBorder radius="md" p="xl">
+        <Center>
+          <Stack align="center" gap="md" py="xl">
+            {isLoading && <Loader />}
+
+            {isError && (
+              <Stack align="center" gap="sm">
+                <Alert
+                  icon={<TriangleAlert size={18} />}
+                  color="red"
+                  title="Couldn't get a sign-in link"
+                  variant="light"
+                >
+                  Something went wrong reaching chat. Try again.
+                </Alert>
+                <Button variant="light" onClick={() => refetch()}>
+                  Retry
+                </Button>
+              </Stack>
+            )}
+
+            {url && (
+              <Stack align="center" gap="sm">
+                <MessageSquare size={40} strokeWidth={1.5} />
+                <Text c="dimmed" ta="center" maw={360}>
+                  Opens EDR Chat in a new tab, already signed in as you.
+                </Text>
+                <Button
+                  component="a"
+                  href={url}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  leftSection={<MessageSquare size={16} />}
+                >
+                  Open EDR Chat
+                </Button>
+              </Stack>
+            )}
+          </Stack>
+        </Center>
+      </Card>
+    </PageContainer>
+  );
+}