Settings - WIP

* User account settings
* Workspace settings
* Workspace membership management
*

frontend/src/app/(dashboard)/settings/account/page.tsx

@@ -0,0 +1,23 @@
+'use client';
+
+import AccountNameForm from '@/features/user/components/account-name-form';
+import ChangePassword from "@/features/user/components/change-password";
+import ChangeEmail from "@/features/user/components/change-email";
+import { Separator } from "@/components/ui/separator";
+import React from "react";
+
+export default function Home() {
+
+  return (
+    <>
+      <AccountNameForm />
+
+      <Separator className="my-4" />
+
+      <ChangeEmail />
+
+      <Separator className="my-4" />
+
+      <ChangePassword />
+    </>);
+}

frontend/src/app/(dashboard)/settings/layout.tsx

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+
+export default function SettingsLayout({ children }: { children: ReactNode }) {
+  return (
+    <div className="w-full flex justify-center z-10 flex-shrink-0">
+      <div className={`w-[800px]`}>{children}</div>
+    </div>
+  );
+}

frontend/src/app/(dashboard)/settings/page.tsx

@@ -0,0 +1,14 @@
+'use client';
+
+import { useRouter } from 'next/navigation';
+import { useEffect } from 'react';
+
+export default function Home() {
+  const router = useRouter();
+
+  useEffect(() => {
+    router.push('/settings/account');
+  }, [router]);
+
+  return <></>;
+}

frontend/src/app/(dashboard)/settings/workspace/members/page.tsx

@@ -0,0 +1,27 @@
+"use client";
+
+import { Separator } from "@/components/ui/separator";
+import WorkspaceInviteSection from "@/features/workspace/components/workspace-invite-section";
+import React from "react";
+import WorkspaceInviteDialog from "@/features/workspace/components/workspace-invite-dialog";
+
+const WorkspaceMembersTable = React.lazy(() => import('@/features/workspace/components/workspace-members-table'));
+
+export default function WorkspaceMembers() {
+  return (
+    <>
+      <WorkspaceInviteSection />
+
+      <Separator className="my-8" />
+
+      <div className="space-y-4">
+        <h4 className="font-semibold">Members</h4>
+
+        <WorkspaceInviteDialog />
+
+        <WorkspaceMembersTable />
+
+      </div>
+    </>
+  );
+}

frontend/src/app/(dashboard)/settings/workspace/page.tsx

@@ -0,0 +1,9 @@
+'use client';
+
+import WorkspaceNameForm from "@/features/workspace/components/workspace-name-form";
+
+
+export default function Home() {
+
+  return (<WorkspaceNameForm />);
+}

frontend/src/app/layout.tsx

@@ -3,17 +3,21 @@ import type { Metadata } from 'next'
 import { Inter } from 'next/font/google'
 import { cn } from "@/lib/utils";
 import { ThemeProvider } from "@/components/providers/theme-provider";
-import { Toaster } from "@/components/ui/toaster";
 import { TanstackProvider } from "@/components/providers/tanstack-provider";
+import CustomToaster from "@/components/ui/custom-toaster";
 
 const inter = Inter({ subsets: ['latin'] })
 
 export const metadata: Metadata = {
   title: 'Create Next App',
   description: 'Generated by create next app',
+  viewport: {
+    width: 'device-width',
+    initialScale: 1,
+    maximumScale: 1,
+  },
 }
 
-
 export default function RootLayout({
   children,
 }: {
@@ -26,7 +30,7 @@ export default function RootLayout({
     <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
       <TanstackProvider>
         {children}
-        <Toaster />
+        <CustomToaster />
       </TanstackProvider>
     </ThemeProvider>
     </body>

frontend/src/components/providers/tanstack-provider.tsx

@@ -1,9 +1,16 @@
-"use client"
+'use client'
 
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import React from "react";
+import React from 'react';
 
-const queryClient = new QueryClient();
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      refetchOnMount: false,
+      refetchOnWindowFocus: false
+    }
+  }
+});
 
 export function TanstackProvider({ children }: React.PropsWithChildren) {
   return (

frontend/src/features/auth/components/sign-up-form.tsx

@@ -15,11 +15,10 @@ import { IRegister } from "@/features/auth/types/auth.types";
 
 const formSchema = z.object({
   email: z.string({ required_error: "email is required" }).email({ message: "Invalid email address" }),
-  password: z.string({ required_error: "password is required" }),
+  password: z.string({ required_error: "password is required" }).min(8),
 });
 
-interface UserAuthFormProps extends React.HTMLAttributes<HTMLDivElement> {
+interface UserAuthFormProps extends React.HTMLAttributes<HTMLDivElement> {}
-}
 
 export function SignUpForm({ className, ...props }: UserAuthFormProps) {
   const { register, handleSubmit, formState: { errors } }

frontend/src/features/auth/hooks/use-auth.ts

@@ -1,11 +1,11 @@
 import { useState } from "react";
-import { toast } from "@/components/ui/use-toast";
 import { login, register } from "@/features/auth/services/auth-service";
 import { useRouter } from "next/navigation";
 import { useAtom } from "jotai";
 import { authTokensAtom } from "@/features/auth/atoms/auth-tokens-atom";
 import { currentUserAtom } from "@/features/user/atoms/current-user-atom";
 import { ILogin, IRegister } from "@/features/auth/types/auth.types";
+import toast from "react-hot-toast";
 
 export default function useAuth() {
   const [isLoading, setIsLoading] = useState(false);
@@ -25,10 +25,7 @@ export default function useAuth() {
       router.push("/home");
     } catch (err) {
       setIsLoading(false);
-      toast({
+      toast.error(err.response?.data.message)
-        description: err.response?.data.message,
-        variant: "destructive",
-      });
     }
   };
 
@@ -44,10 +41,7 @@ export default function useAuth() {
       router.push("/home");
     } catch (err) {
       setIsLoading(false);
-      toast({
+      toast.error(err.response?.data.message)
-        description: err.response?.data.message,
-        variant: "destructive",
-      });
     }
   };
 
@@ -57,7 +51,7 @@ export default function useAuth() {
 
   const handleLogout = async () => {
     setAuthToken(null);
-    setCurrentUser('');
+    setCurrentUser(null);
   }
 
   return { signIn: handleSignIn, signUp: handleSignUp, isLoading, hasTokens };

frontend/src/features/user/atoms/current-user-atom.ts

@@ -1,4 +1,6 @@
 import { atom } from "jotai";
+import { atomWithStorage } from "jotai/utils";
+
 import { ICurrentUserResponse } from "@/features/user/types/user.types";
 
-export const currentUserAtom = atom<ICurrentUserResponse | null>(null);
+export const currentUserAtom = atomWithStorage<ICurrentUserResponse | null>("currentUser", null);

frontend/src/features/user/components/account-name-form.tsx

@@ -0,0 +1,91 @@
+'use client';
+
+import { Button } from '@/components/ui/button';
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form';
+import { Input } from '@/components/ui/input';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useAtom } from 'jotai';
+import { focusAtom } from 'jotai-optics';
+import { useForm } from 'react-hook-form';
+import * as z from 'zod';
+import { currentUserAtom } from '../atoms/current-user-atom';
+import { updateUser } from '../services/user-service';
+import { IUser } from '../types/user.types';
+import { useState } from 'react';
+import { Icons } from '@/components/icons';
+import toast from "react-hot-toast";
+
+const profileFormSchema = z.object({
+  name: z.string().min(2).max(40),
+});
+
+type ProfileFormValues = z.infer<typeof profileFormSchema>;
+
+const userAtom = focusAtom(currentUserAtom, (optic) => optic.prop('user'));
+
+export default function AccountNameForm() {
+  const [isLoading, setIsLoading] = useState(false);
+  const [currentUser] = useAtom(currentUserAtom);
+  const [, setUser] = useAtom(userAtom);
+
+  const defaultValues: Partial<ProfileFormValues> = {
+    name: currentUser?.user?.name,
+  };
+
+  const form = useForm<ProfileFormValues>({
+    resolver: zodResolver(profileFormSchema),
+    defaultValues,
+  });
+
+  async function onSubmit(data: Partial<IUser>) {
+    setIsLoading(true);
+
+    try {
+      const updatedUser = await updateUser(data);
+      setUser(updatedUser);
+      toast.success('Updated successfully');
+    } catch (err) {
+      console.log(err);
+      toast.error('Failed to update data.')
+    }
+
+    setIsLoading(false);
+  }
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
+        <FormField
+          control={form.control}
+          name="name"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Name</FormLabel>
+              <FormControl>
+                <Input placeholder="Your name" {...field} />
+              </FormControl>
+              <FormDescription>
+                This is the name that will be displayed on your account and in
+                emails.
+              </FormDescription>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <Button type="submit" disabled={isLoading}>
+          {isLoading && <Icons.spinner className="mr-2 h-4 w-4 animate-spin" />}
+          Save
+        </Button>
+      </form>
+    </Form>
+  );
+}

frontend/src/features/user/components/change-email.tsx

@@ -0,0 +1,120 @@
+"use client";
+
+import { Dialog, DialogTrigger } from "@radix-ui/react-dialog";
+import { Button } from "@/components/ui/button";
+import { DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import * as z from "zod";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
+import { Icons } from "@/components/icons";
+import { useState } from "react";
+import { useAtom } from "jotai";
+import { currentUserAtom } from "@/features/user/atoms/current-user-atom";
+
+
+export default function ChangeEmail() {
+  const [currentUser] = useAtom(currentUserAtom);
+
+  return (
+    <div className="flex items-center justify-between space-x-4 mt-5">
+      <div>
+        <h4 className="text-xl font-medium">Email</h4>
+        <p className="text-sm text-muted-foreground">{currentUser.user.email}</p>
+      </div>
+      <ChangeEmailDialog />
+    </div>
+  );
+}
+
+function ChangeEmailDialog() {
+  return (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button variant="outline">Change email</Button>
+      </DialogTrigger>
+      <DialogContent className="w-[350px]">
+        <DialogHeader>
+          <DialogTitle>
+            Change email
+          </DialogTitle>
+          <DialogDescription>
+            To change your email, you have to enter your password and new email.
+          </DialogDescription>
+        </DialogHeader>
+
+        <ChangePasswordForm />
+
+      </DialogContent>
+    </Dialog>
+
+  );
+}
+
+const changeEmailSchema = z.object({
+  password: z.string({ required_error: "your current password is required" }).min(8),
+  email: z.string({ required_error: "New email is required" }).email()
+});
+
+type ChangeEmailFormValues = z.infer<typeof changeEmailSchema>
+
+function ChangePasswordForm() {
+  const [isLoading, setIsLoading] = useState(false);
+
+  const form = useForm<ChangeEmailFormValues>({
+    resolver: zodResolver(changeEmailSchema),
+    defaultValues: {
+      password: "",
+      email: "",
+    },
+  });
+
+  function onSubmit(data: ChangeEmailFormValues) {
+    setIsLoading(true);
+    console.log(data);
+  }
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+        <FormField
+          control={form.control}
+          name="password"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel className="font-semibold">Password</FormLabel>
+              <FormControl>
+                <Input type="password" autoComplete="password" placeholder="Enter your password" {...field} />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <FormField
+          control={form.control}
+          name="email"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel className="font-semibold">New email</FormLabel>
+              <FormControl>
+                <Input type="email" autoComplete="email" placeholder="Enter your new email" {...field} />
+              </FormControl>
+              <FormDescription>Enter your new preferred email</FormDescription>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <div className="flex justify-end">
+          <Button type="submit" disabled={isLoading}>
+            {isLoading && <Icons.spinner className="mr-2 h-4 w-4 animate-spin" />}
+            Change email
+          </Button>
+        </div>
+
+      </form>
+    </Form>
+  );
+}

frontend/src/features/user/components/change-password.tsx

@@ -0,0 +1,133 @@
+"use client";
+
+import { Dialog, DialogTrigger } from "@radix-ui/react-dialog";
+import { Button } from "@/components/ui/button";
+import { DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import * as z from "zod";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
+import { Icons } from "@/components/icons";
+import { useState } from "react";
+
+export default function ChangePassword() {
+  return (
+    <div className="flex items-center justify-between space-x-4 mt-5">
+      <div>
+        <h4 className="text-xl font-medium">Password</h4>
+        <p className="text-sm text-muted-foreground">You can change your password here.</p>
+      </div>
+      <ChangePasswordDialog />
+    </div>
+  );
+}
+
+function ChangePasswordDialog() {
+  return (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button variant="outline">Change password</Button>
+      </DialogTrigger>
+      <DialogContent className="w-[350px]">
+        <DialogHeader>
+          <DialogTitle>
+            Change password
+          </DialogTitle>
+          <DialogDescription>
+            Your password must be at least a minimum of 8 characters.
+          </DialogDescription>
+        </DialogHeader>
+
+        <ChangePasswordForm />
+
+      </DialogContent>
+    </Dialog>
+
+  );
+}
+
+const changePasswordSchema = z.object({
+  current: z.string({ required_error: "your current password is required" }).min(1),
+  password: z.string({ required_error: "New password is required" }).min(8),
+  confirm_password: z.string({ required_error: "Password confirmation is required" }).min(8),
+}).refine(data => data.password === data.confirm_password, {
+  message: "Your new password and confirmation does not match.",
+  path: ["confirm_password"],
+});
+
+type ChangePasswordFormValues = z.infer<typeof changePasswordSchema>
+
+function ChangePasswordForm() {
+  const [isLoading, setIsLoading] = useState(false);
+
+  const form = useForm<ChangePasswordFormValues>({
+    resolver: zodResolver(changePasswordSchema),
+    defaultValues: {
+      current: "",
+      password: "",
+      confirm_password: "",
+    },
+  });
+
+  function onSubmit(data: ChangePasswordFormValues) {
+    setIsLoading(true);
+    console.log(data);
+  }
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+        <FormField
+          control={form.control}
+          name="current"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel className="font-semibold">Current password</FormLabel>
+              <FormControl>
+                <Input type="password" autoComplete="current-password" placeholder="Your current password" {...field} />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <FormField
+          control={form.control}
+          name="password"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel className="font-semibold">New password</FormLabel>
+              <FormControl>
+                <Input type="password" autoComplete="password" placeholder="Your new password" {...field} />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <FormField
+          control={form.control}
+          name="confirm_password"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel className="font-semibold">Repeat new password</FormLabel>
+              <FormControl>
+                <Input type="password" autoComplete="password" placeholder="Confirm your new password" {...field} />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <div className="flex justify-end">
+          <Button type="submit" disabled={isLoading}>
+            {isLoading && <Icons.spinner className="mr-2 h-4 w-4 animate-spin" />}
+            Change password
+          </Button>
+        </div>
+
+      </form>
+    </Form>
+  );
+}

frontend/src/features/user/services/user-service.ts

@@ -1,12 +1,18 @@
-import api from "@/lib/api-client";
+import api from '@/lib/api-client';
-import { ICurrentUserResponse, IUser } from "@/features/user/types/user.types";
+import { ICurrentUserResponse, IUser } from '@/features/user/types/user.types';
 
-export async function getMe(): Promise<IUser>{
+export async function getMe(): Promise<IUser> {
-  const req = await api.get<IUser>("/user/me");
+  const req = await api.get<IUser>('/user/me');
   return req.data as IUser;
 }
 
-export async function getUserInfo(): Promise<ICurrentUserResponse>{
+export async function getUserInfo(): Promise<ICurrentUserResponse> {
-  const req = await api.get<ICurrentUserResponse>("/user/info");
+  const req = await api.get<ICurrentUserResponse>('/user/info');
   return req.data as ICurrentUserResponse;
 }
+
+export async function updateUser(data: Partial<IUser>) {
+  const req = await api.post<IUser>('/user/update', data);
+
+  return req.data as IUser;
+}

frontend/src/features/user/types/user.types.ts

@@ -12,6 +12,7 @@ export interface IUser {
   lastLoginIp: string;
   createdAt: Date;
   updatedAt: Date;
+  workspaceRole?: string;
 }
 
 export interface ICurrentUserResponse {

frontend/src/features/user/user-provider.tsx

@@ -1,25 +1,25 @@
-"use client"
+'use client';
 
-import { useAtom } from "jotai";
+import { useAtom } from 'jotai';
-import { currentUserAtom } from "@/features/user/atoms/current-user-atom";
+import { currentUserAtom } from '@/features/user/atoms/current-user-atom';
-import { useEffect } from "react";
+import { useEffect } from 'react';
-import useCurrentUser from "@/features/user/hooks/use-current-user";
+import useCurrentUser from '@/features/user/hooks/use-current-user';
 
 export function UserProvider({ children }: React.PropsWithChildren) {
   const [, setCurrentUser] = useAtom(currentUserAtom);
   const { data, isLoading, error } = useCurrentUser();
 
   useEffect(() => {
-    if (data && data.user){
+    if (data && data.user) {
       setCurrentUser(data);
     }
   }, [data, isLoading, setCurrentUser]);
 
   if (isLoading) return <></>;
 
-  if (error){
+  if (error) {
-    return <>an error occurred</>
+    return <>an error occurred</>;
   }
 
-  return <>{children}</>
+  return <>{children}</>;
 }

frontend/src/features/workspace/components/workspace-invite-dialog.tsx

@@ -0,0 +1,46 @@
+"use client";
+
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import ButtonWithIcon from "@/components/ui/button-with-icon";
+import { IconUserPlus } from "@tabler/icons-react";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { WorkspaceInviteForm } from "@/features/workspace/components/workspace-invite-form";
+
+export default function WorkspaceInviteDialog() {
+
+  return (
+    <>
+      <Dialog>
+        <DialogTrigger asChild>
+          <ButtonWithIcon
+            icon={<IconUserPlus size="20" />}
+            className="font-medium">
+            Invite Members
+          </ButtonWithIcon>
+        </DialogTrigger>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>
+              Invite new members
+            </DialogTitle>
+            <DialogDescription>
+              Here you can invite new members.
+            </DialogDescription>
+          </DialogHeader>
+
+          <ScrollArea className=" max-h-[60vh]">
+            <WorkspaceInviteForm />
+          </ScrollArea>
+
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+}

frontend/src/features/workspace/components/workspace-invite-form.tsx

@@ -0,0 +1,154 @@
+"use client";
+
+import * as z from "zod";
+import { useFieldArray, useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { IconTrashX } from "@tabler/icons-react";
+import ButtonWithIcon from "@/components/ui/button-with-icon";
+import { Button } from "@/components/ui/button";
+
+enum UserRole {
+  GUEST = "guest",
+  MEMBER = "member",
+  OWNER = "owner",
+}
+
+const inviteFormSchema = z.object({
+  members: z
+    .array(
+      z.object({
+        email: z.string({
+          required_error: "Email is required",
+        }).email({ message: "Please enter a valid email" }),
+        role: z
+          .string({
+            required_error: "Please select a role",
+          }),
+      }),
+    ),
+});
+
+type InviteFormValues = z.infer<typeof inviteFormSchema>
+
+const defaultValues: Partial<InviteFormValues> = {
+  members: [
+    { email: "user@example.com", role: "member" },
+  ],
+};
+
+export function WorkspaceInviteForm() {
+
+  const form = useForm<InviteFormValues>({
+    resolver: zodResolver(inviteFormSchema),
+    defaultValues,
+    mode: "onChange",
+  });
+
+  const { fields, append, remove } = useFieldArray({
+    name: "members",
+    control: form.control,
+  });
+
+  function onSubmit(data: InviteFormValues) {
+    console.log(data);
+  }
+
+  return (
+
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
+        <div>
+          {
+            fields.map((field, index) => {
+              const key = index.toString();
+              return (
+                <div key={key} className="flex justify-between items-center py-2 gap-2">
+
+                  <div className="flex-grow">
+                    {index === 0 && <FormLabel>Email</FormLabel>}
+                    <FormField
+                      control={form.control}
+                      key={field.id}
+                      name={`members.${index}.email`}
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormControl>
+                            <Input {...field} />
+                          </FormControl>
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+                  </div>
+
+                  <div className="flex-grow">
+                    {index === 0 && <FormLabel>Role</FormLabel>}
+
+                    <FormField
+                      control={form.control}
+                      key={field.id}
+                      name={`members.${index}.role`}
+                      render={({ field }) => (
+                        <FormItem>
+                          <Select onValueChange={field.onChange} defaultValue={field.value}>
+                            <FormControl>
+                              <SelectTrigger>
+                                <SelectValue placeholder="Select a role for this member" />
+                              </SelectTrigger>
+                            </FormControl>
+                            <SelectContent>
+                              {
+                                Object.keys(UserRole).map((key) => {
+                                  const value = UserRole[key as keyof typeof UserRole];
+                                  return (
+                                    <SelectItem key={key} value={value}>
+                                      {key.charAt(0).toUpperCase() + key.slice(1).toLowerCase()}
+                                    </SelectItem>
+                                  );
+                                })
+                              }
+                            </SelectContent>
+                          </Select>
+                          <FormMessage />
+                        </FormItem>
+                      )} />
+                  </div>
+
+                  <div className="flex items-center">
+                    {index != 0 &&
+                      <ButtonWithIcon
+                        icon={<IconTrashX size={16} />}
+                        variant="secondary"
+                        onClick={() => remove(index)}
+                      />
+                    }
+                  </div>
+
+                </div>
+              );
+            })
+          }
+
+          <Button
+            variant="outline"
+            size="sm"
+            className="mt-2"
+            onClick={() => append({ email: "", role: UserRole.MEMBER })}
+          >
+            Add
+          </Button>
+
+        </div>
+
+        <div className="flex justify-end">
+          <Button type="submit">Send Invitation</Button>
+        </div>
+      </form>
+    </Form>
+
+  );
+
+}

frontend/src/features/workspace/components/workspace-invite-section.tsx

@@ -0,0 +1,45 @@
+"use client";
+
+import { useAtom } from "jotai/index";
+import { currentUserAtom } from "@/features/user/atoms/current-user-atom";
+import { useEffect, useState } from "react";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import toast from "react-hot-toast";
+
+
+export default function WorkspaceInviteSection() {
+  const [currentUser] = useAtom(currentUserAtom);
+  const [inviteLink, setInviteLink] = useState<string>("");
+
+  useEffect(() => {
+    setInviteLink(`${window.location.origin}/invite/${currentUser.workspace.inviteCode}`);
+  }, [currentUser.workspace.inviteCode]);
+
+  function handleCopy(): void {
+    try {
+      navigator.clipboard?.writeText(inviteLink);
+      toast.success("Link copied successfully");
+    } catch (err) {
+      toast.error("Failed to copy to clipboard");
+    }
+  }
+
+  return (
+    <>
+      <div>
+        <h2 className="font-semibold py-5">Invite members</h2>
+        <p className="text-muted-foreground">
+          Anyone with the link can join this workspace.
+        </p>
+      </div>
+
+      <div className="flex space-x-2">
+        <Input value={inviteLink} readOnly />
+        <Button variant="secondary" className="shrink-0" onClick={handleCopy}>
+          Copy link
+        </Button>
+      </div>
+    </>
+  );
+}

frontend/src/features/workspace/components/workspace-members-table.tsx

@@ -0,0 +1,52 @@
+"use client";
+
+import { useAtom } from "jotai/index";
+import { currentUserAtom } from "@/features/user/atoms/current-user-atom";
+import { useQuery } from "@tanstack/react-query";
+import { getWorkspaceUsers } from "@/features/workspace/services/workspace-service";
+import { Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import { Badge } from "@/components/ui/badge";
+
+export default function WorkspaceMembersTable() {
+  const [currentUser] = useAtom(currentUserAtom);
+
+  const workspaceUsers = useQuery({
+    queryKey: ["workspaceUsers", currentUser.workspace.id],
+    queryFn: async () => {
+      return await getWorkspaceUsers();
+    },
+  });
+
+  const { data, isLoading, isSuccess } = workspaceUsers;
+
+  return (
+    <>
+      {isSuccess &&
+
+        <Table>
+          <TableCaption>Your workspace members will appear here.</TableCaption>
+          <TableHeader>
+            <TableRow>
+              <TableHead>Name</TableHead>
+              <TableHead>Email</TableHead>
+              <TableHead>Role</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+
+            {
+              data['users']?.map((user, index) => (
+                <TableRow key={index}>
+                  <TableCell className="font-medium">{user.name}</TableCell>
+                  <TableCell>{user.email}</TableCell>
+                  <TableCell> <Badge variant="secondary">{user.workspaceRole}</Badge></TableCell>
+                </TableRow>
+              ))
+            }
+
+          </TableBody>
+        </Table>
+      }
+    </>
+  );
+}

frontend/src/features/workspace/components/workspace-name-form.tsx

@@ -0,0 +1,88 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { currentUserAtom } from "@/features/user/atoms/current-user-atom";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useAtom } from "jotai";
+import { useForm } from "react-hook-form";
+import * as z from "zod";
+import toast from "react-hot-toast";
+import { updateUser } from "@/features/user/services/user-service";
+import { useState } from "react";
+import { focusAtom } from "jotai-optics";
+import { updateWorkspace } from "@/features/workspace/services/workspace-service";
+import { IWorkspace } from "@/features/workspace/types/workspace.types";
+
+const profileFormSchema = z.object({
+  name: z.string(),
+});
+
+type ProfileFormValues = z.infer<typeof profileFormSchema>;
+
+const workspaceAtom = focusAtom(currentUserAtom, (optic) => optic.prop("workspace"));
+
+export default function WorkspaceNameForm() {
+  const [isLoading, setIsLoading] = useState(false);
+  const [currentUser] = useAtom(currentUserAtom);
+  const [, setWorkspace] = useAtom(workspaceAtom);
+
+  const defaultValues: Partial<ProfileFormValues> = {
+    name: currentUser?.workspace?.name,
+  };
+
+  const form = useForm<ProfileFormValues>({
+    resolver: zodResolver(profileFormSchema),
+    defaultValues,
+  });
+
+  async function onSubmit(data: Partial<IWorkspace>) {
+    setIsLoading(true);
+
+    try {
+      const updatedWorkspace = await updateWorkspace(data);
+      setWorkspace(updatedWorkspace);
+      toast.success("Updated successfully");
+    } catch (err) {
+      console.log(err);
+      toast.error("Failed to update data.");
+    }
+
+    setIsLoading(false);
+
+  }
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
+        <FormField
+          control={form.control}
+          name="name"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Name</FormLabel>
+              <FormControl>
+                <Input className="max-w-md" placeholder="e.g ACME" {...field} />
+              </FormControl>
+              <FormDescription>
+                Your workspace name.
+              </FormDescription>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <Button type="submit">Save</Button>
+      </form>
+    </Form>
+  );
+}

frontend/src/features/workspace/services/workspace-service.ts

@@ -0,0 +1,19 @@
+import api from '@/lib/api-client';
+import { ICurrentUserResponse, IUser } from '@/features/user/types/user.types';
+import { IWorkspace } from '../types/workspace.types';
+
+export async function getWorkspace(): Promise<IWorkspace> {
+  const req = await api.get<IWorkspace>('/workspace');
+  return req.data as IWorkspace;
+}
+
+export async function getWorkspaceUsers(): Promise<IUser[]> {
+  const req = await api.get<IUser[]>('/workspace/members');
+  return req.data as IUser[];
+}
+
+export async function updateWorkspace(data: Partial<IWorkspace>) {
+  const req = await api.post<IWorkspace>('/workspace/update', data);
+
+  return req.data as IWorkspace;
+}

frontend/tsconfig.json

@@ -5,6 +5,7 @@
     "allowJs": true,
     "skipLibCheck": true,
     "strict": false,
+    "strictNullChecks": false,
     "forceConsistentCasingInFileNames": true,
     "noEmit": true,
     "esModuleInterop": true,