Dev

.env.example

@@ -19,3 +19,10 @@ GOOGLE_CLIENT_ID=
 GOOGLE_CLIENT_SECRET=
 NODE_ENV="development"
 WS_URL=
+
+#For sending email
+SMTP_HOST=
+SMTP_PORT=
+SMTP_USERNAME=
+SMTP_PASSWORD=
+EMAIL_FROM="[email protected]"

package.json

@@ -6,7 +6,6 @@
     "build:1-generate": "prisma generate",
     "build:2-next": "cross-env NODE_ENV=production next build",
     "build:3-server": "tsc --project tsconfig.server.json",
-    "build:4-migrate": "prisma migrate deploy",
     "build": "run-s build:*",
     "lint": "next lint",
     "start": "next start",
@@ -34,6 +33,7 @@
     "next": "^13.4.19",
     "next-auth": "^4.23.1",
     "node-fetch": "^3.3.2",
+    "nodemailer": "^6.9.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "recharts": "^2.7.3",
@@ -46,7 +46,8 @@
   "devDependencies": {
     "@faker-js/faker": "^8.0.2",
     "@playwright/test": "^1.37.1",
-    "@types/node": "^20.5.1",
+    "@types/node": "^20.5.3",
+    "@types/nodemailer": "^6.4.9",
     "@types/react": "^18.2.20",
     "@types/react-dom": "^18.2.7",
     "@types/ws": "^8.5.5",

prisma/schema.prisma

@@ -65,18 +65,19 @@ model VerificationToken {
 }
 
 model Workspace {
-  id          String    @id @default(cuid())
-  name        String
-  shortName   String
-  description String?
-  website     String?
-  createdAt   DateTime  @default(now())
-  updatedAt   DateTime  @updatedAt
-  createdById String
-  color       String
-  projects    Project[]
-  members     User[]
-  createdBy   User      @relation("createdBy", fields: [createdById], references: [id])
+  id              String            @id @default(cuid())
+  name            String
+  shortName       String            @unique
+  description     String?
+  website         String?
+  createdAt       DateTime          @default(now())
+  updatedAt       DateTime          @updatedAt
+  createdById     String
+  color           String
+  projects        Project[]
+  members         User[]
+  createdBy       User              @relation("createdBy", fields: [createdById], references: [id])
+  invitationTokens InvitationToken[]
 }
 
 model Project {
@@ -206,6 +207,17 @@ model Sprint {
   project     Project   @relation(fields: [projectId], references: [id], onDelete: Cascade)
 }
 
+model InvitationToken {
+  id          String    @id @default(cuid())
+  expiresAt   DateTime
+  email       String
+  workspace   Workspace @relation(fields: [workspaceId], references: [id], onDelete: Cascade)
+  workspaceId String
+  token       String    @unique @default(cuid())
+  createdAt   DateTime  @default(now())
+  createdByEmail String
+}
+
 enum ProjectType {
   KANBAN
   SCRUM

src/components/AddUserPopUp/AddUserPopUp.tsx

@@ -0,0 +1,73 @@
+import React, { useState } from 'react';
+import { Button, Modal, Form, Input, message } from 'antd';
+import { UserPlusIcon } from '@heroicons/react/24/outline';
+import { api } from '../../utils/api';
+import { useWorkspaceStore } from '../../store/workspace.store';
+
+interface AddUserPopUpProps {
+  render?: React.ReactNode;
+}
+
+const AddUserPopUp = (props: AddUserPopUpProps) => {
+  const [open, setOpen] = useState(false);
+
+  const currentWorkspace = useWorkspaceStore(state => state.currentWorkspace);
+
+  const { mutate: sendWorkspaceInvite, isLoading } = api.workspace.sendWorkspaceInvite.useMutation({
+    onSuccess() {
+      form.resetFields();
+      setOpen(false);
+      message.success('Invite sent successfully');
+    },
+    onError() {
+      message.error('Something went wrong');
+    }
+  });
+
+  const showModal = () => {
+    setOpen(true);
+  };
+
+  const handleOk = () => {
+    form.submit();
+  };
+
+  const handleCancel = () => {
+    setOpen(false);
+  };
+
+  const [form] = Form.useForm();
+
+  const onFinish = (values: any) => {
+    if (!currentWorkspace) return;
+    sendWorkspaceInvite({ workspaceId: currentWorkspace!.id, email: values.email });
+  };
+
+  return (
+    <div>
+      {props.render ? <div onClick={showModal}>{props.render}</div> : <Button type="primary" onClick={showModal} icon={<UserPlusIcon width={16} />} className='flex items-center gap-1-2-3'>
+        Invite Members
+      </Button>}
+      <Modal
+        title="Invite Members"
+        open={open}
+        onOk={handleOk}
+        confirmLoading={isLoading}
+        onCancel={handleCancel}
+        okText="Invite"
+      >
+        <Form
+          form={form}
+          onFinish={onFinish}
+          style={{ maxWidth: 600 }}
+        >
+          <Form.Item name="email" label="Email" rules={[{ required: true }]}>
+            <Input />
+          </Form.Item>
+        </Form>
+      </Modal>
+    </div>
+  );
+};
+
+export default AddUserPopUp;

src/components/ButtonMenu/ButtonMenu.tsx

@@ -25,7 +25,6 @@ const ButtonMenu = (props: Props) => {
           title={props.title}
           extra={
             <Button
-              type="ghost"
               size="small"
               icon={<CloseOutlined />}
               onClick={() => {

src/components/Checklist/CheckListEditor.tsx

@@ -79,7 +79,6 @@ const CheckListEditor = (props: {
                     Add
                   </Button> */}
                 <Button
-                  type="ghost"
                   onClick={() => {
                     setIsOnFocus(false);
                   }}
@@ -89,14 +88,12 @@ const CheckListEditor = (props: {
               </div>
               <div className="flex gap-1-2">
                 <Button
-                  type="ghost"
                   className="flex items-center p-0"
                   icon={<UserPlusIcon width={16} />}
                 >
                   Assign
                 </Button>
                 <Button
-                  type="ghost"
                   className="flex items-center p-0"
                   icon={<ClockIcon width={16} />}
                 >

src/components/Checklist/Checklist.tsx

@@ -60,11 +60,11 @@ const Checklist = (props: CheckList) => {
     if (checkListItemsQuery.isSuccess) {
       setChecklistItems(checkListItemsQuery.data);
     }
-  }, [checkListItemsQuery.isSuccess]);
+  }, [checkListItemsQuery.data, checkListItemsQuery.isSuccess]);
 
   React.useEffect(() => {
     setPercent(calculateChecklistProgress());
-  }, [checklistItems]);
+  }, [calculateChecklistProgress, checklistItems]);
 
   return (
     <div>
@@ -105,7 +105,6 @@ const Checklist = (props: CheckList) => {
                 <p className={item.checked ? 'line-through': '' } >{item.title}</p>
               </Checkbox>
               <Button
-                type="ghost"
                 className="p-0 flex items-center justify-center"
                 icon={<TrashIcon height={16} />}
                 loading={isDeleting}

src/components/CircularProgressIndicator/CircularProgressIndicator.tsx

@@ -0,0 +1,11 @@
+import {LoadingOutlined} from '@ant-design/icons';
+import type {SpinProps} from 'antd';
+import {Spin} from 'antd';
+
+const loadingIcon = <LoadingOutlined style={{fontSize: 24}} spin />;
+
+const CircularProgressIndicator = (props: SpinProps) => {
+  return <Spin indicator={loadingIcon} {...props} />;
+};
+
+export default CircularProgressIndicator;

src/components/Container/Container.tsx

@@ -65,7 +65,6 @@ const Container = forwardRef<HTMLDivElement, ContainerProps>(
       createIssue({
         title: value,
         workflowId: label!,
-        index: 0,
       });
     };
 

src/components/ErrorIcon/ErrorIcon.tsx

@@ -0,0 +1,18 @@
+import {ExclamationCircleIcon} from '@heroicons/react/24/outline';
+import {theme} from 'antd';
+import React from 'react';
+
+const {useToken} = theme;
+
+const ErrorIcon: React.FC = () => {
+  const {token: themeToken} = useToken();
+  return (
+    <ExclamationCircleIcon
+      height={24}
+      width={24}
+      color={themeToken.colorPrimary}
+    />
+  );
+};
+
+export default ErrorIcon;

src/components/Issue/IssueModal.tsx

@@ -30,7 +30,6 @@ const IssueModal = (props: IssueModalProps) => {
         </div>
       ) : (
         <Button
-          type="ghost"
           className="w-100"
           icon={<PlusOutlined />}
           onClick={handleClick}