Fixed teams settings.

src/app/(main)/teams/[teamId]/settings/team/TeamDeleteForm.tsx

@@ -0,0 +1,43 @@
+import TypeConfirmationForm from 'components/common/TypeConfirmationForm';
+import { useApi, useMessages } from 'components/hooks';
+
+const CONFIRM_VALUE = 'DELETE';
+
+export function TeamDeleteForm({
+  teamId,
+  onSave,
+  onClose,
+}: {
+  teamId: string;
+  onSave?: () => void;
+  onClose?: () => void;
+}) {
+  const { labels, formatMessage } = useMessages();
+  const { del, useMutation } = useApi();
+  const { mutate, error, isPending } = useMutation({
+    mutationFn: () => del(`/teams/${teamId}`),
+  });
+
+  const handleConfirm = async () => {
+    mutate(null, {
+      onSuccess: async () => {
+        onSave?.();
+        onClose?.();
+      },
+    });
+  };
+
+  return (
+    <TypeConfirmationForm
+      confirmationValue={CONFIRM_VALUE}
+      onConfirm={handleConfirm}
+      onClose={onClose}
+      isLoading={isPending}
+      error={error}
+      buttonLabel={formatMessage(labels.delete)}
+      buttonVariant="danger"
+    />
+  );
+}
+
+export default TeamDeleteForm;

src/app/(main)/teams/[teamId]/settings/team/TeamDetails.tsx

@@ -0,0 +1,43 @@
+import { TeamContext } from 'app/(main)/teams/[teamId]/TeamProvider';
+import { useLogin, useMessages } from 'components/hooks';
+import Icons from 'components/icons';
+import PageHeader from 'components/layout/PageHeader';
+import { ROLES } from 'lib/constants';
+import { useContext, useState } from 'react';
+import { Flexbox, Item, Tabs } from 'react-basics';
+import TeamLeaveButton from 'app/(main)/settings/teams/TeamLeaveButton';
+import TeamManage from './TeamManage';
+import TeamEditForm from './TeamEditForm';
+
+export function TeamDetails({ teamId }: { teamId: string }) {
+  const team = useContext(TeamContext);
+  const { formatMessage, labels } = useMessages();
+  const { user } = useLogin();
+  const [tab, setTab] = useState('details');
+
+  const isTeamOwner =
+    !!team?.teamUser?.find(({ userId, role }) => role === ROLES.teamOwner && userId === user.id) &&
+    user.role !== ROLES.viewOnly;
+
+  const canEdit =
+    !!team?.teamUser?.find(
+      ({ userId, role }) =>
+        (role === ROLES.teamOwner || role === ROLES.teamManager) && userId === user.id,
+    ) && user.role !== ROLES.viewOnly;
+
+  return (
+    <Flexbox direction="column">
+      <PageHeader title={team?.name} icon={<Icons.Users />}>
+        {!isTeamOwner && <TeamLeaveButton teamId={team.id} teamName={team.name} />}
+      </PageHeader>
+      <Tabs selectedKey={tab} onSelect={(value: any) => setTab(value)} style={{ marginBottom: 30 }}>
+        <Item key="details">{formatMessage(labels.details)}</Item>
+        {isTeamOwner && <Item key="manage">{formatMessage(labels.manage)}</Item>}
+      </Tabs>
+      {tab === 'details' && <TeamEditForm teamId={teamId} allowEdit={canEdit} />}
+      {tab === 'manage' && <TeamManage teamId={teamId} />}
+    </Flexbox>
+  );
+}
+
+export default TeamDetails;

src/app/(main)/teams/[teamId]/settings/team/TeamEditForm.tsx

@@ -0,0 +1,81 @@
+import {
+  SubmitButton,
+  Form,
+  FormInput,
+  FormRow,
+  FormButtons,
+  TextField,
+  Button,
+  Flexbox,
+  useToasts,
+} from 'react-basics';
+import { getRandomChars } from 'next-basics';
+import { useContext, useRef, useState } from 'react';
+import { useApi, useMessages } from 'components/hooks';
+import { TeamContext } from 'app/(main)/teams/[teamId]/TeamProvider';
+
+const generateId = () => getRandomChars(16);
+
+export function TeamEditForm({ teamId, allowEdit }: { teamId: string; allowEdit?: boolean }) {
+  const team = useContext(TeamContext);
+  const { formatMessage, labels, messages } = useMessages();
+  const { post, useMutation } = useApi();
+  const { mutate, error } = useMutation({
+    mutationFn: (data: any) => post(`/teams/${teamId}`, data),
+  });
+  const ref = useRef(null);
+  const [accessCode, setAccessCode] = useState(team.accessCode);
+  const { showToast } = useToasts();
+  const cloudMode = !!process.env.cloudMode;
+
+  const handleSubmit = async (data: any) => {
+    mutate(data, {
+      onSuccess: async () => {
+        ref.current.reset(data);
+        showToast({ message: formatMessage(messages.saved), variant: 'success' });
+      },
+    });
+  };
+
+  const handleRegenerate = () => {
+    const code = generateId();
+    ref.current.setValue('accessCode', code, {
+      shouldValidate: true,
+      shouldDirty: true,
+    });
+    setAccessCode(code);
+  };
+
+  return (
+    <Form ref={ref} onSubmit={handleSubmit} error={error} values={team}>
+      <FormRow label={formatMessage(labels.teamId)}>
+        <TextField value={teamId} readOnly allowCopy />
+      </FormRow>
+      <FormRow label={formatMessage(labels.name)}>
+        {allowEdit && (
+          <FormInput name="name" rules={{ required: formatMessage(labels.required) }}>
+            <TextField />
+          </FormInput>
+        )}
+        {!allowEdit && team.name}
+      </FormRow>
+      {!cloudMode && allowEdit && (
+        <FormRow label={formatMessage(labels.accessCode)}>
+          <Flexbox gap={10}>
+            <TextField value={accessCode} readOnly allowCopy />
+            {allowEdit && (
+              <Button onClick={handleRegenerate}>{formatMessage(labels.regenerate)}</Button>
+            )}
+          </Flexbox>
+        </FormRow>
+      )}
+      {allowEdit && (
+        <FormButtons>
+          <SubmitButton variant="primary">{formatMessage(labels.save)}</SubmitButton>
+        </FormButtons>
+      )}
+    </Form>
+  );
+}
+
+export default TeamEditForm;

src/app/(main)/teams/[teamId]/settings/team/TeamManage.tsx

@@ -0,0 +1,33 @@
+import { useMessages, useModified } from 'components/hooks';
+import { useRouter } from 'next/navigation';
+import { ActionForm, Button, Modal, ModalTrigger } from 'react-basics';
+import TeamDeleteForm from './TeamDeleteForm';
+
+export function TeamManage({ teamId }: { teamId: string }) {
+  const { formatMessage, labels, messages } = useMessages();
+  const router = useRouter();
+  const { touch } = useModified();
+
+  const handleLeave = async () => {
+    touch('teams');
+    router.push('/settings/teams');
+  };
+
+  return (
+    <ActionForm
+      label={formatMessage(labels.deleteTeam)}
+      description={formatMessage(messages.deleteTeamWarning)}
+    >
+      <ModalTrigger>
+        <Button variant="danger">{formatMessage(labels.delete)}</Button>
+        <Modal title={formatMessage(labels.deleteTeam)}>
+          {(close: () => void) => (
+            <TeamDeleteForm teamId={teamId} onSave={handleLeave} onClose={close} />
+          )}
+        </Modal>
+      </ModalTrigger>
+    </ActionForm>
+  );
+}
+
+export default TeamManage;

src/app/(main)/teams/[teamId]/settings/team/TeamPage.tsx

@@ -0,0 +1,8 @@
+'use client';
+import TeamDetails from './TeamDetails';
+
+export function TeamPage({ teamId }: { teamId: string }) {
+  return <TeamDetails teamId={teamId} />;
+}
+
+export default TeamPage;

src/app/(main)/teams/[teamId]/settings/team/page.tsx

@@ -0,0 +1,10 @@
+import { Metadata } from 'next';
+import TeamPage from './TeamPage';
+
+export default function ({ params: { teamId } }) {
+  return <TeamPage teamId={teamId} />;
+}
+
+export const metadata: Metadata = {
+  title: 'Teams Details',
+};