DEAR-136

app/(main)/(home)/page.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import * as React from 'react';
+import { useRouter } from 'next/navigation';
 import { useAuth } from '@providers/AuthProvider';
 import { Activity, Bike, Component, CircleSlash2, Target, Users, Annoyed, Frown, Laugh, Smile } from 'lucide-react';
 import {
@@ -22,6 +23,7 @@ import { HappinessSurvey, WorktypeSurvey, EmotionSurvey, Widget, AlertWidget, Sp
 
 const Home: React.FC = () => {
   const { user, isLoading, error } = useAuth();
+  const router = useRouter();
   const { data: emotions } = useSWRClient<Emotion[]>('/v1/emotions');
   const { data: workKinds } = useSWRClient<WorkKindAndTeamName[]>('/v1/workkinds/team');
   const { data, mutate } = useSWRClient<DashboardDTO>('/v1/dashboard/data');
@@ -52,6 +54,12 @@ const Home: React.FC = () => {
     return <Laugh className="h-16 w-16 group-hover:animate-spin" />;
   };
 
+  React.useEffect(() => {
+    if (!isLoading && user && !user.hasTeam) {
+      router.push('/onboarding');
+    }
+  }, [isLoading, user, router]);
+
   if (isLoading) return <Loading />;
   if (error) return <Error errorMessage="It seems there was a problem loading your account." action="/" showContact />;
 

app/(main)/about/components/FAQAccordion.tsx

@@ -31,12 +31,8 @@ const FAQAccordion: React.FC = () => (
     </AccordionItem>
 
     <AccordionItem value="item-4">
-      <AccordionTrigger>How can I delete my account? TODO</AccordionTrigger>
+      <AccordionTrigger>How can I delete my account?</AccordionTrigger>
       <AccordionContent>
-        To delete your account, please contact the server admins or host via our Discord channel. Once deleted, all your
-        data will be permanently removed from our servers. If you need assistance, please contact our support team.{' '}
-        <br />
-        or : <br />
         To delete your account, go to your account settings and follow the instructions for account deletion. Once
         deleted, all your data will be permanently removed from our servers. If you need assistance, please contact our
         support team.

app/(main)/settings/account/page.tsx

@@ -0,0 +1,65 @@
+'use client';
+
+import * as React from 'react';
+import { useAuth } from '@providers/AuthProvider';
+import { useRouter } from 'next/navigation';
+import {
+  AlertDialog,
+  AlertDialogDescription,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogFooter,
+  AlertDialogCancel,
+  AlertDialogAction,
+} from '@components/ui/AltertDialog/AlertDialog';
+import { Button } from '@components/ui/Buttons/Button';
+import Separator from '@components/ui/Separator/Separator';
+import useUserClient from '@hooks/useUserClient';
+
+const AccountPage: React.FC = () => {
+  const { userId } = useAuth();
+  const router = useRouter();
+  const { deleteUser } = useUserClient();
+
+  const handleDelete = async () => {
+    try {
+      await deleteUser(userId);
+      router.replace('/login');
+    } catch (error) {
+      console.warn('Error: ', error);
+    }
+  };
+
+  return (
+    <AlertDialog>
+      <div className="space-y-4">
+        <div className="space-y-1">
+          <h2>Delete account</h2>
+          <p className="text-sm font-thin">Delete your yappi account permanently.</p>
+        </div>
+        <Separator className="mt-2" />
+        <AlertDialogTrigger asChild>
+          <Button variant="destructive">Delete account</Button>
+        </AlertDialogTrigger>
+      </div>
+      <AlertDialogContent className="max-w-[400px]">
+        <AlertDialogHeader>
+          <AlertDialogTitle>
+            <h3>Are you sure?</h3>
+          </AlertDialogTitle>
+          <AlertDialogDescription>
+            <p className="text-sm font-thin">Deleting your account is irreversible. All your data will be lost.</p>
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel>Cancel</AlertDialogCancel>
+          <AlertDialogAction onClick={() => handleDelete()}>Delete</AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+};
+
+export default AccountPage;

app/(main)/settings/components/ProfileForm.tsx

@@ -28,7 +28,7 @@ const FormSchema = z.object({
   provider: z.string().nonempty('Provider is required'),
   name: z.string().nonempty('Name is required'),
   email: z.string().nonempty('Email is required').email('Please enter a valid email'),
-  githubUserName: z.string(),
+  githubUserName: z.string().optional(),
 });
 
 type FormValue = z.infer<typeof FormSchema>;
@@ -67,7 +67,11 @@ const ProfileForm: React.FC = () => {
 
   const onSubmit: SubmitHandler<FormValue> = async (data) => {
     try {
-      await update({ id: userId, username: data.username, githubUserName: data.githubUserName });
+      await update({
+        id: userId,
+        username: data.username,
+        githubUserName: data.githubUserName ? data.githubUserName : undefined,
+      });
       toast.success('Profile has been updated');
     } catch (error) {
       if (axios.isAxiosError(error)) {
@@ -82,7 +86,7 @@ const ProfileForm: React.FC = () => {
 
   return (
     <Form {...form}>
-      <form onSubmit={form.handleSubmit(onSubmit)} className="w-2/3 space-y-8">
+      <form onSubmit={form.handleSubmit(onSubmit)} className="w-2/3 space-y-4">
         <FormField
           control={form.control}
           name="username"
@@ -96,6 +100,19 @@ const ProfileForm: React.FC = () => {
             </FormItem>
           )}
         />
+        <FormField
+          control={form.control}
+          name="githubUserName"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>GitHub Username</FormLabel>
+              <FormControl>
+                <Input className="resize-none text-sm font-light" placeholder="Github Username" {...field} />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
         <FormField
           control={form.control}
           name="provider"
@@ -144,19 +161,6 @@ const ProfileForm: React.FC = () => {
             </FormItem>
           )}
         />
-        <FormField
-          control={form.control}
-          name="githubUserName"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>Github Username</FormLabel>
-              <FormControl>
-                <Input className="resize-none text-sm font-light" placeholder="Github Username" {...field} />
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
         <Button type="submit">Update</Button>
       </form>
     </Form>

app/(main)/settings/layout.tsx

@@ -11,6 +11,10 @@ const settingsSidebarNavItems = [
     title: 'Profile',
     href: '/settings',
   },
+  {
+    title: 'Account',
+    href: '/settings/account',
+  },
   {
     title: 'Appearance',
     href: '/settings/appearance',

app/(main)/team/components/TeamMembersTable/columns.tsx

@@ -4,6 +4,7 @@ import { TeamMemberWithUser } from '@/types/TeamMemberType';
 import { ColumnDef } from '@tanstack/react-table';
 import { Badge } from '@components/ui/Badge/Badge';
 import cn from '@/lib/utils';
+import { format } from 'date-fns';
 import DataTableColumnHeader from '@components/ui/Table/DataTableColumnHeader';
 import { Asterisk } from 'lucide-react';
 
@@ -26,6 +27,15 @@ export const columns = (currentUserId: number): ColumnDef<TeamMemberWithUser>[]
       return username || '-';
     },
   },
+  {
+    id: 'joinedAt',
+    accessorKey: 'joinedAt',
+    header: 'Joined At',
+    cell: ({ row }) => {
+      const { joinedAt } = row.original;
+      return joinedAt ? format(new Date(joinedAt), 'yyyy-MM-dd') : '-';
+    },
+  },
   {
     accessorKey: 'role',
     header: 'Role',

components/Header/Account.tsx

@@ -107,7 +107,7 @@ const Account: React.FC = () => {
               <h3>Are you sure?</h3>
             </AlertDialogTitle>
             <AlertDialogDescription>
-              <p className="text-xs font-thin">Log out of your yappi account.</p>
+              <p className="text-sm font-thin">Log out of your yappi account.</p>
             </AlertDialogDescription>
           </AlertDialogHeader>
           <AlertDialogFooter>

hooks/useUserClient.ts

@@ -13,11 +13,15 @@ const useUserClient = () => {
   const update = async (values: UpdatedUser): Promise<AxiosResponse<UpdatedUser>> =>
     client.put(`/v1/user/update`, values);
 
+  const deleteUser = async (userId?: string): Promise<AxiosResponse<void>> =>
+    client.delete(`/v1/user/delete/${userId}`);
+
   const getUserById = async (userId: string): Promise<AxiosResponse<User>> => client.get(`/v1/user/${userId}`);
 
   return {
     update,
     getUserById,
+    deleteUser,
   };
 };
 

types/TeamMemberType.ts

@@ -10,6 +10,7 @@ export interface TeamMemberWithUser {
   id: number;
   user: User;
   teamId: number;
+  joinedAt: string;
   role: string;
   active: boolean;
 }

types/UserType.ts

@@ -10,7 +10,7 @@ export interface User {
 export interface UpdatedUser {
   id: string | undefined;
   username: string;
-  githubUserName: string;
+  githubUserName: string | undefined;
 }
 
 export interface UserWithProvider {