vite

* replace next with vite
* disable strictmode (it interferes with collaboration in dev mode)

client/src/features/settings/account/settings/account-settings.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import AccountNameForm from '@/features/settings/account/settings/components/account-name-form';
+import ChangeEmail from '@/features/settings/account/settings/components/change-email';
+import ChangePassword from '@/features/settings/account/settings/components/change-password';
+import { Divider } from '@mantine/core';
+
+export default function AccountSettings() {
+
+  return (
+    <>
+      <AccountNameForm />
+
+      <Divider my="lg" />
+
+      <ChangeEmail />
+
+      <Divider my="lg" />
+
+      <ChangePassword />
+    </>);
+}

client/src/features/settings/account/settings/components/account-name-form.tsx

@@ -0,0 +1,64 @@
+import { useAtom } from 'jotai';
+import { focusAtom } from 'jotai-optics';
+import * as z from 'zod';
+import { useForm, zodResolver } from '@mantine/form';
+import { currentUserAtom } from '@/features/user/atoms/current-user-atom';
+import { updateUser } from '@/features/user/services/user-service';
+import { IUser } from '@/features/user/types/user.types';
+import { useState } from 'react';
+import toast from 'react-hot-toast';
+import { TextInput, Button } from '@mantine/core';
+
+const formSchema = z.object({
+  name: z.string().min(2).max(40).nonempty('Your name cannot be blank'),
+});
+
+type FormValues = z.infer<typeof formSchema>;
+
+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 form = useForm<FormValues>({
+    validate: zodResolver(formSchema),
+    initialValues: {
+      name: currentUser?.user?.name,
+    },
+  });
+
+  async function handleSubmit(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 onSubmit={form.onSubmit(handleSubmit)}>
+      <TextInput
+        id="name"
+        label="Name"
+        placeholder="Your name"
+        variant="filled"
+        {...form.getInputProps('name')}
+        rightSection={
+        <Button type="submit" disabled={isLoading} loading={isLoading}>
+          Save
+        </Button>
+      }
+      />
+    </form>
+  );
+}
+

client/src/features/settings/account/settings/components/change-email.tsx

@@ -0,0 +1,83 @@
+import { Modal, TextInput, Button, Text, Group, PasswordInput } from '@mantine/core';
+import * as z from 'zod';
+import { useState } from 'react';
+import { useAtom } from 'jotai';
+import { currentUserAtom } from '@/features/user/atoms/current-user-atom';
+import { useDisclosure } from '@mantine/hooks';
+import * as React from 'react';
+import { useForm, zodResolver } from '@mantine/form';
+
+
+export default function ChangeEmail() {
+  const [currentUser] = useAtom(currentUserAtom);
+  const [opened, { open, close }] = useDisclosure(false);
+
+  return (
+    <Group justify="space-between" wrap="nowrap" gap="xl">
+      <div>
+        <Text size="md">Email</Text>
+        <Text size="sm" c="dimmed">
+          {currentUser.user.email}
+        </Text>
+      </div>
+
+      <Button onClick={open} variant="default">Change email</Button>
+
+      <Modal opened={opened} onClose={close} title="Change email" centered>
+        <Text mb="md">To change your email, you have to enter your password and new email.</Text>
+        <ChangePasswordForm />
+      </Modal>
+    </Group>
+  );
+}
+
+const formSchema = z.object({
+  email: z.string({ required_error: 'New email is required' }).email(),
+  password: z.string({ required_error: 'your current password is required' }).min(8),
+});
+
+type FormValues = z.infer<typeof formSchema>
+
+function ChangePasswordForm() {
+  const [isLoading, setIsLoading] = useState(false);
+
+  const form = useForm<FormValues>({
+    validate: zodResolver(formSchema),
+    initialValues: {
+      password: '',
+      email: '',
+    },
+  });
+
+  function handleSubmit(data: FormValues) {
+    setIsLoading(true);
+    console.log(data);
+  }
+
+  return (
+    <form onSubmit={form.onSubmit(handleSubmit)}>
+
+      <PasswordInput
+        label="Password"
+        placeholder="Enter your password"
+        variant="filled"
+        mb="md"
+        {...form.getInputProps('password')}
+      />
+
+      <TextInput
+        id="email"
+        label="Email"
+        description="Enter your new preferred email"
+        placeholder="New email"
+        variant="filled"
+        mb="md"
+        {...form.getInputProps('email')}
+      />
+
+      <Button type="submit" disabled={isLoading} loading={isLoading}>
+        Change email
+      </Button>
+    </form>
+  );
+}

client/src/features/settings/account/settings/components/change-password.tsx

@@ -0,0 +1,85 @@
+import { Button, Group, Text, Modal, PasswordInput } from '@mantine/core';
+import * as z from 'zod';
+import { useState } from 'react';
+import { useDisclosure } from '@mantine/hooks';
+import * as React from 'react';
+import { useForm, zodResolver } from '@mantine/form';
+
+
+export default function ChangePassword() {
+  const [opened, { open, close }] = useDisclosure(false);
+
+  return (
+    <Group justify="space-between" wrap="nowrap" gap="xl">
+      <div>
+        <Text size="md">Password</Text>
+        <Text size="sm" c="dimmed">
+          You can change your password here.
+        </Text>
+      </div>
+
+      <Button onClick={open} variant="default">Change password</Button>
+
+      <Modal opened={opened} onClose={close} title="Change password" centered>
+        <Text mb="md">Your password must be a minimum of 8 characters.</Text>
+        <ChangePasswordForm />
+
+      </Modal>
+    </Group>
+  );
+}
+
+const formSchema = 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 FormValues = z.infer<typeof formSchema>
+
+function ChangePasswordForm() {
+  const [isLoading, setIsLoading] = useState(false);
+
+  const form = useForm<FormValues>({
+    validate: zodResolver(formSchema),
+    initialValues: {
+      current: '',
+      password: '',
+      confirm_password: '',
+    },
+  });
+
+  function handleSubmit(data: FormValues) {
+    setIsLoading(true);
+    console.log(data);
+  }
+
+  return (
+    <form onSubmit={form.onSubmit(handleSubmit)}>
+
+      <PasswordInput
+        label="Current password"
+        name="current"
+        placeholder="Enter your password"
+        variant="filled"
+        mb="md"
+        {...form.getInputProps('password')}
+      />
+
+      <PasswordInput
+        label="New password"
+        placeholder="Enter your password"
+        variant="filled"
+        mb="md"
+        {...form.getInputProps('password')}
+      />
+
+      <Button type="submit" disabled={isLoading} loading={isLoading}>
+        Change password
+      </Button>
+    </form>
+  );
+}

client/src/features/settings/modal/atoms/settings-modal-atom.ts

@@ -0,0 +1,3 @@
+import { atom } from "jotai";
+
+export const settingsModalAtom = atom<boolean>(false);

client/src/features/settings/modal/modal.module.css

@@ -0,0 +1,76 @@
+.sidebar {
+  max-height: rem(700px);
+  width: rem(180px);
+  padding: var(--mantine-spacing-sm);
+  display: flex;
+  flex-direction: column;
+  border-right: rem(1px) solid
+    light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
+}
+
+.sidebarFlex {
+  display: flex;
+}
+
+.sidebarMain {
+  flex: 1;
+}
+
+.sidebarRightSection {
+  flex: 1;
+  padding: rem(16px) rem(40px);
+}
+
+.sidebarItemHeader {
+  padding: var(--mantine-spacing-xs) var(--mantine-spacing-sm);
+  font-size: var(--mantine-font-size-sm);
+  color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-1));
+  font-weight: 500;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+}
+
+.sidebarItem {
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  text-decoration: none;
+  font-size: var(--mantine-font-size-sm);
+  color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-1));
+  padding: var(--mantine-spacing-xs) var(--mantine-spacing-sm);
+  border-radius: var(--mantine-radius-sm);
+  font-weight: 500;
+  user-select: none;
+
+  @mixin hover {
+    background-color: light-dark(
+      var(--mantine-color-gray-1),
+      var(--mantine-color-dark-6)
+    );
+    color: light-dark(var(--mantine-color-black), var(--mantine-color-white));
+
+    .sidebarItemIcon {
+      color: light-dark(var(--mantine-color-black), var(--mantine-color-white));
+    }
+  }
+
+  &[data-active] {
+    &,
+    & :hover {
+      background-color: var(--mantine-color-blue-light);
+      color: var(--mantine-color-blue-light-color);
+
+      .sidebarItemIcon {
+        color: var(--mantine-color-blue-light-color);
+      }
+    }
+  }
+}
+
+.sidebarItemIcon {
+  color: light-dark(var(--mantine-color-gray-6), var(--mantine-color-dark-2));
+  margin-right: var(--mantine-spacing-sm);
+  width: rem(20px);
+  height: rem(20px);
+}

client/src/features/settings/modal/settings-modal.tsx

@@ -0,0 +1,30 @@
+import { Modal, Text } from '@mantine/core';
+import React from 'react';
+import SettingsSidebar from '@/features/settings/modal/settings-sidebar';
+import { useAtom } from 'jotai';
+import { settingsModalAtom } from '@/features/settings/modal/atoms/settings-modal-atom';
+
+export default function SettingsModal() {
+  const [isModalOpen, setModalOpen] = useAtom(settingsModalAtom);
+
+  return (
+    <>
+      <Modal.Root size={1000} opened={isModalOpen} onClose={() => setModalOpen(false)}>
+        <Modal.Overlay />
+        <Modal.Content>
+          <Modal.Header>
+            <Modal.Title>
+              <Text size="xl" fw={500}>Settings</Text>
+            </Modal.Title>
+            <Modal.CloseButton />
+          </Modal.Header>
+          <Modal.Body>
+
+            <SettingsSidebar />
+
+          </Modal.Body>
+        </Modal.Content>
+      </Modal.Root>
+    </>
+  );
+}

client/src/features/settings/modal/settings-sidebar.tsx

@@ -0,0 +1,101 @@
+import React, { useState } from 'react';
+import classes from '@/features/settings/modal/modal.module.css';
+import { IconBell, IconFingerprint, IconReceipt, IconSettingsCog, IconUser, IconUsers } from '@tabler/icons-react';
+import { Loader, ScrollArea, Text } from '@mantine/core';
+
+const AccountSettings = React.lazy(() => import('@/features/settings/account/settings/account-settings'));
+const WorkspaceSettings = React.lazy(() => import('@/features/settings/workspace/settings/workspace-settings'));
+const WorkspaceMembers = React.lazy(() => import('@/features/settings/workspace/members/workspace-members'));
+
+interface DataItem {
+  label: string;
+  icon: React.ElementType;
+}
+
+interface DataGroup {
+  heading: string;
+  items: DataItem[];
+}
+
+const groupedData: DataGroup[] = [
+  {
+    heading: 'Account',
+    items: [
+      { label: 'Account', icon: IconUser },
+      { label: 'Notifications', icon: IconBell },
+    ],
+  },
+  {
+    heading: 'Workspace',
+    items: [
+      { label: 'General', icon: IconSettingsCog },
+      { label: 'Members', icon: IconUsers },
+      { label: 'Security', icon: IconFingerprint },
+      { label: 'Billing', icon: IconReceipt },
+    ],
+  },
+];
+
+export default function SettingsSidebar() {
+  const [active, setActive] = useState('Account');
+
+  const menu = groupedData.map((group) => (
+    <div key={group.heading}>
+      <Text c="dimmed" className={classes.sidebarItemHeader}>{group.heading}</Text>
+      {group.items.map((item) => (
+        <div
+          className={classes.sidebarItem}
+          data-active={item.label === active || undefined}
+          key={item.label}
+          onClick={(event) => {
+            event.preventDefault();
+            setActive(item.label);
+          }}
+        >
+          <item.icon className={classes.sidebarItemIcon} stroke={1.5} />
+          <span>{item.label}</span>
+        </div>
+      ))}
+    </div>
+  ));
+
+  let ActiveComponent;
+
+  switch (active) {
+    case 'Account':
+      ActiveComponent = AccountSettings;
+      break;
+    case 'General':
+      ActiveComponent = WorkspaceSettings;
+      break;
+    case 'Members':
+      ActiveComponent = WorkspaceMembers;
+      break;
+    default:
+      ActiveComponent = null;
+  }
+
+  return (
+    <div className={classes.sidebarFlex}>
+      <nav className={classes.sidebar}>
+        <div className={classes.sidebarMain}>
+          {menu}
+        </div>
+      </nav>
+
+
+      <ScrollArea h="650" w="100%" scrollbarSize={4}>
+
+        <div className={classes.sidebarRightSection}>
+
+          <React.Suspense fallback={<Loader size="sm" color="gray" />}>
+            {ActiveComponent && <ActiveComponent />}
+          </React.Suspense>
+
+        </div>
+      </ScrollArea>
+
+
+    </div>
+  );
+}

client/src/features/settings/workspace/members/components/workspace-invite-form.tsx

@@ -0,0 +1,65 @@
+import {
+  Group,
+  Box,
+  Text,
+  Button,
+  TagsInput,
+  Space, Select,
+} from '@mantine/core';
+import WorkspaceInviteSection from '@/features/settings/workspace/members/components/workspace-invite-section';
+import React from 'react';
+
+enum UserRole {
+  GUEST = 'Guest',
+  MEMBER = 'Member',
+  OWNER = 'Owner',
+}
+
+
+export function WorkspaceInviteForm() {
+
+  function handleSubmit(data) {
+    console.log(data);
+  }
+
+  return (
+    <>
+      <Box maw="500" mx="auto">
+
+        <WorkspaceInviteSection />
+
+        <Space h="md" />
+
+        <TagsInput
+          description="Enter valid email addresses separated by comma or space"
+          label="Invite from email"
+          placeholder="enter valid emails addresses"
+          variant="filled"
+          splitChars={[',', ' ']}
+          maxDropdownHeight={200}
+          maxTags={50}
+        />
+
+        <Space h="md" />
+
+        <Select
+          description="Select role to assign to all invited members"
+          label="Select role"
+          placeholder="Pick a role"
+          variant="filled"
+          data={Object.values(UserRole)}
+          defaultValue={UserRole.MEMBER}
+          allowDeselect={false}
+          checkIconPosition="right"
+        />
+
+        <Group justify="center" mt="md">
+          <Button>Send invitation
+          </Button>
+        </Group>
+
+      </Box>
+    </>
+  );
+
+}

client/src/features/settings/workspace/members/components/workspace-invite-modal.tsx

@@ -0,0 +1,28 @@
+import { IconUserPlus } from '@tabler/icons-react';
+import { WorkspaceInviteForm } from '@/features/settings/workspace/members/components/workspace-invite-form';
+import { Button, Divider, Modal, ScrollArea, Text } from '@mantine/core';
+import { useDisclosure } from '@mantine/hooks';
+
+export default function WorkspaceInviteModal() {
+  const [opened, { open, close }] = useDisclosure(false);
+
+  return (
+    <>
+      <Button onClick={open} leftSection={<IconUserPlus size={18} />}>
+        Invite Members
+      </Button>
+
+      <Modal size="600" opened={opened} onClose={close} title="Invite new members" centered>
+
+        <Divider size="xs" mb="xs"/>
+
+        <ScrollArea h="80%">
+
+          <WorkspaceInviteForm />
+
+        </ScrollArea>
+      </Modal>
+
+    </>
+  );
+}

client/src/features/settings/workspace/members/components/workspace-invite-section.tsx

@@ -0,0 +1,41 @@
+import { useAtom } from 'jotai';
+import { currentUserAtom } from '@/features/user/atoms/current-user-atom';
+import React, { useEffect, useState } from 'react';
+import { Button, CopyButton, Text, TextInput } from '@mantine/core';
+
+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]);
+
+  return (
+    <>
+      <div>
+        <Text fw={500} mb="sm">Invite link</Text>
+        <Text c="dimmed" mb="sm">
+          Anyone with this link can join this workspace.
+        </Text>
+      </div>
+
+      <TextInput
+        variant="filled"
+        value={inviteLink}
+        readOnly
+        rightSection={
+          <CopyButton value={inviteLink}>
+            {({ copied, copy }) => (
+              <Button color={copied ? 'teal' : ''} onClick={copy}>
+                {copied ? 'Copied' : 'Copy'}
+              </Button>
+            )}
+          </CopyButton>
+        }
+      />
+
+
+    </>
+  );
+}

client/src/features/settings/workspace/members/components/workspace-members-table.tsx

@@ -0,0 +1,68 @@
+import { useAtom } from 'jotai';
+import { currentUserAtom } from '@/features/user/atoms/current-user-atom';
+import { useQuery } from '@tanstack/react-query';
+import { getWorkspaceUsers } from '@/features/workspace/services/workspace-service';
+import { Group, Table, Avatar, Text, Badge } from '@mantine/core';
+
+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 verticalSpacing="sm">
+          <Table.Thead>
+            <Table.Tr>
+              <Table.Th>Name</Table.Th>
+              <Table.Th>Status</Table.Th>
+              <Table.Th>Role</Table.Th>
+            </Table.Tr>
+          </Table.Thead>
+
+          <Table.Tbody>
+
+            {
+              data['users']?.map((user, index) => (
+                <Table.Tr key={index}>
+
+                  <Table.Td>
+                    <Group gap="sm">
+                      <Avatar size={40} src={user.name} radius={40} />
+                      <div>
+                        <Text fz="sm" fw={500}>
+                          {user.name}
+                        </Text>
+                        <Text fz="xs" c="dimmed">
+                          {user.email}
+                        </Text>
+                      </div>
+                    </Group>
+                  </Table.Td>
+
+                  <Table.Td>
+                    <Badge variant="light">
+                      Active
+                    </Badge>
+                  </Table.Td>
+
+                  <Table.Td>{user.workspaceRole}</Table.Td>
+                </Table.Tr>
+              ))
+            }
+
+          </Table.Tbody>
+        </Table>
+      }
+    </>
+  );
+}

client/src/features/settings/workspace/members/workspace-members.tsx

@@ -0,0 +1,28 @@
+import WorkspaceInviteSection from '@/features/settings/workspace/members/components/workspace-invite-section';
+import React from 'react';
+import WorkspaceInviteModal from '@/features/settings/workspace/members/components/workspace-invite-modal';
+import { Divider, Group, Space, Text } from '@mantine/core';
+
+const WorkspaceMembersTable = React.lazy(() => import('@/features/settings/workspace/members/components/workspace-members-table'));
+
+export default function WorkspaceMembers() {
+  return (
+    <>
+      <WorkspaceInviteSection />
+
+      <Divider my="lg" />
+
+      <Group justify="space-between">
+        <Text fw={500}>Members</Text>
+
+        <WorkspaceInviteModal />
+
+      </Group>
+
+      <Space h="lg" />
+
+      <WorkspaceMembersTable />
+
+    </>
+  );
+}

client/src/features/settings/workspace/settings/components/workspace-name-form.tsx

@@ -0,0 +1,64 @@
+import { currentUserAtom } from '@/features/user/atoms/current-user-atom';
+import { useAtom } from 'jotai';
+import * as z from 'zod';
+import toast from 'react-hot-toast';
+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';
+import { TextInput, Button } from '@mantine/core';
+import { useForm, zodResolver } from '@mantine/form';
+
+const formSchema = z.object({
+  name: z.string().nonempty('Workspace name cannot be blank'),
+});
+
+type FormValues = z.infer<typeof formSchema>;
+
+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 form = useForm<FormValues>({
+    validate: zodResolver(formSchema),
+    initialValues: {
+      name: currentUser?.workspace?.name,
+    },
+  });
+
+  async function handleSubmit(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 onSubmit={form.onSubmit(handleSubmit)}>
+      <TextInput
+        id="name"
+        label="Name"
+        placeholder="e.g ACME"
+        variant="filled"
+        {...form.getInputProps('name')}
+        rightSection={
+          <Button type="submit" disabled={isLoading} loading={isLoading}>
+            Save
+          </Button>
+        }
+      />
+    </form>
+  );
+}

client/src/features/settings/workspace/settings/workspace-settings.tsx

@@ -0,0 +1,6 @@
+import WorkspaceNameForm from '@/features/settings/workspace/settings/components/workspace-name-form';
+
+export default function WorkspaceSettings() {
+
+  return (<WorkspaceNameForm />);
+}