@allbluecn/web-app 0.4.16 → 0.4.18

package/src/components/settings/personal-team/team/team-invitations.tsx

@@ -1,552 +1,1023 @@
-// SPDX-License-Identifier: AGPL-3.0-or-later
-// AllBlue - 理想之海
-// Copyright (C) 2026 AllBlue Contributors
-//
-// This program is free software: you can redistribute it and/or modify
-// it under the terms of the GNU Affero General Public License as published by
-// the Free Software Foundation, either version 3 of the License, or
-// (at your option) any later version.
-//
-// This program is distributed in the hope that it will be useful,
-// but WITHOUT ANY WARRANTY; without even the implied warranty of
-// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
-// GNU Affero General Public License for more details.
-//
-// You should have received a copy of the GNU Affero General Public License
-// along with this program. If not, see <https://www.gnu.org/licenses/>.
-
-"use client";
+"use client"
 
 import {
   Check,
+  Send,
   Copy,
+  Link,
+  Link2Off,
+  Link2,
   Loader2,
   Mail,
-  Plus,
   RefreshCw,
   Trash2,
   X,
-} from "lucide-react";
-import { useState } from "react";
-import { useTranslation } from "react-i18next";
-import { cn } from "@/lib/utils";
-import { formatDate } from "@/lib/datetime";
-import { useTimezone } from "@/providers/timezone-provider";
-import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
+  UserPlus,
+} from "lucide-react"
+import { useMemo, useEffect, useState } from "react"
+import { useTranslation } from "react-i18next"
+import { cn } from "@/lib/utils"
+import { formatDate } from "@/lib/datetime"
+import { useTimezone } from "@/providers/timezone-provider"
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
 import {
   Card,
   CardContent,
   CardDescription,
   CardHeader,
   CardTitle,
-} from "@/components/ui/card";
-import { Checkbox } from "@/components/ui/checkbox";
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from "@/components/ui/dialog";
+} from "@/components/ui/card"
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
+} from "@/components/ui/dropdown-menu"
 import {
   Empty,
   EmptyDescription,
   EmptyHeader,
   EmptyMedia,
   EmptyTitle,
-} from "@/components/ui/empty";
+} from "@/components/ui/empty"
 import {
   Field,
   FieldContent,
-  FieldDescription,
   FieldError,
-  FieldLabel,
-} from "@/components/ui/field";
+} from "@/components/ui/field"
+import { Input } from "@/components/ui/input"
 import {
   InputGroup,
   InputGroupAddon,
   InputGroupInput,
-} from "@/components/ui/input-group";
+} from "@/components/ui/input-group"
 import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from "@/components/ui/select";
-import { Textarea } from "@/components/ui/textarea";
+} from "@/components/ui/select"
+import { Separator } from "@/components/ui/separator"
 
 export interface TeamInvitation {
-  id: string;
-  email?: string;
-  link?: string;
-  role: "admin" | "member" | "viewer" | "guest";
-  status: "pending" | "accepted" | "expired" | "revoked";
+  id: string
+  email?: string
+  link?: string
+  role?: "admin" | "member" | "viewer" | "guest"
+  channel: "email" | "link"
+  status:
+    | "pending"
+    | "pending_approval"
+    | "accepted"
+    | "expired"
+    | "revoked"
+  applicantEmail?: string
   invitedBy: {
-    name: string;
-    email: string;
-  };
-  expiresAt?: Date;
-  createdAt: Date;
-  acceptedAt?: Date;
+    name: string
+    email: string
+  }
+  expiresAt?: Date
+  createdAt: Date
+  acceptedAt?: Date
+}
+
+export interface TeamJoinRequestItem {
+  id: string
+  email: string
+  status: 'pending' | 'approved' | 'rejected' | 'invalidated'
+  seatType?: 'member' | 'guest'
+  createdAt: Date
+  processedAt?: Date
+  applicantName?: string
 }
 
 export interface TeamInvitationsProps {
-  invitations?: TeamInvitation[];
+  invitations?: TeamInvitation[]
+  joinRequests?: TeamJoinRequestItem[]
   onCreate?: (data: {
-    email?: string;
-    role: "admin" | "member" | "viewer";
-    expiresInDays?: number;
-    message?: string;
-  }) => Promise<TeamInvitation>;
-  onRevoke?: (invitationId: string) => Promise<void>;
-  onResend?: (invitationId: string) => Promise<void>;
-  onCopyLink?: (link: string) => Promise<void>;
-  className?: string;
-  allowDirectLinks?: boolean;
+    email?: string
+    role: "admin" | "member" | "viewer"
+    expiresInDays?: number
+    message?: string
+  }) => Promise<TeamInvitation>
+  onRefreshLink?: (expiresInDays?: number) => Promise<TeamInvitation>
+  onRevoke?: (invitationId: string) => Promise<void>
+  onResend?: (invitationId: string) => Promise<void>
+  onApproveLink?: (invitationId: string, role: "admin" | "member" | "viewer") => Promise<void>
+  onApproveRequest?: (requestId: string, role: "admin" | "member" | "viewer") => Promise<void>
+  onRejectRequest?: (requestId: string) => Promise<void>
+  onClearExpired?: () => Promise<void>
+  className?: string
+  allowDirectLinks?: boolean
 }
 
-function formatTimeUntil(date: Date, t: (key: string, params?: Record<string, unknown>) => string): string {
-  const now = Date.now();
-  const diff = date.getTime() - now;
+function formatTimeUntil(
+  date: Date,
+  t: (key: string, params?: Record<string, unknown>) => string,
+): string {
+  const now = Date.now()
+  const diff = date.getTime() - now
 
-  if (diff <= 0) return t("team.expired");
+  if (diff <= 0) return t("team.expired")
 
-  const days = Math.floor(diff / (1000 * 60 * 60 * 24));
-  const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
+  const days = Math.floor(diff / (1000 * 60 * 60 * 24))
+  const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60))
 
-  if (days > 0) return t("team.days", { count: days });
-  if (hours > 0) return t("team.hours", { count: hours });
-  return t("team.lessThanHour");
+  if (days > 0) return t("team.days", { count: days })
+  if (hours > 0) return t("team.hours", { count: hours })
+  return t("team.lessThanHour")
 }
 
-function getStatusBadge(status: TeamInvitation["status"], t: (key: string) => string) {
-  switch (status) {
+function getInvitationBadge(
+  invitation: TeamInvitation,
+  t: (key: string) => string,
+) {
+  switch (invitation.status) {
     case "pending":
-      return <Badge variant="secondary">{t("team.status.pending")}</Badge>;
+      return <Badge variant="secondary">{t("team.status.pending")}</Badge>
+    case "pending_approval":
+      return <Badge variant="default">{t("team.status.pendingApproval")}</Badge>
     case "accepted":
-      return <Badge variant="default">{t("team.status.accepted")}</Badge>;
+      return <Badge variant="default">{t("team.status.accepted")}</Badge>
     case "expired":
-      return <Badge variant="outline">{t("team.status.expired")}</Badge>;
+      return <Badge variant="outline">{t("team.status.expired")}</Badge>
     case "revoked":
-      return <Badge variant="destructive">{t("team.status.revoked")}</Badge>;
+      return <Badge variant="destructive">{t("team.status.revoked")}</Badge>
+  }
+}
+
+function getChannelBadge(
+  channel: "email" | "link",
+  t: (key: string) => string,
+) {
+  if (channel === "link") {
+    return <Badge variant="outline" className="text-xs">{t("team.channel.link")}</Badge>
   }
+  return <Badge variant="outline" className="text-xs">{t("team.channel.email")}</Badge>
 }
 
 export default function TeamInvitations({
   invitations = [],
+  joinRequests = [],
   onCreate,
+  onRefreshLink,
   onRevoke,
   onResend,
-  onCopyLink,
+  onApproveLink,
+  onApproveRequest,
+  onRejectRequest,
+  onClearExpired,
   className,
   allowDirectLinks = true,
 }: TeamInvitationsProps) {
-  const [createDialogOpen, setCreateDialogOpen] = useState(false);
-  const [isCreating, setIsCreating] = useState(false);
-  const [actionLoading, setActionLoading] = useState<string | null>(null);
-  const [copiedLink, setCopiedLink] = useState<string | null>(null);
-  const [errors, setErrors] = useState<Record<string, string>>({});
-  const [inviteData, setInviteData] = useState({
-    email: "",
-    role: "member" as "admin" | "member" | "viewer",
-    expiresInDays: 7,
-    message: "",
-    useDirectLink: false,
-  });
-  const timezone = useTimezone();
-  const { t } = useTranslation("settings");
-
-  const pendingInvitations = invitations.filter((i) => i.status === "pending");
-  const acceptedInvitations = invitations.filter(
-    (i) => i.status === "accepted"
-  );
+  const { t } = useTranslation("settings")
+  const timezone = useTimezone()
+  const [actionLoading, setActionLoading] = useState<string | null>(null)
+  const [clearingExpired, setClearingExpired] = useState(false)
+
+  const [linkCopied, setLinkCopied] = useState(false)
+  const [linkRefreshing, setLinkRefreshing] = useState(false)
+
+  const [emailAddress, setEmailAddress] = useState("")
+  const [emailRole, setEmailRole] = useState<
+    "admin" | "member" | "viewer"
+  >("member")
+  const [emailExpires, setEmailExpires] = useState(7)
+  const [emailMessage, setEmailMessage] = useState("")
+  const [emailCreating, setEmailCreating] = useState(false)
+  const [errors, setErrors] = useState<Record<string, string>>({})
 
-  const handleCreate = async () => {
-    setErrors({});
+  const [linkExpires, setLinkExpires] = useState(7)
 
-    if (!(inviteData.useDirectLink || inviteData.email.trim())) {
-      setErrors({ email: t("team.enterEmail") });
-      return;
+  const [approveRoles, setApproveRoles] = useState<
+    Record<string, "admin" | "member" | "viewer">
+  >({})
+
+  const [freshLink, setFreshLink] = useState<TeamInvitation | null>(null)
+
+  const activeLinkInvitation = useMemo(
+    () =>
+      freshLink ??
+      invitations.find(
+        (inv) => inv.link && (inv.status === "pending" || inv.status === "pending_approval" || inv.status === "expired"),
+      ),
+    [freshLink, invitations],
+  )
+
+  const isLinkExpired =
+    !!activeLinkInvitation && (
+      activeLinkInvitation.status === "expired" ||
+      (!!activeLinkInvitation.expiresAt && new Date(activeLinkInvitation.expiresAt) < new Date())
+    )
+
+  const historyInvitations = invitations.filter(
+    (inv) =>
+      !inv.link ||
+      ["accepted", "pending_approval", "revoked", "pending"].includes(inv.status),
+  )
+
+  useEffect(() => {
+    if (freshLink && activeLinkInvitation?.id === freshLink.id && activeLinkInvitation !== freshLink) {
+      setFreshLink(null)
     }
+  }, [activeLinkInvitation, freshLink])
 
-    if (!inviteData.useDirectLink) {
-      const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
-      if (!emailRegex.test(inviteData.email)) {
-        setErrors({ email: t("team.invalidEmail") });
-        return;
+  const pendingInvitations = invitations.filter(
+    (i) => i.status === "pending" || i.status === "pending_approval",
+  )
+  const approvalPendingInvitations = invitations.filter(
+    (i) => i.status === "pending_approval",
+  )
+  const acceptedInvitations = invitations.filter(
+    (i) => i.status === "accepted",
+  )
+
+  const handleRefreshLink = async () => {
+    setLinkRefreshing(true)
+    try {
+      const newInvitation = await onRefreshLink?.(linkExpires)
+      if (newInvitation?.link) {
+        setFreshLink(newInvitation)
+        const expiresDays = newInvitation.expiresAt
+          ? Math.max(1, Math.ceil((newInvitation.expiresAt.getTime() - Date.now()) / (1000 * 60 * 60 * 24)))
+          : linkExpires
+      const message = t("team.linkCopiedMessage", {
+          inviteLink: newInvitation.link,
+          days: expiresDays,
+        })
+        navigator.clipboard.writeText(message).catch(() => {})
+        setLinkCopied(true)
+        setTimeout(() => setLinkCopied(false), 3000)
       }
+    } catch (error) {
+      setErrors({
+        _general:
+          error instanceof Error
+            ? error.message
+            : t("team.inviteCreateFailed"),
+      })
+    } finally {
+      setLinkRefreshing(false)
+    }
+  }
+
+  const handleCopyActiveLink = async () => {
+    if (!activeLinkInvitation?.link) return
+    try {
+      const days = activeLinkInvitation.expiresAt
+        ? Math.max(1, Math.ceil((activeLinkInvitation.expiresAt.getTime() - Date.now()) / (1000 * 60 * 60 * 24)))
+        : linkExpires
+        const message = t("team.linkCopiedMessage", {
+        inviteLink: activeLinkInvitation.link,
+        days,
+      })
+      await navigator.clipboard.writeText(message)
+      setLinkCopied(true)
+      setTimeout(() => setLinkCopied(false), 3000)
+    } catch {}
+  }
+
+  const handleCreateEmail = async () => {
+    setErrors({})
+
+    if (!emailAddress.trim()) {
+      setErrors({ email: t("team.emailRequired") })
+      return
+    }
+
+    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
+    if (!emailRegex.test(emailAddress)) {
+      setErrors({ email: t("team.invalidEmail") })
+      return
     }
 
-    setIsCreating(true);
+    setEmailCreating(true)
     try {
       await onCreate?.({
-        email: inviteData.useDirectLink ? undefined : inviteData.email,
-        role: inviteData.role,
-        expiresInDays: inviteData.expiresInDays,
-        message: inviteData.message,
-      });
-      setInviteData({
-        email: "",
-        role: "member",
-        expiresInDays: 7,
-        message: "",
-        useDirectLink: false,
-      });
-      setCreateDialogOpen(false);
+        email: emailAddress,
+        role: emailRole,
+        expiresInDays: emailExpires,
+        message: emailMessage,
+      })
+      setEmailAddress("")
+      setEmailMessage("")
     } catch (error) {
       setErrors({
         _general:
           error instanceof Error
             ? error.message
             : t("team.inviteCreateFailed"),
-      });
+      })
     } finally {
-      setIsCreating(false);
+      setEmailCreating(false)
     }
-  };
+  }
+
+  const handleApprove = async (
+    invitationId: string,
+    role: "admin" | "member" | "viewer",
+  ) => {
+    setActionLoading(invitationId)
+    try {
+      await onApproveLink?.(invitationId, role)
+    } finally {
+      setActionLoading(null)
+    }
+  }
 
   const handleAction = async (
     action: () => Promise<void>,
-    invitationId: string
+    invitationId: string,
   ) => {
-    setActionLoading(invitationId);
+    setActionLoading(invitationId)
     try {
-      await action();
+      await action()
     } finally {
-      setActionLoading(null);
+      setActionLoading(null)
     }
-  };
+  }
 
-  const handleCopyLink = async (link: string, invitationId: string) => {
-    try {
-      await onCopyLink?.(link);
-      await navigator.clipboard.writeText(link);
-      setCopiedLink(invitationId);
-      setTimeout(() => setCopiedLink(null), 2000);
-    } catch {}
-  };
+  const linkExpiryDays = activeLinkInvitation?.expiresAt
+    ? Math.max(1, Math.ceil((activeLinkInvitation.expiresAt.getTime() - Date.now()) / (1000 * 60 * 60 * 24)))
+    : null
+
+  const linkExpiryText = activeLinkInvitation?.expiresAt
+    ? `${formatDate(activeLinkInvitation.expiresAt, timezone, "MMM d, yyyy")}`
+    : undefined
 
   return (
-    <Card className={cn("w-full shadow-xs border", className)}>
+    <Card className={cn("w-full min-w-100 border shadow-xs", className)}>
       <CardHeader>
-        <div className="flex flex-col flex-wrap gap-3 md:flex-row md:items-start md:justify-between">
-          <div className="flex min-w-0 flex-1 flex-col gap-2">
-            <CardTitle>{t("team.invite.title")}</CardTitle>
-            <CardDescription>
-              {t("team.invite.description", { pending: pendingInvitations.length, accepted: acceptedInvitations.length })}
-            </CardDescription>
-          </div>
-          <Dialog onOpenChange={setCreateDialogOpen} open={createDialogOpen}>
-            <DialogTrigger asChild>
-                <Button className="w-full shrink-0 md:w-auto" type="button">
-                  <Plus className="size-4" />
-                  {t("team.invite.createInvite")}
-                </Button>
-            </DialogTrigger>
-            <DialogContent className="md:max-w-md">
-              <DialogHeader>
-                <DialogTitle>{t("team.invite.createInvite")}</DialogTitle>
-                <DialogDescription>
-                  {t("team.invite.dialogDescription")}
-                </DialogDescription>
-              </DialogHeader>
-              <div className="flex flex-col gap-4">
-                {errors._general && (
-                  <div className="rounded-lg border border-destructive/50 bg-destructive/10 p-3">
-                    <p className="text-destructive text-sm">
-                      {errors._general}
-                    </p>
-                  </div>
-                )}
-                {allowDirectLinks && (
-                  <Field>
+        <div className="flex flex-col gap-2">
+          <CardTitle>{t("team.invite.title")}</CardTitle>
+          <CardDescription>
+            {t("team.invite.description", {
+              pending: pendingInvitations.length,
+              approvalPending: approvalPendingInvitations.length,
+              accepted: acceptedInvitations.length,
+            })}
+          </CardDescription>
+        </div>
+      </CardHeader>
+      <CardContent>
+        <div className="flex flex-col gap-4">
+          {errors._general && (
+            <div className="rounded-lg border border-destructive/50 bg-destructive/10 p-3">
+              <p className="text-destructive text-sm">{errors._general}</p>
+            </div>
+          )}
+
+          {allowDirectLinks && (
+            <div className="flex flex-col gap-3 rounded-lg border bg-muted/30 p-4">
+                <div className="flex items-start justify-between gap-4">
+                  <div className="flex flex-col gap-1 min-w-0 flex-1">
                     <div className="flex items-center gap-2">
-                      <Checkbox
-                        checked={inviteData.useDirectLink}
-                        id="use-direct-link"
-                        onCheckedChange={(checked: boolean) =>
-                          setInviteData((prev) => ({
-                            ...prev,
-                            useDirectLink: checked === true,
-                          }))
-                        }
-                      />
-                      <FieldLabel htmlFor="use-direct-link">
-                        {t("team.invite.directLink")}
-                      </FieldLabel>
+                      <Link2 className="size-4" />
+                      <h4 className="font-medium text-sm">
+                        {t("team.invite.linkTitle")}
+                      </h4>
                     </div>
-                  </Field>
-                )}
-                {!inviteData.useDirectLink && (
-                  <Field>
-                    <FieldLabel htmlFor="email">
-                      {t("team.invite.email")} <span className="text-destructive">*</span>
-                    </FieldLabel>
-                    <FieldContent>
-                      <InputGroup>
-                        <InputGroupAddon>
-                          <Mail className="size-4" />
-                        </InputGroupAddon>
-                        <InputGroupInput
-                          id="email"
-                          onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-                            setInviteData((prev) => ({
-                              ...prev,
-                              email: e.target.value,
-                            }))
-                          }
-                          placeholder="colleague@example.com"
-                          type="email"
-                          value={inviteData.email}
-                        />
-                      </InputGroup>
-                    </FieldContent>
-                    {errors.email && <FieldError>{errors.email}</FieldError>}
-                  </Field>
-                )}
-                <Field>
-                  <FieldLabel htmlFor="role">{t("team.invite.role")}</FieldLabel>
+                    <span className="text-muted-foreground text-xs">
+                      {t("team.invite.linkDescription")}
+                    </span>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <Select
+                      onValueChange={(value: string) =>
+                        setLinkExpires(Number.parseInt(value))
+                      }
+                      value={linkExpires.toString()}
+                    >
+                      <SelectTrigger className="h-8 w-18" size="sm">
+                        <SelectValue />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="1">
+                          {t("team.days", { count: 1 })}
+                        </SelectItem>
+                        <SelectItem value="3">
+                          {t("team.days", { count: 3 })}
+                        </SelectItem>
+                        <SelectItem value="7">
+                          {t("team.days", { count: 7 })}
+                        </SelectItem>
+                        <SelectItem value="14">
+                          {t("team.days", { count: 14 })}
+                        </SelectItem>
+                        <SelectItem value="30">
+                          {t("team.days", { count: 30 })}
+                        </SelectItem>
+                      </SelectContent>
+                    </Select>
+                    <Button
+                      aria-busy={linkRefreshing}
+                      data-loading={linkRefreshing}
+                      disabled={linkRefreshing}
+                      onClick={handleRefreshLink}
+                      size="sm"
+                      type="button"
+                      variant="outline"
+                    >
+                      {linkRefreshing ? (
+                        <>
+                          <Loader2 className="size-4 animate-spin" />
+                          {t("team.invite.linkRefreshing")}
+                        </>
+                      ) : (
+                        <>
+                          <RefreshCw className="size-4" />
+                          {t("team.invite.refreshLink")}
+                        </>
+                      )}
+                    </Button>
+                  </div>
+                </div>
+
+              {activeLinkInvitation ? (
+                <div className="flex items-center justify-between gap-2 rounded-md border bg-muted/50 p-3">
+                  <code className="min-w-0 flex-1 break-all text-wrap text-xs">
+                    {activeLinkInvitation.link}
+                  </code>
+                  {isLinkExpired && (
+                    <Badge variant="destructive">{t("team.status.expired")}</Badge>
+                  )}
+                  {activeLinkInvitation.expiresAt && (
+                    <span className="text-muted-foreground text-xs whitespace-nowrap shrink-0">
+                      {isLinkExpired
+                        ? t("team.invite.linkExpired")
+                        : `${t("team.invite.linkExpiry")} ${linkExpiryText}`}
+                    </span>
+                  )}
+                  <Button
+                    aria-label={t("team.copyLink")}
+                    onClick={handleCopyActiveLink}
+                    size="icon-sm"
+                    type="button"
+                    variant="ghost"
+                  >
+                    {linkCopied ? (
+                      <Check className="size-4" />
+                    ) : (
+                      <Copy className="size-4" />
+                    )}
+                  </Button>
+                </div>
+              ) : (
+                <div className="flex items-center justify-center gap-2 rounded-md border border-dashed bg-muted/20 p-3">
+                  <Link2Off className="size-4 shrink-0 text-muted-foreground" />
+                  <p className="text-muted-foreground text-xs">
+                    {t("team.invite.noActiveLink")}
+                  </p>
+                </div>
+              )}
+            </div>
+          )}
+
+          {joinRequests.length > 0 && (
+            <div className="flex flex-col gap-3 rounded-lg border bg-muted/30 p-4">
+              <div className="flex items-center gap-2">
+                <UserPlus className="size-4" />
+                <h4 className="font-medium text-sm">{t("team.joinRequests.title")}</h4>
+                <span className="text-muted-foreground text-xs">
+                  {t("team.joinRequests.description")}
+                </span>
+              </div>
+              <div className="flex flex-col gap-3">
+                {joinRequests.map((req) => (
+                  <div className="flex flex-col gap-2 rounded-lg border bg-card p-3" key={req.id}>
+                    <div className="flex items-center justify-between gap-3">
+                      <div className="flex min-w-0 flex-1 flex-wrap items-center gap-2">
+                        <span className="font-medium text-sm">{req.applicantName || req.email}</span>
+                        <Badge variant="outline" className="text-xs">
+                          {t("team.joinRequests.sourceLink")}
+                        </Badge>
+                        {req.status === "pending" && (
+                          <Badge variant="default">{t("team.status.pendingApproval")}</Badge>
+                        )}
+                        {req.status === "approved" && (
+                          <Badge variant="default">{t("team.joinRequests.requestApproved")}</Badge>
+                        )}
+                        {req.status === "rejected" && (
+                          <Badge variant="destructive">{t("team.joinRequests.requestRejected")}</Badge>
+                        )}
+                        {req.status === "invalidated" && (
+                          <Badge variant="outline">{t("team.joinRequests.requestInvalidated")}</Badge>
+                        )}
+                      </div>
+                      {req.status === "pending" && onApproveRequest && (
+                        <div className="flex items-center gap-2">
+                          <Select
+                            value={approveRoles[req.id] ?? "member"}
+                            onValueChange={(value: "admin" | "member" | "viewer") =>
+                              setApproveRoles((prev) => ({ ...prev, [req.id]: value }))
+                            }
+                          >
+                            <SelectTrigger className="h-8 w-24" size="sm">
+                              <SelectValue />
+                            </SelectTrigger>
+                            <SelectContent>
+                              <SelectItem value="member">{t("team.role.member")}</SelectItem>
+                              <SelectItem value="admin">{t("team.role.admin")}</SelectItem>
+                              <SelectItem value="viewer">{t("team.role.viewer")}</SelectItem>
+                            </SelectContent>
+                          </Select>
+                          <Button
+                            disabled={actionLoading === req.id}
+                            onClick={() =>
+                              handleAction(async () => {
+                                await onApproveRequest(req.id, approveRoles[req.id] ?? "member")
+                              }, req.id)
+                            }
+                            size="sm"
+                            type="button"
+                          >
+                            {actionLoading === req.id ? (
+                              <Loader2 className="size-4 animate-spin" />
+                            ) : (
+                              <Check className="size-4" />
+                            )}
+                            {t("team.invite.approve")}
+                          </Button>
+                          <Button
+                            disabled={actionLoading === req.id}
+                            onClick={() =>
+                              handleAction(async () => {
+                                await onRejectRequest?.(req.id)
+                              }, req.id)
+                            }
+                            size="sm"
+                            type="button"
+                            variant="ghost"
+                          >
+                            <X className="size-4" />
+                            {t("team.joinRequests.reject")}
+                          </Button>
+                        </div>
+                      )}
+                    </div>
+                    <div className="text-muted-foreground text-xs">
+                      {t("team.joinRequests.appliedAt")}{" "}
+                      {formatDate(req.createdAt, timezone, "MMM d, yyyy")}
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+
+          <div className="flex flex-col gap-3 rounded-lg border bg-muted/30 p-4">
+            <div className="flex items-center gap-2">
+              <Mail className="size-4" />
+              <h4 className="font-medium text-sm">
+                {t("team.invite.emailTitle")}
+              </h4>
+              <span className="text-muted-foreground text-xs">
+                {t("team.invite.emailDescription")}
+              </span>
+            </div>
+
+            <div className="flex flex-col gap-3 xl:flex-row xl:items-center">
+              <Field className="min-w-0 flex-1 xl:flex-[2]">
+                <FieldContent>
+                  <InputGroup>
+                    <InputGroupAddon>
+                      <Mail className="size-4" />
+                    </InputGroupAddon>
+                    <InputGroupInput
+                      id="email-invite-email"
+                      onChange={(e) => setEmailAddress(e.target.value)}
+                      placeholder={t("team.invite.emailPlaceholder")}
+                      type="email"
+                      value={emailAddress}
+                    />
+                  </InputGroup>
+                </FieldContent>
+                {errors.email && <FieldError>{errors.email}</FieldError>}
+              </Field>
+
+              <div className="min-w-0 flex flex-row gap-3 xl:flex-[2]">
+                <Field className="w-full flex-1 xl:w-28 xl:flex-[1] shrink-0">
                   <FieldContent>
                     <Select
                       onValueChange={(value: "admin" | "member" | "viewer") =>
-                        setInviteData((prev) => ({ ...prev, role: value }))
+                        setEmailRole(value)
                       }
-                      value={inviteData.role}
+                      value={emailRole}
                     >
-                      <SelectTrigger id="role">
+                      <SelectTrigger id="email-invite-role" className="w-full">
                         <SelectValue />
                       </SelectTrigger>
                       <SelectContent>
-                        <SelectItem value="member">{t("team.role.member")}</SelectItem>
-                        <SelectItem value="admin">{t("team.role.admin")}</SelectItem>
-                        <SelectItem value="viewer">{t("team.role.viewer")}</SelectItem>
+                        <SelectItem value="member">
+                          {t("team.role.member")}
+                        </SelectItem>
+                        <SelectItem value="admin">
+                          {t("team.role.admin")}
+                        </SelectItem>
+                        <SelectItem value="viewer">
+                          {t("team.role.viewer")}
+                        </SelectItem>
                       </SelectContent>
                     </Select>
                   </FieldContent>
-                  <FieldDescription>
-                    {t("team.invite.roleDescription")}
-                  </FieldDescription>
                 </Field>
-                <Field>
-                  <FieldLabel htmlFor="expires">{t("team.invite.expires")}</FieldLabel>
+
+                <Field className="w-full flex-1 xl:w-28 xl:flex-[1] shrink-0">
                   <FieldContent>
                     <Select
                       onValueChange={(value: string) =>
-                        setInviteData((prev) => ({
-                          ...prev,
-                          expiresInDays: Number.parseInt(value),
-                        }))
+                        setEmailExpires(Number.parseInt(value))
                       }
-                      value={inviteData.expiresInDays.toString()}
+                      value={emailExpires.toString()}
                     >
-                      <SelectTrigger id="expires">
+                      <SelectTrigger id="email-invite-expires" className="w-full">
                         <SelectValue />
                       </SelectTrigger>
                       <SelectContent>
-                        <SelectItem value="1">{t("team.days", { count: 1 })}</SelectItem>
-                        <SelectItem value="3">{t("team.days", { count: 3 })}</SelectItem>
-                        <SelectItem value="7">{t("team.days", { count: 7 })}</SelectItem>
-                        <SelectItem value="14">{t("team.days", { count: 14 })}</SelectItem>
-                        <SelectItem value="30">{t("team.days", { count: 30 })}</SelectItem>
+                        <SelectItem value="1">
+                          {t("team.days", { count: 1 })}
+                        </SelectItem>
+                        <SelectItem value="3">
+                          {t("team.days", { count: 3 })}
+                        </SelectItem>
+                        <SelectItem value="7">
+                          {t("team.days", { count: 7 })}
+                        </SelectItem>
+                        <SelectItem value="14">
+                          {t("team.days", { count: 14 })}
+                        </SelectItem>
+                        <SelectItem value="30">
+                          {t("team.days", { count: 30 })}
+                        </SelectItem>
                       </SelectContent>
                     </Select>
                   </FieldContent>
                 </Field>
-                <Field>
-                  <FieldLabel htmlFor="message">{t("team.invite.message")}</FieldLabel>
-                  <FieldContent>
-                    <Textarea
-                      id="message"
-                      onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) =>
-                        setInviteData((prev) => ({
-                          ...prev,
-                          message: e.target.value,
-                        }))
-                      }
-                      placeholder={t("team.invite.messagePlaceholder")}
-                      rows={3}
-                      value={inviteData.message}
-                    />
-                  </FieldContent>
-                </Field>
               </div>
-              <DialogFooter>
-                <Button
-                  onClick={() => setCreateDialogOpen(false)}
-                  type="button"
-                  variant="outline"
-                >
-                  {t("common.cancel")}
-                </Button>
-                <Button
-                  aria-busy={isCreating}
-                  data-loading={isCreating}
-                  onClick={handleCreate}
-                  type="button"
-                >
-                  {isCreating ? (
-                    <>
-                      <Loader2 className="size-4 animate-spin" />
-                      {t("team.invite.creating")}
-                    </>
-                  ) : (
-                    <>
-                      <Mail className="size-4" />
-                      {t("team.invite.sendInvite")}
-                    </>
-                  )}
-                </Button>
-              </DialogFooter>
-            </DialogContent>
-          </Dialog>
-        </div>
-      </CardHeader>
-      <CardContent>
-        {invitations.length === 0 ? (
-          <Empty>
-            <EmptyHeader>
-              <EmptyMedia variant="icon">
-                <Mail className="size-6" />
-              </EmptyMedia>
-              <EmptyTitle>{t("team.invite.noInvitations")}</EmptyTitle>
-              <EmptyDescription>{t("team.invite.createFirst")}</EmptyDescription>
-            </EmptyHeader>
-          </Empty>
-        ) : (
-          <div className="flex flex-col gap-4">
-            {invitations.map((invitation) => (
-              <div
-                className="flex flex-col gap-3 rounded-lg border bg-card p-4"
-                key={invitation.id}
+
+              <Field className="min-w-0 flex-1 xl:flex-[2]">
+                <FieldContent>
+                  <Input
+                    id="email-invite-message"
+                    onChange={(e) => setEmailMessage(e.target.value)}
+                    placeholder={t("team.invite.messagePlaceholder")}
+                    value={emailMessage}
+                  />
+                </FieldContent>
+              </Field>
+
+              <Button
+                aria-busy={emailCreating}
+                data-loading={emailCreating}
+                disabled={emailCreating}
+                className="w-full xl:w-auto shrink-0"
+                onClick={handleCreateEmail}
+                type="button"
               >
-                <div className="flex items-start justify-between gap-4">
-                  <div className="flex min-w-0 flex-1 flex-col gap-2">
-                    <div className="flex flex-wrap items-center gap-2">
-                      {invitation.email ? (
-                        <span className="font-medium text-sm">
-                          {invitation.email}
-                        </span>
-                      ) : (
-                         <span className="font-medium text-sm">{t("team.directLink")}</span>
-                      )}
-{getStatusBadge(invitation.status, t)}
-                       <Badge variant="outline">{t(`team.role.${invitation.role}`)}</Badge>
-                    </div>
-                    <div className="flex flex-wrap items-center gap-2 text-muted-foreground text-xs">
-                        <span>
-                          {invitation.invitedBy.name} {t("team.invite.invitedAt")} {formatDate(invitation.createdAt, timezone, 'MMM d, yyyy')}
-                        </span>
-                        {invitation.expiresAt && (
-                          <>
-                            <span aria-hidden="true">•</span>
-                            <span>
-                              {formatTimeUntil(invitation.expiresAt, t)}{t("team.expiresIn")}
-                            </span>
-                          </>
-                        )}
-                        {invitation.acceptedAt && (
-                          <>
-                            <span aria-hidden="true">•</span>
-                            <span>
-                              {t("team.invite.acceptedAt")} {formatDate(invitation.acceptedAt, timezone, 'MMM d, yyyy')}
-                            </span>
-                          </>
-                        )}
-                    </div>
-                  </div>
-                  {invitation.status === "pending" && (
-                    <DropdownMenu>
-                      <DropdownMenuTrigger asChild>
-                        <Button
-                          aria-label={t("team.moreActions")}
-                          size="icon"
-                          type="button"
-                          variant="ghost"
-                        >
-                          {actionLoading === invitation.id ? (
-                            <Loader2 className="size-4 animate-spin" />
-                          ) : (
-                            <X className="size-4" />
-                          )}
-                        </Button>
-                      </DropdownMenuTrigger>
-                      <DropdownMenuContent
-                        align="end"
-                        collisionPadding={8}
-                        sideOffset={4}
-                      >
-                        {onResend && (
-                          <DropdownMenuItem
-                            onSelect={() =>
-                              handleAction(
-                                () => onResend(invitation.id),
-                                invitation.id
-                              )
-                            }
-                          >
-                            <RefreshCw className="size-4" />
-                            {t("team.resend")}
-                          </DropdownMenuItem>
-                        )}
-                        {onRevoke && (
-                          <>
-                            <DropdownMenuSeparator />
-                            <DropdownMenuItem
-                              onSelect={() =>
-                                handleAction(
-                                  () => onRevoke(invitation.id),
-                                  invitation.id
-                                )
-                              }
-                              variant="destructive"
-                            >
-                              <Trash2 className="size-4" />
-                              {t("team.revoke")}
-                            </DropdownMenuItem>
-                          </>
-                        )}
-                      </DropdownMenuContent>
-                    </DropdownMenu>
-                  )}
-                </div>
-                {invitation.link && (
-                  <div className="flex items-center gap-2 rounded-md border bg-muted/30 p-2">
-                    <code className="wrap-break-word truncate text-wrap break-all text-xs">
-                      {invitation.link}
-                    </code>
+                {emailCreating ? (
+                  <>
+                    <Loader2 className="size-4 animate-spin" />
+                    {t("team.invite.creating")}
+                  </>
+                ) : (
+                  <>
+                    <Send className="size-4" />
+                    {t("team.invite.sendInvite")}
+                  </>
+                )}
+              </Button>
+            </div>
+          </div>
+
+          {historyInvitations.length > 0 && (
+            <>
+              <Separator />
+              <div className="flex flex-col gap-1">
+                <div className="flex items-center justify-between gap-2">
+                  <h4 className="font-medium text-sm">
+                    {t("team.invite.historyTitle")}
+                  </h4>
+                  {onClearExpired && (
                     <Button
-                      aria-label={t("team.copyLink")}
-                      onClick={() =>
-                        handleCopyLink(invitation.link!, invitation.id)
-                      }
-                      size="icon-sm"
+                      disabled={clearingExpired}
+                      onClick={async () => {
+                        setClearingExpired(true)
+                        try {
+                          await onClearExpired()
+                        } finally {
+                          setClearingExpired(false)
+                        }
+                      }}
+                      size="sm"
                       type="button"
                       variant="ghost"
                     >
-                      {copiedLink === invitation.id ? (
-                        <Check className="size-4" />
+                      {clearingExpired ? (
+                        <Loader2 className="size-4 animate-spin" />
                       ) : (
-                        <Copy className="size-4" />
+                        <X className="size-4" />
                       )}
+                      {t("team.invite.clearExpired")}
                     </Button>
-                  </div>
-                )}
+                  )}
+                </div>
               </div>
-            ))}
-          </div>
-        )}
+              <div className="flex flex-col gap-3">
+                {historyInvitations.map((invitation) => (
+                   <div
+                     className="flex flex-col gap-3 rounded-lg border bg-card p-4"
+                     key={invitation.id}
+                   >
+                      <div className="flex items-center justify-between gap-4">
+                        <div className="flex min-w-0 flex-1 flex-col gap-2">
+                          <div className="flex flex-wrap items-center gap-2">
+                            {(invitation.channel === "link" ? invitation.applicantEmail : invitation.email) && (
+                              <span className="font-medium text-sm">
+                                {invitation.channel === "link"
+                                  ? invitation.applicantEmail
+                                  : invitation.email}
+                              </span>
+                            )}
+                            {getChannelBadge(invitation.channel, t)}
+                            {getInvitationBadge(invitation, t)}
+                            {invitation.status === "pending_approval" && invitation.channel === "link" && (
+                              <Badge variant="secondary" className="text-xs">{t("team.unregistered")}</Badge>
+                            )}
+                            {invitation.role && (
+                              <Badge variant="outline">
+                                {t(`team.role.${invitation.role}`)}
+                              </Badge>
+                            )}
+                          </div>
+                          <div className="flex flex-wrap items-center gap-2 text-muted-foreground text-xs">
+                            <span>
+                              {t("team.invite.invitedAt")}{" "}
+                              {invitation.invitedBy.name}{" "}
+                              {formatDate(
+                                invitation.createdAt,
+                                timezone,
+                                "MMM d, yyyy",
+                              )}
+                            </span>
+                            {invitation.expiresAt && (
+                              <>
+                                <span aria-hidden="true">•</span>
+                                <span>
+                                  {(() => {
+                                    const timeStr = formatTimeUntil(invitation.expiresAt, t)
+                                    if (timeStr === t("team.expired")) return timeStr
+                                    return t("team.expiresIn", { time: timeStr })
+                                  })()}
+                                </span>
+                              </>
+                            )}
+                            {invitation.acceptedAt && (
+                              <>
+                                <span aria-hidden="true">•</span>
+                                <span>
+                                  {t("team.invite.acceptedAt")}{" "}
+                                  {formatDate(
+                                    invitation.acceptedAt,
+                                    timezone,
+                                    "MMM d, yyyy",
+                                  )}
+                                </span>
+                              </>
+                            )}
+                          </div>
+                        </div>
+                        {invitation.status === "pending_approval" && onApproveLink && (
+                          <div className="hidden xl:flex items-center gap-2">
+                            <Select
+                              value={approveRoles[invitation.id] ?? "member"}
+                              onValueChange={(value: "admin" | "member" | "viewer") =>
+                                setApproveRoles((prev) => ({ ...prev, [invitation.id]: value }))
+                              }
+                            >
+                              <SelectTrigger className="h-8 w-24" size="sm">
+                                <SelectValue />
+                              </SelectTrigger>
+                              <SelectContent>
+                                <SelectItem value="member">
+                                  {t("team.role.member")}
+                                </SelectItem>
+                                <SelectItem value="admin">
+                                  {t("team.role.admin")}
+                                </SelectItem>
+                                <SelectItem value="viewer">
+                                  {t("team.role.viewer")}
+                                </SelectItem>
+                              </SelectContent>
+                            </Select>
+                            <Button
+                              disabled={actionLoading === invitation.id}
+                              onClick={() =>
+                                handleApprove(invitation.id, approveRoles[invitation.id] ?? "member")
+                              }
+                              size="sm"
+                              type="button"
+                            >
+                              {actionLoading === invitation.id ? (
+                                <Loader2 className="size-4 animate-spin" />
+                              ) : (
+                                <Check className="size-4" />
+                              )}
+                              {t("team.invite.approve")}
+                            </Button>
+                            <DropdownMenu>
+                              <DropdownMenuTrigger asChild>
+                                <Button
+                                  aria-label="More options"
+                                  size="icon"
+                                  type="button"
+                                  variant="ghost"
+                                >
+                                  <X className="size-4" />
+                                </Button>
+                              </DropdownMenuTrigger>
+                              <DropdownMenuContent
+                                align="end"
+                                collisionPadding={8}
+                                sideOffset={4}
+                              >
+                                <DropdownMenuItem
+                                  onSelect={() =>
+                                    handleAction(
+                                      () => onRevoke!(invitation.id),
+                                      invitation.id,
+                                    )
+                                  }
+                                  variant="destructive"
+                                >
+                                  <Trash2 className="size-4" />
+                                  {t("team.revoke")}
+                                </DropdownMenuItem>
+                              </DropdownMenuContent>
+                            </DropdownMenu>
+                          </div>
+                        )}
+                        {!(invitation.status === "pending_approval" && onApproveLink) && (() => {
+                          const canResend = ["pending", "expired"].includes(invitation.status) && onResend
+                          const canRevoke = onRevoke
+                          return (
+                            <DropdownMenu>
+                              <DropdownMenuTrigger asChild>
+                                <Button
+                                  aria-label="More options"
+                                  size="icon"
+                                  type="button"
+                                  variant="ghost"
+                                >
+                                  {actionLoading === invitation.id ? (
+                                    <Loader2 className="size-4 animate-spin" />
+                                  ) : (
+                                    <X className="size-4" />
+                                  )}
+                                </Button>
+                              </DropdownMenuTrigger>
+                              <DropdownMenuContent
+                                align="end"
+                                collisionPadding={8}
+                                sideOffset={4}
+                              >
+                                {canResend && (
+                                  <DropdownMenuItem
+                                    onSelect={() =>
+                                      handleAction(
+                                        () => onResend!(invitation.id),
+                                        invitation.id,
+                                      )
+                                    }
+                                  >
+                                    <RefreshCw className="size-4" />
+                                    {t("team.resend")}
+                                  </DropdownMenuItem>
+                                )}
+                                {canRevoke && (
+                                  <>
+                                    <DropdownMenuSeparator />
+                                    <DropdownMenuItem
+                                      onSelect={() =>
+                                        handleAction(
+                                          () => onRevoke!(invitation.id),
+                                          invitation.id,
+                                        )
+                                      }
+                                      variant="destructive"
+                                    >
+                                      <Trash2 className="size-4" />
+                                      {t("team.revoke")}
+                                    </DropdownMenuItem>
+                                  </>
+                                )}
+                              </DropdownMenuContent>
+                            </DropdownMenu>
+                          )
+                        })()}
+                      </div>
+                     {invitation.link &&
+                       (invitation.status === "expired" ||
+                         invitation.status === "revoked") && (
+                       <div className="flex items-center gap-2 rounded-md border bg-muted/30 p-2">
+                         <code className="wrap-break-word truncate text-wrap text-xs">
+                           {invitation.link}
+                         </code>
+                       </div>
+                     )}
+                      {invitation.status === "pending_approval" && onApproveLink && (
+                        <div className="xl:hidden flex justify-end items-center gap-2">
+                          <Select
+                            value={approveRoles[invitation.id] ?? "member"}
+                           onValueChange={(value: "admin" | "member" | "viewer") =>
+                             setApproveRoles((prev) => ({ ...prev, [invitation.id]: value }))
+                           }
+                         >
+                           <SelectTrigger className="h-8 w-24" size="sm">
+                             <SelectValue />
+                           </SelectTrigger>
+                           <SelectContent>
+                             <SelectItem value="member">
+                               {t("team.role.member")}
+                             </SelectItem>
+                             <SelectItem value="admin">
+                               {t("team.role.admin")}
+                             </SelectItem>
+                             <SelectItem value="viewer">
+                               {t("team.role.viewer")}
+                             </SelectItem>
+                           </SelectContent>
+                         </Select>
+                         <Button
+                           disabled={actionLoading === invitation.id}
+                           onClick={() =>
+                             handleApprove(invitation.id, approveRoles[invitation.id] ?? "member")
+                           }
+                           size="sm"
+                           type="button"
+                         >
+                           {actionLoading === invitation.id ? (
+                             <Loader2 className="size-4 animate-spin" />
+                           ) : (
+                             <Check className="size-4" />
+                           )}
+                           {t("team.invite.approve")}
+                         </Button>
+                         <DropdownMenu>
+                           <DropdownMenuTrigger asChild>
+                             <Button
+                               aria-label="More options"
+                               size="icon"
+                               type="button"
+                               variant="ghost"
+                             >
+                               <X className="size-4" />
+                             </Button>
+                           </DropdownMenuTrigger>
+                           <DropdownMenuContent
+                             align="end"
+                             collisionPadding={8}
+                             sideOffset={4}
+                           >
+                             <DropdownMenuItem
+                               onSelect={() =>
+                                 handleAction(
+                                   () => onRevoke!(invitation.id),
+                                   invitation.id,
+                                 )
+                               }
+                               variant="destructive"
+                             >
+                               <Trash2 className="size-4" />
+                               {t("team.revoke")}
+                             </DropdownMenuItem>
+                           </DropdownMenuContent>
+                         </DropdownMenu>
+                       </div>
+                     )}
+                   </div>
+                ))}
+              </div>
+            </>
+          )}
+
+          {invitations.length === 0 && (
+            <Empty>
+              <EmptyHeader>
+                <EmptyMedia variant="icon">
+                  <Mail className="size-6" />
+                </EmptyMedia>
+                <EmptyTitle>{t("team.invite.noInvitations")}</EmptyTitle>
+                <EmptyDescription>
+                  {t("team.invite.createFirst")}
+                </EmptyDescription>
+              </EmptyHeader>
+            </Empty>
+          )}
+        </div>
       </CardContent>
     </Card>
-  );
-}
+  )
+}