org profile setup

apps/storage/src/api/avatar.ts

@@ -28,7 +28,7 @@ export const avatarApi = new Hono<Ctx>().post(
           const types = [
             { name: 'orgMember', value: 'omp' }, // the naming is wrong here, it should be 'orgMemberProfile', but keeping it as is for now
             { name: 'org', value: 'o' },
-            { name: 'contact', value: 'c' },
+            { name: 'contact', value: 'k' },
             { name: 'team', value: 't' }
           ] as const;
           return types.find((ty) => ty.name === t)!;

apps/web/app/[orgShortCode]/settings/org/page.tsx

@@ -0,0 +1,171 @@
+'use client';
+
+import { useRouter } from 'next/navigation';
+import { useState, useMemo } from 'react';
+import {
+  Flex,
+  Heading,
+  Button,
+  Text,
+  TextField,
+  Spinner
+} from '@radix-ui/themes';
+import { Camera, Save } from 'lucide-react';
+import { api } from '@/lib/trpc';
+import { useGlobalStore } from '@/providers/global-store-provider';
+import useLoading from '@/hooks/use-loading';
+import { cn, generateAvatarUrl } from '@/lib/utils';
+import useAwaitableModal from '@/hooks/use-awaitable-modal';
+import { AvatarModal } from '@/app/join/profile/avatar-modal';
+
+export default function ProfileComponent() {
+  const router = useRouter();
+  const orgShortCode = useGlobalStore((state) => state.currentOrg.shortCode);
+  const currentOrg = useGlobalStore((state) => state.currentOrg);
+  const updateOrg = useGlobalStore((state) => state.updateOrg);
+
+  const { data: isAdmin, isLoading: adminLoading } =
+    api.org.users.members.isOrgMemberAdmin.useQuery({
+      orgShortCode
+    });
+
+  const [orgNameValue, setOrgNameValue] = useState<string>(currentOrg.name);
+
+  const avatarUrl = useMemo(() => {
+    return generateAvatarUrl({
+      publicId: currentOrg.publicId,
+      avatarTimestamp: currentOrg.avatarTimestamp,
+      size: '5xl'
+    });
+  }, [currentOrg.publicId, currentOrg.avatarTimestamp]);
+
+  const [AvatarModalRoot, avatarModalOpen] = useAwaitableModal(AvatarModal, {
+    publicId: currentOrg.publicId
+  });
+
+  const {
+    error: avatarError,
+    loading: avatarLoading,
+    run: openModal
+  } = useLoading(async () => {
+    const avatarTimestamp = new Date(
+      await avatarModalOpen({
+        publicId: currentOrg.publicId
+      })
+    );
+    updateOrg(orgShortCode, { avatarTimestamp });
+  });
+
+  const updateOrgProfileApi = api.org.setup.profile.setOrgProfile.useMutation();
+  const { loading: saveLoading, run: saveOrgProfile } = useLoading(async () => {
+    await updateOrgProfileApi.mutateAsync({
+      orgName: orgNameValue,
+      orgShortCode
+    });
+    updateOrg(orgShortCode, { name: orgNameValue });
+  });
+
+  if (adminLoading) {
+    return (
+      <Flex
+        align="center"
+        justify="center"
+        className="h-fit">
+        <Text
+          weight="bold"
+          className="flex items-center gap-2 p-4">
+          <Spinner loading /> Loading...
+        </Text>
+      </Flex>
+    );
+  }
+
+  if (!adminLoading && !isAdmin) {
+    router.push(`/${orgShortCode}/settings`);
+  }
+
+  return (
+    <Flex
+      className="p-4"
+      direction="column"
+      gap="3">
+      <Heading
+        as="h1"
+        size="5">
+        Organization Profile
+      </Heading>
+      <Flex
+        className="my-4"
+        direction="column"
+        gap="5">
+        <Button
+          variant="ghost"
+          size="4"
+          loading={avatarLoading}
+          className="mx-0 aspect-square h-full max-h-[100px] w-full max-w-[100px] cursor-pointer rounded-full p-0"
+          onClick={() => {
+            openModal({});
+          }}>
+          <Flex
+            className={cn(
+              avatarUrl ? 'bg-cover' : 'from-yellow-9 to-red-9',
+              'h-full w-full rounded-full bg-gradient-to-r *:opacity-0 *:transition-opacity *:duration-300 *:ease-in-out *:hover:opacity-100'
+            )}
+            style={{
+              backgroundImage: avatarUrl ? `url(${avatarUrl})` : undefined
+            }}>
+            <Flex
+              align="center"
+              justify="center"
+              direction="column"
+              className="bg-gray-12/50 h-full w-full rounded-full">
+              <Camera size={24} />
+              <Text
+                size="2"
+                weight="bold">
+                Upload
+              </Text>
+            </Flex>
+          </Flex>
+        </Button>
+        {avatarError && (
+          <Text
+            size="2"
+            color="red">
+            {avatarError.message}
+          </Text>
+        )}
+
+        <Flex gap="2">
+          <label>
+            <Text
+              as="div"
+              size="2"
+              mb="1"
+              weight="bold"
+              className="text-left">
+              Organization Name
+            </Text>
+            <TextField.Root
+              value={orgNameValue}
+              onChange={(e) => setOrgNameValue(e.target.value)}
+            />
+          </label>
+        </Flex>
+        <Flex gap="2">
+          <Button
+            size="2"
+            className="flex-1"
+            loading={saveLoading}
+            onClick={() =>
+              saveOrgProfile({ clearData: true, clearError: true })
+            }>
+            <Save size={20} />
+            Save
+          </Button>
+        </Flex>
+      </Flex>
+      <AvatarModalRoot />
+    </Flex>
+  );
+}

apps/web/app/join/profile/avatar-modal.tsx

@@ -22,7 +22,7 @@ export function AvatarModal({
   publicId
 }: ModalComponent<
   {
-    publicId: TypeId<'orgMemberProfile'>;
+    publicId: TypeId<'orgMemberProfile' | 'org' | 'contacts' | 'teams'>;
   },
   string
 >) {
@@ -54,7 +54,16 @@ export function AvatarModal({
     setUploading(true);
     const formData = new FormData();
     formData.append('file', croppedFile.current);
-    formData.append('type', 'orgMember');
+    formData.append(
+      'type',
+      publicId.startsWith('omp_')
+        ? 'orgMember'
+        : publicId.startsWith('o_')
+          ? 'org'
+          : publicId.startsWith('k_')
+            ? 'contact'
+            : 'team'
+    );
     formData.append('publicId', publicId);
     uploadTracker({
       formData,