Reset card UI

apps/web/lib/features/team-members-card-view.tsx

@@ -1,34 +1,22 @@
-import {
-	useAuthenticateUser,
-	useModal,
-	useOrganizationTeams,
-	useTeamInvitations
-} from '@app/hooks';
+import { useAuthenticateUser, useModal, useOrganizationTeams, useTeamInvitations } from '@app/hooks';
 import { Transition } from '@headlessui/react';
 import { InviteFormModal } from './team/invite/invite-form-modal';
-import {
-	InvitedCard,
-	InviteUserTeamCard
-} from './team/invite/user-invite-card';
+import { InvitedCard, InviteUserTeamCard } from './team/invite/user-invite-card';
 import { InviteUserTeamSkeleton, UserTeamCard, UserTeamCardSkeleton } from '.';
 import { OT_Member } from '@app/interfaces';
 
 interface Props {
 	teamMembers: OT_Member[];
 	publicTeam: boolean;
+	currentUser: OT_Member | undefined;
 }
 
-const TeamMembersCardView: React.FC<Props> = ({ teamMembers, publicTeam=false }) => {
-	const { isTeamManager, user } = useAuthenticateUser();
-	const currentUser = teamMembers.find((m) => {
-		return m.employee.userId === user?.id;
-	});
-	const { activeTeam, teamsFetching } = useOrganizationTeams();
-	const members = activeTeam?.members || [];
-
+const TeamMembersCardView: React.FC<Props> = ({ teamMembers: members, currentUser, publicTeam = false }) => {
+	const { isTeamManager } = useAuthenticateUser();
+	const { teamsFetching } = useOrganizationTeams();
 	const { teamInvitations } = useTeamInvitations();
 	const $teamsFetching = teamsFetching && members.length === 0;
-	return(
+	return (
 		<ul className="mt-7">
 			{/* Current authenticated user members */}
 			<Transition
@@ -109,9 +97,8 @@ const TeamMembersCardView: React.FC<Props> = ({ teamMembers, publicTeam=false })
 				</li>
 			</Transition>
 		</ul>
-	)
-
-}
+	);
+};
 
 function Invite() {
 	const { user } = useAuthenticateUser();
@@ -120,10 +107,7 @@ function Invite() {
 	return (
 		<>
 			<InviteUserTeamCard active={user?.isEmailVerified} onClick={openModal} />
-			<InviteFormModal
-				open={isOpen && !!user?.isEmailVerified}
-				closeModal={closeModal}
-			/>
+			<InviteFormModal open={isOpen && !!user?.isEmailVerified} closeModal={closeModal} />
 		</>
 	);
 }

apps/web/lib/features/team-members-table-view.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import DataTable from '@components/ui/data-table';
 import { Column, ColumnDef } from '@tanstack/react-table';
 import { OT_Member } from '@app/interfaces';
 import { UserInfoCell, TaskCell, WorkedOnTaskCell, TaskEstimateInfoCell, ActionMenuCell } from './team-member-cell';
 import { useAuthenticateUser, useModal } from '@app/hooks';
@@ -9,10 +9,12 @@
 
 const TeamMembersTableView = ({
 	teamMembers,
+	currentUser,
 	publicTeam = false,
 	active = false
 }: {
 	teamMembers: OT_Member[];
+	currentUser: OT_Member | undefined;
 	publicTeam?: boolean;
 	active?: boolean;
 }) => {
@@ -55,10 +57,16 @@
 
 	const footerRows = React.useMemo<React.ReactNode[]>(() => [<Invite key={0} />], []);
 
+	const sortedTeamMembers: OT_Member[] = [];
+	if (currentUser) {
+		sortedTeamMembers.push(currentUser);
+	}
+	sortedTeamMembers.push(...teamMembers);
+
 	return (
 		<DataTable
 			columns={columns as Column<OT_Member>[]}
-			data={teamMembers}
+			data={sortedTeamMembers}
 			footerRows={footerRows}
 			noResultsMessage={{
 				heading: 'No team members found',

apps/web/lib/features/team-members.tsx

@@ -9,57 +9,64 @@
 import { IssuesView } from '@app/constants';
 
 type TeamMembersProps = {
-  publicTeam?: boolean;
-  kabanView?: IssuesView;
+	publicTeam?: boolean;
+	kabanView?: IssuesView;
 };
 
 export function TeamMembers({ publicTeam = false, kabanView = IssuesView.CARDS }: TeamMembersProps) {
-  const { user } = useAuthenticateUser();
-  const { activeTeam } = useOrganizationTeams();
+	const { user } = useAuthenticateUser();
+	const { activeTeam } = useOrganizationTeams();
 
-  const members = activeTeam?.members || [];
-  const currentUser = members.find((m) => m.employee.userId === user?.id);
+	const members = activeTeam?.members || [];
+	const currentUser = members.find((m) => m.employee.userId === user?.id);
+	const $members = members.filter((member) => member.id !== currentUser?.id);
 
-const $members = members.filter((m) => m.employee.user?.id !== user?.id);
+	let teamMembersView;
 
-
-let teamMembersView;
-
-switch (true) {
-  case members.length === 0:
-    teamMembersView = (
-      <div className="">
-        <div className="lg:block hidden">
-          <UserTeamCardSkeletonCard />
-          <InviteUserTeamCardSkeleton />
-        </div>
-        <div className="block lg:hidden">
-          <UserCard />
-          <UserCard />
-        </div>
-      </div>
-    );
-    break;
-  case kabanView === IssuesView.CARDS:
-    teamMembersView = <TeamMembersCardView teamMembers={$members} publicTeam={publicTeam} />;
-    break;
-  case kabanView === IssuesView.TABLE:
-    teamMembersView = (
-      <Transition
-        show={!!currentUser}
-        enter="transition-opacity duration-75"
-        enterFrom="opacity-0"
-        enterTo="opacity-100"
-        leave="transition-opacity duration-150"
-        leaveFrom="opacity-100"
-        leaveTo="opacity-0"
-      >
-        <TeamMembersTableView teamMembers={members} publicTeam={publicTeam} active={user?.isEmailVerified} />
-      </Transition>
-    );
-    break;
-  default:
-    teamMembersView = <TeamMembersCardView teamMembers={members} publicTeam={publicTeam} />;
-}
-return teamMembersView;
+	switch (true) {
+		case members.length === 0:
+			teamMembersView = (
+				<div className="">
+					<div className="lg:block hidden">
+						<UserTeamCardSkeletonCard />
+						<InviteUserTeamCardSkeleton />
+					</div>
+					<div className="block lg:hidden">
+						<UserCard />
+						<UserCard />
+					</div>
+				</div>
+			);
+			break;
+		case kabanView === IssuesView.CARDS:
+			teamMembersView = (
+				<TeamMembersCardView teamMembers={members} currentUser={currentUser} publicTeam={publicTeam} />
+			);
+			break;
+		case kabanView === IssuesView.TABLE:
+			teamMembersView = (
+				<Transition
+					show={!!currentUser}
+					enter="transition-opacity duration-75"
+					enterFrom="opacity-0"
+					enterTo="opacity-100"
+					leave="transition-opacity duration-150"
+					leaveFrom="opacity-100"
+					leaveTo="opacity-0"
+				>
+					<TeamMembersTableView
+						teamMembers={$members}
+						currentUser={currentUser}
+						publicTeam={publicTeam}
+						active={user?.isEmailVerified}
+					/>
+				</Transition>
+			);
+			break;
+		default:
+			teamMembersView = (
+				<TeamMembersCardView teamMembers={$members} currentUser={currentUser} publicTeam={publicTeam} />
+			);
+	}
+	return teamMembersView;
 }

apps/web/lib/i18n/en.ts

@@ -1,6 +1,7 @@
 export const en = {
 	TITLE: 'Ever Teams',
 	common: {
+		COPY_NUMBER: 'Copy Number',
 		VERIFY: 'verify',
 		PLEASE: 'please',
 		HERE: 'here',

apps/web/pages/index.tsx

@@ -21,7 +21,7 @@
 function MainPage() {
 	const { t } = useTranslation();
 	const { isTeamMember, isTrackingEnabled, activeTeam } = useOrganizationTeams();
-	const breadcrumb = [...t('pages.home.BREADCRUMB', { returnObjects: true }), activeTeam?.name || ''];
+	const breadcrumb = [...(t('pages.home.BREADCRUMB', { returnObjects: true }) as any), activeTeam?.name || ''];
 	const [view, setView] = useState<IssuesView>(IssuesView.CARDS);
 
 	return (
@@ -79,7 +79,7 @@
 				<div className="h-0.5 bg-[#FFFFFF14]"></div>
 			</div>
 
 			<Container className="">{isTeamMember ? <TeamMembers kabanView={view} /> : <NoTeam />}</Container>
 		</MainLayout>
 	);
 }