From 9c2245135159c587b0b8542128fcb5ffa51253f5 Mon Sep 17 00:00:00 2001 From: Mayur Date: Fri, 6 Sep 2024 16:27:18 +0530 Subject: [PATCH 001/447] feat: Added Edit icon --- apps/web/assets/icons/Exit.icon.tsx | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) create mode 100644 apps/web/assets/icons/Exit.icon.tsx diff --git a/apps/web/assets/icons/Exit.icon.tsx b/apps/web/assets/icons/Exit.icon.tsx new file mode 100644 index 000000000..5c0c940d3 --- /dev/null +++ b/apps/web/assets/icons/Exit.icon.tsx @@ -0,0 +1,18 @@ +import { IconType } from '@types'; +import { IconSizes } from 'config'; + +export const ExitIcon = ({ size = 'sm' }: IconType) => { + return ( + + + + + ); +}; From a8ee60346b126ecac3a0f3ef90076ea219e0b60b Mon Sep 17 00:00:00 2001 From: Mayur Date: Fri, 6 Sep 2024 16:28:11 +0530 Subject: [PATCH 002/447] feat: Added Prople icon as team management icon in sidebar --- apps/web/assets/icons/People.icon.tsx | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) create mode 100644 apps/web/assets/icons/People.icon.tsx diff --git a/apps/web/assets/icons/People.icon.tsx b/apps/web/assets/icons/People.icon.tsx new file mode 100644 index 000000000..633b2ed91 --- /dev/null +++ b/apps/web/assets/icons/People.icon.tsx @@ -0,0 +1,16 @@ +import { IconType } from '@types'; +import { IconSizes } from 'config'; + +export const PeopleIcon = ({ size = 'sm' }: IconType) => { + return ( + + + + ); +}; From a12a5f66f48f818cf0ea825682c8abe958b8da57 Mon Sep 17 00:00:00 2001 From: Mayur Date: Fri, 6 Sep 2024 16:30:03 +0530 Subject: [PATCH 003/447] refactor: Added custom OutlinedTabs and passed tabItems to it --- apps/web/components/settings/SettingsTab.tsx | 42 ++++++++++---------- 1 file changed, 22 insertions(+), 20 deletions(-) diff --git a/apps/web/components/settings/SettingsTab.tsx b/apps/web/components/settings/SettingsTab.tsx index 24033f496..71aa10ad5 100644 --- a/apps/web/components/settings/SettingsTab.tsx +++ b/apps/web/components/settings/SettingsTab.tsx @@ -1,11 +1,11 @@ import getConfig from 'next/config'; -import { Tabs } from '@mantine/core'; import { useRouter } from 'next/router'; import { loadStripe } from '@stripe/stripe-js'; import { Elements } from '@stripe/react-stripe-js'; import { UserCards } from './UserCards'; import { GenerateAccessToken } from './GenerateAccessToken'; +import { OutlinedTabs } from '@ui/OutlinedTabs'; export function SettingsTab() { const router = useRouter(); @@ -15,24 +15,26 @@ export function SettingsTab() { publicRuntimeConfig.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY && loadStripe(publicRuntimeConfig.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY); - return ( - - - Access Token - {stripePromise ? Cards : null} - + const tabItems = [ + { + value: 'accesstoken', + title: 'Access Token', + content: , + }, + ...(stripePromise + ? [ + { + value: 'addcard', + title: 'Cards', + content: ( + + + + ), + }, + ] + : []), + ]; - - - - - {stripePromise ? ( - - - - - - ) : null} - - ); + return ; } From 89875969ea32ff8b775bfe2ff49d7a4e24dad9f7 Mon Sep 17 00:00:00 2001 From: Mayur Date: Fri, 6 Sep 2024 16:30:45 +0530 Subject: [PATCH 004/447] feat: Added INVITE_MEMBERS in MODAL_KEYS --- apps/web/config/constants.config.ts | 2 ++ apps/web/config/theme.config.ts | 1 + 2 files changed, 3 insertions(+) diff --git a/apps/web/config/constants.config.ts b/apps/web/config/constants.config.ts index e3679a61f..c86f4d87a 100644 --- a/apps/web/config/constants.config.ts +++ b/apps/web/config/constants.config.ts @@ -43,6 +43,8 @@ export const MODAL_KEYS = { VALIDATIONS_OUTPUT: 'VALIDATIONS_OUTPUT', PAYMENT_PLANS: 'PAYMENT_PLANS', PAYMENT_DETAILS_ADD: 'PAYMENT_PLANS', + + INVITE_MEMBERS: 'INVITE_MEMBERS', }; export const MODAL_TITLES = { diff --git a/apps/web/config/theme.config.ts b/apps/web/config/theme.config.ts index d503d9153..f77dcfb9b 100644 --- a/apps/web/config/theme.config.ts +++ b/apps/web/config/theme.config.ts @@ -11,6 +11,7 @@ export const colors = { greenDark: '#008489', yellow: '#F7B801', grey: '#B9BEBD', + red: '#880808', darkGrey: '#454545', BGPrimaryDark: '#111111', From eb10490ade3111095fac4b88aade7387096ab55a Mon Sep 17 00:00:00 2001 From: Mayur Date: Fri, 6 Sep 2024 16:31:29 +0530 Subject: [PATCH 005/447] feat: Added export member OutlinedTabs --- apps/web/design-system/OutlinedTabs/index.tsx | 1 + 1 file changed, 1 insertion(+) create mode 100644 apps/web/design-system/OutlinedTabs/index.tsx diff --git a/apps/web/design-system/OutlinedTabs/index.tsx b/apps/web/design-system/OutlinedTabs/index.tsx new file mode 100644 index 000000000..aea566eac --- /dev/null +++ b/apps/web/design-system/OutlinedTabs/index.tsx @@ -0,0 +1 @@ +export * from './OutlinedTabs'; From b40e264f13ec54f82f6c907e26e6cdccc46b9c0c Mon Sep 17 00:00:00 2001 From: Mayur Date: Fri, 6 Sep 2024 16:31:59 +0530 Subject: [PATCH 006/447] feat: Added custom styling for OutlinedTabs --- .../OutlinedTabs/OutlinedTabs.style.tsx | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) create mode 100644 apps/web/design-system/OutlinedTabs/OutlinedTabs.style.tsx diff --git a/apps/web/design-system/OutlinedTabs/OutlinedTabs.style.tsx b/apps/web/design-system/OutlinedTabs/OutlinedTabs.style.tsx new file mode 100644 index 000000000..29c6068a5 --- /dev/null +++ b/apps/web/design-system/OutlinedTabs/OutlinedTabs.style.tsx @@ -0,0 +1,17 @@ +import { colors } from '@config'; +import { createStyles } from '@mantine/core'; + +const getOutlinedTabStyles = () => ({ + padding: '10px 20px', + borderBottom: '2px solid transparent', + '&[aria-selected="true"]': { + color: colors.blue, + borderBottom: `2px solid ${colors.blue}`, + borderColor: colors.blue, + }, +}); +export default createStyles(() => { + return { + tab: getOutlinedTabStyles(), + }; +}); From 7b5dd4049d3966295eac83054256961855908fc4 Mon Sep 17 00:00:00 2001 From: Mayur Date: Fri, 6 Sep 2024 16:32:26 +0530 Subject: [PATCH 007/447] feat: Added component OutlinedTabs --- .../OutlinedTabs/OutlinedTabs.tsx | 66 +++++++++++++++++++ 1 file changed, 66 insertions(+) create mode 100644 apps/web/design-system/OutlinedTabs/OutlinedTabs.tsx diff --git a/apps/web/design-system/OutlinedTabs/OutlinedTabs.tsx b/apps/web/design-system/OutlinedTabs/OutlinedTabs.tsx new file mode 100644 index 000000000..b88ed4ace --- /dev/null +++ b/apps/web/design-system/OutlinedTabs/OutlinedTabs.tsx @@ -0,0 +1,66 @@ +import { Tabs as MantineTabs, Flex, Badge } from '@mantine/core'; +import useStyles from './OutlinedTabs.style'; + +interface OutlinedTabItem { + id?: string; + value: string; + title: string; + badgeCount?: number; // Optional badge count + icon?: React.ReactNode; + content: React.ReactNode; +} + +interface OutlinedTabsProps { + items: OutlinedTabItem[]; + value?: string; + keepMounted?: boolean; + defaultValue?: string; + allowTabDeactivation?: boolean; + onTabChange?: (value: string) => void; + inviteButton?: React.ReactNode; // Optional invite button +} + +export function OutlinedTabs({ + items, + value, + onTabChange, + keepMounted, + allowTabDeactivation, + defaultValue, + inviteButton, +}: OutlinedTabsProps) { + const { classes } = useStyles(); + + return ( + + + + {items.map((item) => ( + + {item.title} + {item.badgeCount !== undefined && ( + + {item.badgeCount} + + )} + + ))} + + {inviteButton} + + + {items.map((item) => ( + + {item.content} + + ))} + + ); +} From 16f38990a063065a8bb4b0706b58e76bfc6a4e9b Mon Sep 17 00:00:00 2001 From: Mayur Date: Fri, 6 Sep 2024 16:34:11 +0530 Subject: [PATCH 008/447] feat: Added story component OutlinedTabs --- .../OutlinedTabs/OutlineTabs.stories.tsx | 35 +++++++++++++++++++ 1 file changed, 35 insertions(+) create mode 100644 apps/web/design-system/OutlinedTabs/OutlineTabs.stories.tsx diff --git a/apps/web/design-system/OutlinedTabs/OutlineTabs.stories.tsx b/apps/web/design-system/OutlinedTabs/OutlineTabs.stories.tsx new file mode 100644 index 000000000..c3e62867f --- /dev/null +++ b/apps/web/design-system/OutlinedTabs/OutlineTabs.stories.tsx @@ -0,0 +1,35 @@ +import React from 'react'; +import { Meta, Story } from '@storybook/react'; +import { OutlinedTabs } from './OutlinedTabs'; + +export default { + title: 'OutlinedTabs', + component: OutlinedTabs, + argTypes: { + onTabChange: { action: 'tab changed' }, + }, +} as Meta; + +const Template: Story = (args) => ; + +export const Default = Template.bind({}); +Default.args = { + items: [ + { + value: 'tab1', + title: 'Tab 1', + content:
Content for Tab 1
, + }, + { + value: 'tab2', + title: 'Tab 2', + content:
Content for Tab 2
, + }, + { + value: 'tab3', + title: 'Tab 3', + content:
Content for Tab 3
, + }, + ], + defaultValue: 'tab1', +}; From 16937e85393741549988d2ad6b1be22df19a8937 Mon Sep 17 00:00:00 2001 From: Mayur Date: Fri, 6 Sep 2024 16:34:52 +0530 Subject: [PATCH 009/447] feat: Added navitem team-members --- apps/web/layouts/AppLayout/AppLayout.tsx | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/apps/web/layouts/AppLayout/AppLayout.tsx b/apps/web/layouts/AppLayout/AppLayout.tsx index 0756863a7..34b121c0a 100644 --- a/apps/web/layouts/AppLayout/AppLayout.tsx +++ b/apps/web/layouts/AppLayout/AppLayout.tsx @@ -13,6 +13,7 @@ import { ImportIcon } from '@assets/icons/Import.icon'; import { OutLinkIcon } from '@assets/icons/OutLink.icon'; import { SettingsIcon } from '@assets/icons/Settings.icon'; import { ActivitiesIcon } from '@assets/icons/Activities.icon'; +import { PeopleIcon } from '@assets/icons/People.icon'; import LogoBlack from '@assets/images/full-logo-dark.png'; import LogoWhite from '@assets/images/full-logo-light.png'; @@ -99,6 +100,13 @@ export function AppLayout({ children, pageProps }: PropsWithChildren<{ pageProps href="https://docs.impler.io" icon={} /> + + } + title="Team Members" + />
From 0dfade4a437362ef6f8945ce7db2cfc04c01c2ac Mon Sep 17 00:00:00 2001 From: Mayur Date: Fri, 6 Sep 2024 16:35:40 +0530 Subject: [PATCH 010/447] feat: Added index.tsx for TeamMembers --- apps/web/pages/team-members/index.tsx | 22 ++++++++++++++++++++++ 1 file changed, 22 insertions(+) create mode 100644 apps/web/pages/team-members/index.tsx diff --git a/apps/web/pages/team-members/index.tsx b/apps/web/pages/team-members/index.tsx new file mode 100644 index 000000000..3531bba2f --- /dev/null +++ b/apps/web/pages/team-members/index.tsx @@ -0,0 +1,22 @@ +import { Title } from '@mantine/core'; +import { AppLayout } from '@layouts/AppLayout'; +import { TeamMembersTab } from './InviteMembersTab'; + +export default function TeamMembers() { + return ( + <> + Team Members + + + ); +} + +export async function getServerSideProps() { + return { + props: { + title: 'Team Members', + }, + }; +} + +TeamMembers.Layout = AppLayout; From 33c7270d0a765505d7fda77ffc2022449eec989a Mon Sep 17 00:00:00 2001 From: Mayur Date: Fri, 6 Sep 2024 16:50:50 +0530 Subject: [PATCH 011/447] feat: Added invitation requests and template UI --- .../pages/team-members/InvitationRequests.tsx | 86 +++++++++++++++++++ 1 file changed, 86 insertions(+) create mode 100644 apps/web/pages/team-members/InvitationRequests.tsx diff --git a/apps/web/pages/team-members/InvitationRequests.tsx b/apps/web/pages/team-members/InvitationRequests.tsx new file mode 100644 index 000000000..bd034a4ed --- /dev/null +++ b/apps/web/pages/team-members/InvitationRequests.tsx @@ -0,0 +1,86 @@ +import { ActionIcon, Flex, Group, Stack, Text } from '@mantine/core'; +import { Table } from '@ui/table'; +import { AppLayout } from '@layouts/AppLayout'; +import { ReactNode } from 'react'; +import { CheckIcon } from '@assets/icons/Check.icon'; +import { CloseIcon } from '@assets/icons/Close.icon'; +import { colors } from '@config'; + +interface SentInvitation { + _id?: string; + projectName: string; + invitedOn?: string; + role: string; + action?: ReactNode; +} + +const membersData: SentInvitation[] = [ + { + projectName: 'Artha', + invitedOn: '2023-01-01', + role: 'Admin', + }, + { + projectName: 'Omniva', + role: 'Admin', + }, + { + projectName: 'Impiler', + invitedOn: '2023-03-10', + role: 'Tech', + }, + { + projectName: 'Digimatics', + invitedOn: '2023-04-22', + role: 'Finance', + }, +]; + +export function InvitationRequests() { + return ( + + + + headings={[ + { + title: 'Project Name', + key: 'projectName', + Cell: (member: SentInvitation) => ( + + {member.projectName || 'No Name'} + + ), + }, + { + title: 'Invited By', + key: 'invitedOn', + Cell: (member: SentInvitation) => {member.invitedOn || 'N/A'}, + }, + { + title: 'Inited On', + key: 'role', + Cell: (member: SentInvitation) => {member.role}, + }, + { + title: 'Action', + key: 'action', + Cell: () => ( + + + + + + + + + ), + }, + ]} + data={membersData} + /> + + + ); +} + +InvitationRequests.Layout = AppLayout; From ecda76972fad21fc407319d2cfaf43ac6ea6f593 Mon Sep 17 00:00:00 2001 From: Mayur Date: Fri, 6 Sep 2024 16:51:55 +0530 Subject: [PATCH 012/447] feat: Added Invitation requests --- .../pages/team-members/InvitationRequests.tsx | 36 ++++++------------- 1 file changed, 10 insertions(+), 26 deletions(-) diff --git a/apps/web/pages/team-members/InvitationRequests.tsx b/apps/web/pages/team-members/InvitationRequests.tsx index bd034a4ed..eaf413ec9 100644 --- a/apps/web/pages/team-members/InvitationRequests.tsx +++ b/apps/web/pages/team-members/InvitationRequests.tsx @@ -1,7 +1,6 @@ import { ActionIcon, Flex, Group, Stack, Text } from '@mantine/core'; import { Table } from '@ui/table'; import { AppLayout } from '@layouts/AppLayout'; -import { ReactNode } from 'react'; import { CheckIcon } from '@assets/icons/Check.icon'; import { CloseIcon } from '@assets/icons/Close.icon'; import { colors } from '@config'; @@ -9,30 +8,15 @@ import { colors } from '@config'; interface SentInvitation { _id?: string; projectName: string; - invitedOn?: string; - role: string; - action?: ReactNode; + invitedBy: string; + invitedOn: string; } const membersData: SentInvitation[] = [ { projectName: 'Artha', - invitedOn: '2023-01-01', - role: 'Admin', - }, - { - projectName: 'Omniva', - role: 'Admin', - }, - { - projectName: 'Impiler', - invitedOn: '2023-03-10', - role: 'Tech', - }, - { - projectName: 'Digimatics', - invitedOn: '2023-04-22', - role: 'Finance', + invitedBy: 'Jane Doe', + invitedOn: '13-05-2024', }, ]; @@ -54,23 +38,23 @@ export function InvitationRequests() { { title: 'Invited By', key: 'invitedOn', - Cell: (member: SentInvitation) => {member.invitedOn || 'N/A'}, + Cell: (member: SentInvitation) => {member.invitedBy || 'N/A'}, }, { title: 'Inited On', - key: 'role', - Cell: (member: SentInvitation) => {member.role}, + key: 'invitedOn', + Cell: (member: SentInvitation) => {member.invitedOn}, }, { title: 'Action', key: 'action', Cell: () => ( - + - + - + ), From eb31f936619008efe92afb71644ea4447c4ab95f Mon Sep 17 00:00:00 2001 From: Mayur Date: Fri, 6 Sep 2024 16:52:29 +0530 Subject: [PATCH 013/447] feat: Added InviteMembersModal --- .../pages/team-members/InviteMembersModal.tsx | 35 +++++++++++++++++++ 1 file changed, 35 insertions(+) create mode 100644 apps/web/pages/team-members/InviteMembersModal.tsx diff --git a/apps/web/pages/team-members/InviteMembersModal.tsx b/apps/web/pages/team-members/InviteMembersModal.tsx new file mode 100644 index 000000000..67466daf3 --- /dev/null +++ b/apps/web/pages/team-members/InviteMembersModal.tsx @@ -0,0 +1,35 @@ +import { Textarea, Flex, Select } from '@mantine/core'; +import { Button } from '@ui/button'; + +export function InviteMembersModal() { + return ( + <> +