@m5kdev/web-ui 0.1.0

package/src/modules/auth/components/OrganizationSettingsRoute.tsx

@@ -0,0 +1,280 @@
+import { Button, Card, CardBody, CardHeader, Chip, Input, Spinner, Textarea } from "@heroui/react";
+import { authClient } from "@m5kdev/frontend/modules/auth/auth.lib";
+import { useSession } from "@m5kdev/frontend/modules/auth/hooks/useSession";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { toast } from "sonner";
+
+type OrganizationDetails = {
+  id: string;
+  name: string;
+  slug: string;
+  logo?: string | null;
+  metadata?: Record<string, unknown> | null;
+};
+
+export type OrganizationSettingsRouteLabels = {
+  settingsTitle: string;
+  settingsDescription: string;
+  settingsNoActive: string;
+  settingsManageOnly: string;
+  formName: string;
+  formSlug: string;
+  formMetadata: string;
+  formMetadataInvalidJson: string;
+  formMetadataInvalid: string;
+  saveButton: string;
+  updateSuccess: string;
+  updateError: string;
+  loadError: string;
+};
+
+export type OrganizationSettingsRouteProps = {
+  managerRoles?: string[];
+  onInvalidateScopedQueries?: () => void | Promise<void>;
+};
+
+function OrganizationStateCard({ title, message }: { title: string; message: string }) {
+  return (
+    <div className="p-6">
+      <Card>
+        <CardHeader className="text-lg font-semibold">{title}</CardHeader>
+        <CardBody>{message}</CardBody>
+      </Card>
+    </div>
+  );
+}
+
+function useOrganizationAccess({
+  managerRoles,
+  onInvalidateScopedQueries,
+}: Pick<OrganizationSettingsRouteProps, "managerRoles" | "onInvalidateScopedQueries">) {
+  const { data: session, registerSession } = useSession();
+  const queryClient = useQueryClient();
+
+  const activeOrganizationId = session?.session.activeOrganizationId ?? "";
+  const activeOrganizationRole =
+    (session?.session as { activeOrganizationRole?: string } | undefined)?.activeOrganizationRole ??
+    "";
+  const managerRoleSet = useMemo(() => new Set(managerRoles ?? ["admin", "owner"]), [managerRoles]);
+  const canManageOrganization = managerRoleSet.has(activeOrganizationRole);
+
+  const refreshOrganizationQueries = useCallback(async () => {
+    await Promise.allSettled([
+      queryClient.invalidateQueries({ queryKey: ["auth-organization-list"] }),
+      queryClient.invalidateQueries({
+        queryKey: ["auth-organization-details", activeOrganizationId],
+      }),
+      queryClient.invalidateQueries({
+        queryKey: ["auth-organization-members", activeOrganizationId],
+      }),
+      queryClient.invalidateQueries({
+        queryKey: ["auth-organization-invitations", activeOrganizationId],
+      }),
+    ]);
+
+    registerSession(() => {
+      void onInvalidateScopedQueries?.();
+    });
+  }, [activeOrganizationId, onInvalidateScopedQueries, queryClient, registerSession]);
+
+  return {
+    activeOrganizationId,
+    activeOrganizationRole,
+    canManageOrganization,
+    refreshOrganizationQueries,
+  };
+}
+
+function useOrganizationConfig() {
+  const { t } = useTranslation();
+
+  const translatedLabels = useMemo<OrganizationSettingsRouteLabels>(
+    () => ({
+      settingsTitle: t("web-ui:organization.settings.title"),
+      settingsDescription: t("web-ui:organization.settings.description"),
+      settingsNoActive: t("web-ui:organization.settings.noActive"),
+      settingsManageOnly: t("web-ui:organization.settings.manageOnly"),
+      formName: t("web-ui:organization.settings.form.name"),
+      formSlug: t("web-ui:organization.settings.form.slug"),
+      formMetadata: t("web-ui:organization.settings.form.metadata"),
+      formMetadataInvalidJson: t("web-ui:organization.settings.form.metadataInvalidJson"),
+      formMetadataInvalid: t("web-ui:organization.settings.form.metadataInvalid"),
+      saveButton: t("web-ui:organization.settings.button.save"),
+      updateSuccess: t("web-ui:organization.settings.updateSuccess"),
+      updateError: t("web-ui:organization.settings.updateError"),
+      loadError: t("web-ui:organization.settings.loadError"),
+    }),
+    [t]
+  );
+
+  const translatedRoleLabels = useMemo<Record<string, string>>(
+    () => ({
+      member: t("web-ui:organization.roles.member"),
+      admin: t("web-ui:organization.roles.admin"),
+      owner: t("web-ui:organization.roles.owner"),
+    }),
+    [t]
+  );
+
+  return { resolvedLabels: translatedLabels, resolvedRoleLabels: translatedRoleLabels };
+}
+
+export function OrganizationSettingsRoute({
+  managerRoles,
+  onInvalidateScopedQueries,
+}: OrganizationSettingsRouteProps) {
+  const { resolvedLabels, resolvedRoleLabels } = useOrganizationConfig();
+
+  const {
+    activeOrganizationId,
+    activeOrganizationRole,
+    canManageOrganization,
+    refreshOrganizationQueries,
+  } = useOrganizationAccess({ managerRoles, onInvalidateScopedQueries });
+
+  const [organizationName, setOrganizationName] = useState("");
+  const [organizationSlug, setOrganizationSlug] = useState("");
+  const [organizationMetadata, setOrganizationMetadata] = useState("{}");
+  const [isSavingOrganization, setIsSavingOrganization] = useState(false);
+
+  const organizationQuery = useQuery({
+    queryKey: ["auth-organization-details", activeOrganizationId],
+    enabled: Boolean(activeOrganizationId && canManageOrganization),
+    queryFn: async () => {
+      const { data, error } = await authClient.organization.getFullOrganization({
+        query: {
+          organizationId: activeOrganizationId,
+          membersLimit: 200,
+        },
+      });
+      if (error) {
+        throw new Error(error.message ?? resolvedLabels.loadError);
+      }
+      return data as OrganizationDetails | null;
+    },
+  });
+
+  useEffect(() => {
+    const organization = organizationQuery.data;
+    if (!organization) {
+      return;
+    }
+
+    setOrganizationName(organization.name ?? "");
+    setOrganizationSlug(organization.slug ?? "");
+    setOrganizationMetadata(JSON.stringify(organization.metadata ?? {}, null, 2));
+  }, [organizationQuery.data]);
+
+  const onUpdateOrganization = async () => {
+    if (!canManageOrganization || !activeOrganizationId) {
+      return;
+    }
+
+    try {
+      setIsSavingOrganization(true);
+      let parsedMetadata: Record<string, unknown>;
+      try {
+        parsedMetadata = organizationMetadata.trim()
+          ? (JSON.parse(organizationMetadata) as Record<string, unknown>)
+          : {};
+      } catch (parseError) {
+        const message =
+          parseError instanceof SyntaxError
+            ? resolvedLabels.formMetadataInvalidJson
+            : parseError instanceof Error
+              ? parseError.message
+              : resolvedLabels.formMetadataInvalid;
+        throw new Error(message);
+      }
+
+      const { error } = await authClient.organization.update({
+        organizationId: activeOrganizationId,
+        data: {
+          name: organizationName.trim(),
+          slug: organizationSlug.trim(),
+          metadata: parsedMetadata,
+        },
+      });
+
+      if (error) {
+        throw new Error(error.message ?? resolvedLabels.updateError);
+      }
+
+      await refreshOrganizationQueries();
+      toast.success(resolvedLabels.updateSuccess);
+    } catch (error) {
+      toast.error(error instanceof Error ? error.message : resolvedLabels.updateError);
+    } finally {
+      setIsSavingOrganization(false);
+    }
+  };
+
+  if (!activeOrganizationId) {
+    return (
+      <OrganizationStateCard
+        title={resolvedLabels.settingsTitle}
+        message={resolvedLabels.settingsNoActive}
+      />
+    );
+  }
+
+  if (!canManageOrganization) {
+    return (
+      <OrganizationStateCard
+        title={resolvedLabels.settingsTitle}
+        message={resolvedLabels.settingsManageOnly}
+      />
+    );
+  }
+
+  if (organizationQuery.isLoading) {
+    return (
+      <div className="p-6 flex justify-center">
+        <Spinner />
+      </div>
+    );
+  }
+
+  return (
+    <div className="p-6">
+      <Card>
+        <CardHeader className="flex items-center justify-between">
+          <div className="flex flex-col">
+            <h2 className="text-xl font-semibold">{resolvedLabels.settingsTitle}</h2>
+            <p className="text-sm text-default-500">{resolvedLabels.settingsDescription}</p>
+          </div>
+          <Chip variant="flat" color="primary">
+            {resolvedRoleLabels[activeOrganizationRole] ??
+              activeOrganizationRole ??
+              resolvedRoleLabels.member}
+          </Chip>
+        </CardHeader>
+        <CardBody className="grid gap-3">
+          <Input
+            label={resolvedLabels.formName}
+            value={organizationName}
+            onValueChange={setOrganizationName}
+          />
+          <Input
+            label={resolvedLabels.formSlug}
+            value={organizationSlug}
+            onValueChange={setOrganizationSlug}
+          />
+          <Textarea
+            label={resolvedLabels.formMetadata}
+            value={organizationMetadata}
+            onValueChange={setOrganizationMetadata}
+            minRows={4}
+          />
+          <div className="flex justify-end">
+            <Button color="primary" isLoading={isSavingOrganization} onPress={onUpdateOrganization}>
+              {resolvedLabels.saveButton}
+            </Button>
+          </div>
+        </CardBody>
+      </Card>
+    </div>
+  );
+}

package/src/modules/auth/components/OrganizationSwitcher.tsx

@@ -0,0 +1,148 @@
+import { Button, Select, SelectItem } from "@heroui/react";
+import { authClient } from "@m5kdev/frontend/modules/auth/auth.lib";
+import { useSession } from "@m5kdev/frontend/modules/auth/hooks/useSession";
+import { useQuery } from "@tanstack/react-query";
+import { Building2 } from "lucide-react";
+import { useCallback, useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Link } from "react-router";
+import { toast } from "sonner";
+import { useSidebar } from "#components/ui/sidebar";
+import { cn } from "#utils";
+
+type OrganizationOption = {
+  id: string;
+  name: string;
+  slug: string;
+};
+
+export type OrganizationSwitcherProps = {
+  onInvalidateScopedQueries?: () => void | Promise<void>;
+  managerRoles?: string[];
+  managerPath?: string;
+  fallbackPath?: string;
+};
+
+export function OrganizationSwitcher({
+  onInvalidateScopedQueries,
+  managerRoles = ["admin", "owner"],
+  managerPath = "/organization/members",
+  fallbackPath = "/",
+}: OrganizationSwitcherProps) {
+  const { t } = useTranslation();
+  const { data: session, registerSession } = useSession();
+  const { open } = useSidebar();
+  const [isSwitching, setIsSwitching] = useState(false);
+  const activeOrganizationId = session?.session.activeOrganizationId ?? null;
+  const activeOrganizationRole =
+    (session?.session as { activeOrganizationRole?: string } | undefined)?.activeOrganizationRole ??
+    "";
+  const managerRoleSet = useMemo(() => new Set(managerRoles), [managerRoles]);
+  const canManageOrganization = managerRoleSet.has(activeOrganizationRole);
+
+  const {
+    data: organizations = [],
+    isError,
+    error,
+    refetch,
+  } = useQuery({
+    queryKey: ["auth-organization-list"],
+    queryFn: async () => {
+      const { data, error } = await authClient.organization.list();
+      if (error) {
+        throw new Error(
+          error.message ?? t("web-ui:organization.switcher.failedToLoadOrganizations")
+        );
+      }
+      return (data ?? []) as OrganizationOption[];
+    },
+  });
+
+  const handleSwitchOrganization = useCallback(
+    async (organizationId: string) => {
+      if (!organizationId || organizationId === activeOrganizationId || isSwitching) {
+        return;
+      }
+
+      try {
+        setIsSwitching(true);
+        const { error } = await authClient.organization.setActive({ organizationId });
+        if (error) {
+          throw new Error(
+            error.message ?? t("web-ui:organization.switcher.failedToSwitchOrganization")
+          );
+        }
+
+        registerSession(() => {
+          void onInvalidateScopedQueries?.();
+        });
+        toast.success(t("web-ui:organization.switcher.organizationSwitched"));
+      } catch (error) {
+        toast.error(
+          error instanceof Error
+            ? error.message
+            : t("web-ui:organization.switcher.failedToSwitchOrganization")
+        );
+      } finally {
+        setIsSwitching(false);
+      }
+    },
+    [activeOrganizationId, isSwitching, onInvalidateScopedQueries, registerSession, t]
+  );
+
+  if (!open) {
+    return (
+      <Button
+        as={Link}
+        to={canManageOrganization ? managerPath : fallbackPath}
+        variant="light"
+        size="sm"
+        isIconOnly
+        aria-label={t("web-ui:organization.switcher.label")}
+      >
+        <Building2 className="h-4 w-4" />
+      </Button>
+    );
+  }
+
+  if (isError) {
+    return (
+      <div className="mb-4 flex flex-col gap-2">
+        <p className="text-sm text-destructive">
+          {error instanceof Error
+            ? error.message
+            : t("web-ui:organization.switcher.failedToLoadOrganizations")}
+        </p>
+        <Button size="sm" variant="flat" onPress={() => void refetch()}>
+          {t("web-ui:organization.switcher.retry")}
+        </Button>
+      </div>
+    );
+  }
+
+  return (
+    <div className="mb-4">
+      <Select
+        size="sm"
+        label={t("web-ui:organization.switcher.label")}
+        selectedKeys={activeOrganizationId ? [activeOrganizationId] : []}
+        disallowEmptySelection
+        isDisabled={isSwitching || organizations.length === 0}
+        onSelectionChange={(keys) => {
+          const selectedOrganizationId = Array.from(keys as Set<string>)[0];
+          if (selectedOrganizationId) {
+            void handleSwitchOrganization(selectedOrganizationId);
+          }
+        }}
+        classNames={{
+          trigger: cn("min-h-10"),
+          value: cn("text-sm"),
+        }}
+      >
+        {organizations.map((organization) => (
+          <SelectItem key={organization.id}>{organization.name}</SelectItem>
+        ))}
+      </Select>
+    </div>
+  );
+}

package/src/modules/auth/components/ProfileRoute.tsx

@@ -0,0 +1,104 @@
+import { Button, Card, CardBody, CardHeader, Input } from "@heroui/react";
+
+import { authClient } from "@m5kdev/frontend/modules/auth/auth.lib";
+import { useSession } from "@m5kdev/frontend/modules/auth/hooks/useSession";
+import { useForm } from "react-hook-form";
+import { useTranslation } from "react-i18next";
+import { toast } from "sonner";
+import { z } from "zod";
+import { AvatarUpload } from "#components/AvatarUpload";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "#components/ui/form";
+
+const profileSchema = z.object({
+  name: z.string().min(2, "Name must be at least 2 characters"),
+  image: z.string().nullable(),
+});
+
+type ProfileFormValues = z.infer<typeof profileSchema>;
+
+export function ProfileRoute() {
+  const { t } = useTranslation();
+  const { data: session } = useSession();
+
+  const form = useForm<ProfileFormValues>({
+    defaultValues: {
+      name: session?.user?.name || "",
+      image: session?.user?.image || null,
+    },
+  });
+
+  function onSubmit(data: ProfileFormValues) {
+    authClient
+      .updateUser(data)
+      .then(() => {
+        toast.success(t("web-ui:profile.updated"), {
+          description: t("web-ui:profile.updateDescription"),
+        });
+      })
+      .catch(() => {
+        toast.error(t("web-ui:profile.error"), {
+          description: t("web-ui:profile.errorDescription"),
+        });
+      });
+  }
+
+  return (
+    <div className="container py-10 px-4">
+      <Card>
+        <CardHeader className="flex flex-col gap-1">
+          <p className="text-xl font-semibold">{t("web-ui:profile.settings.title")}</p>
+          <p className="text-sm text-default-600">{t("web-ui:profile.settings.description")}</p>
+        </CardHeader>
+        <CardBody>
+          <Form {...form}>
+            <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
+              <div className="flex justify-center">
+                <FormField
+                  control={form.control}
+                  name="image"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormControl>
+                        <AvatarUpload
+                          currentAvatarUrl={field.value}
+                          onUploadComplete={(url) => {
+                            console.log(url);
+                            field.onChange(url);
+                          }}
+                        />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+              </div>
+
+              <FormField
+                control={form.control}
+                name="name"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Name</FormLabel>
+                    <FormControl>
+                      <Input placeholder={t("web-ui:profile.placeholders.name")} {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <Button type="submit">Save Changes</Button>
+            </form>
+          </Form>
+        </CardBody>
+      </Card>
+    </div>
+  );
+}