feat: move settings creation flows into dialogs

modules/settings/components/OrganizationDetailClient.tsx

@@ -10,6 +10,7 @@ import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/com
 import { Input } from "@/components/ui/input";
 import type { ApiResult } from "@/modules/core/server/api";
 import type { Organization, OrganizationInvitation, RoleDefinition } from "@/modules/core/types";
+import { getInviteHref, OrganizationInviteDialog } from "@/modules/settings/components/OrganizationInviteDialog";
 
 type OrganizationDetailClientProps = {
   invitations: OrganizationInvitation[];
@@ -17,21 +18,15 @@ type OrganizationDetailClientProps = {
   roles: RoleDefinition[];
 };
 
-function getInviteHref(token: string): string {
-  return `/register?invite=${encodeURIComponent(token)}`;
-}
-
 export function OrganizationDetailClient({
   invitations,
   organization,
   roles,
 }: OrganizationDetailClientProps): React.ReactElement {
   const router = useRouter();
+  const [isInviteOpen, setIsInviteOpen] = useState(false);
   const [settingsMessage, setSettingsMessage] = useState("");
-  const [inviteMessage, setInviteMessage] = useState("");
   const [isPending, setIsPending] = useState(false);
-  const organizationRoles = roles.filter((role) => role.scope === "organization" && role.organizationId === organization.id && role.isEnabled);
-  const defaultRoleId = organizationRoles.find((role) => role.key === "caregiver")?.id ?? organizationRoles[0]?.id ?? "";
 
   async function handleSettingsSubmit(event: FormEvent<HTMLFormElement>): Promise<void> {
     event.preventDefault();
@@ -64,32 +59,6 @@ export function OrganizationDetailClient({
     router.refresh();
   }
 
-  async function handleInviteSubmit(event: FormEvent<HTMLFormElement>): Promise<void> {
-    event.preventDefault();
-    setInviteMessage("");
-    setIsPending(true);
-    const formData = new FormData(event.currentTarget);
-    const response = await fetch(`/api/organizations/${organization.id}/invitations`, {
-      method: "POST",
-      headers: { "content-type": "application/json" },
-      body: JSON.stringify({
-        email: String(formData.get("email") ?? ""),
-        roleId: String(formData.get("roleId") ?? ""),
-      }),
-    });
-    const result = (await response.json()) as ApiResult<{ invitation: OrganizationInvitation }>;
-    setIsPending(false);
-
-    if (!result.success) {
-      setInviteMessage(result.reason);
-      return;
-    }
-
-    setInviteMessage(`${result.reason}：${getInviteHref(result.invitation.token)}`);
-    event.currentTarget.reset();
-    router.refresh();
-  }
-
   return (
     <div className="grid gap-5 xl:grid-cols-[0.95fr_1.05fr]">
       <Card>
@@ -169,36 +138,17 @@ export function OrganizationDetailClient({
       </Card>
 
       <Card>
-        <CardHeader>
-          <CardTitle>机构邀请</CardTitle>
-          <CardDescription>生成邀请链接后发送给成员；可限定邮箱，也可生成通用邀请。</CardDescription>
+        <CardHeader className="gap-4 md:flex-row md:items-start md:justify-between">
+          <div>
+            <CardTitle>机构邀请</CardTitle>
+            <CardDescription>生成邀请链接后发送给成员；可限定邮箱，也可生成通用邀请。</CardDescription>
+          </div>
+          <Button onClick={() => setIsInviteOpen(true)} type="button">
+            <Send className="size-4" aria-hidden="true" />
+            发起邀请
+          </Button>
         </CardHeader>
         <CardContent className="grid gap-4">
-          <form className="grid gap-3 md:grid-cols-[1fr_1fr_auto]" onSubmit={handleInviteSubmit}>
-            <Input name="email" placeholder="邮箱，可留空" type="email" />
-            <select
-              className="h-11 w-full rounded-md border bg-background px-3 text-sm outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring"
-              defaultValue={defaultRoleId}
-              name="roleId"
-              required
-            >
-              {organizationRoles.map((role) => (
-                <option key={role.id} value={role.id}>
-                  {role.label}
-                </option>
-              ))}
-            </select>
-            <Button disabled={isPending || !defaultRoleId} type="submit">
-              <Send className="size-4" aria-hidden="true" />
-              生成邀请
-            </Button>
-          </form>
-          {inviteMessage ? (
-            <p className="rounded-md bg-secondary px-3 py-2 text-sm text-secondary-foreground" role="status">
-              {inviteMessage}
-            </p>
-          ) : null}
-
           <div className="overflow-x-auto rounded-md border">
             <table className="w-full min-w-[720px] text-sm">
               <thead className="bg-secondary text-left text-xs text-muted-foreground">
@@ -250,6 +200,12 @@ export function OrganizationDetailClient({
           </div>
         </CardContent>
       </Card>
+      <OrganizationInviteDialog
+        onClose={() => setIsInviteOpen(false)}
+        open={isInviteOpen}
+        organization={organization}
+        roles={roles}
+      />
     </div>
   );
 }