[CLIENT] Add User's Profile to Home Page (#62)

client/components/profile/Profile.tsx

@@ -0,0 +1,60 @@
+import React from "react";
+import { useStyletron } from "baseui";
+import { Avatar } from "baseui/avatar";
+import { Block } from "baseui/block";
+import { FlexGrid, FlexGridItem } from "baseui/flex-grid";
+import { Label1, Label2, Label3 } from "baseui/typography";
+
+import { EmployeesProfiles } from "../../graphql/types";
+import { ProfileItem } from "./ProfileItem";
+
+interface ProfileProps {
+  data: EmployeesProfiles;
+}
+
+export const Profile: React.FC<ProfileProps> = ({ data }) => {
+  const [, theme] = useStyletron();
+
+  return (
+    <Block display="flex" flexDirection="column" padding="0 32px">
+      <FlexGrid flexGridColumnCount={2} gridColumnGap="24px">
+        <Avatar
+          size="120px"
+          name={data.name}
+          src={data.employeeProfilePicture ?? undefined}
+        />
+
+        <FlexGridItem
+          display="flex"
+          flexDirection="column"
+          justifyContent="center"
+          margin="12px 0"
+        >
+          <Label1>{data.name}</Label1>
+          <Label2 $style={{ fontStyle: "italic", opacity: 0.64 }}>
+            {data.title}
+          </Label2>
+          <Label3 color={theme.colors.accent} marginTop="8px">
+            {data.employeeEmail}
+          </Label3>
+        </FlexGridItem>
+      </FlexGrid>
+
+      <FlexGrid flexGridColumnCount={2}>
+        <FlexGridItem>
+          <ProfileItem
+            title="Direct Manager"
+            value={data.directManager?.name ?? "NONE"}
+          />
+          <ProfileItem title="Cost Center" value={data.costCenter} />
+          <ProfileItem title="WorkGroup" value={data.workgroup} />
+        </FlexGridItem>
+        <FlexGridItem>
+          <ProfileItem title="Mobile Number" value={data.mobileNumber} />
+          <ProfileItem title="Start Date" value={data.hiringDate} />
+          <ProfileItem title="Function" value={data.function} />
+        </FlexGridItem>
+      </FlexGrid>
+    </Block>
+  );
+};

client/components/profile/ProfileItem.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import { useStyletron } from "baseui";
+import { Block } from "baseui/block";
+import { Label2, Label4 } from "baseui/typography";
+
+interface ProfileItemProps {
+  title: string;
+  value: string;
+}
+
+export const ProfileItem: React.FC<ProfileItemProps> = (props) => {
+  const [css, theme] = useStyletron();
+
+  return (
+    <Block display="flex" flexDirection="column" margin="32px 0">
+      <Label4 color={theme.colors.accent}>{props.title}</Label4>
+      <Label2>{props.value}</Label2>
+    </Block>
+  );
+};

client/graphql/fragments/employeeProfile.gql

@@ -11,4 +11,8 @@ fragment EmployeeProfile on EmployeesProfiles {
   employeeEmail
   mobileNumber
   costCenter
+  directManager {
+    id
+    name
+  }
 }

client/graphql/types/index.tsx

@@ -556,6 +556,10 @@ export type CertficationFragment = (
 export type EmployeeProfileFragment = (
   { __typename?: 'EmployeesProfiles' }
   & Pick<EmployeesProfiles, 'id' | 'name' | 'title' | 'hiringDate' | 'function' | 'directManagerId' | 'workgroup' | 'employmentType' | 'allocationPercentage' | 'employeeEmail' | 'mobileNumber' | 'costCenter'>
+  & { directManager?: Maybe<(
+    { __typename?: 'EmployeesProfiles' }
+    & Pick<EmployeesProfiles, 'id' | 'name'>
+  )> }
 );
 
 export type EmployeeSkillFragment = (
@@ -1184,6 +1188,10 @@ export const EmployeeProfileFragmentDoc = gql`
   employeeEmail
   mobileNumber
   costCenter
+  directManager {
+    id
+    name
+  }
 }
     `;
 export const RegularUserResponseFragmentDoc = gql`

client/pages/index.tsx

@@ -1,15 +1,46 @@
-import { Heading, HeadingLevel } from "baseui/heading";
+import React from "react";
+import { FlexGrid, FlexGridItem } from "baseui/flex-grid";
+import { FILL, Tab, Tabs } from "baseui/tabs-motion";
+import { Label4 } from "baseui/typography";
 
-import { useRoleQuery } from "../graphql/types";
+import { Loading } from "../components/common/Loading";
+import { Profile } from "../components/profile/Profile";
+import { EmployeesProfiles, useMeQuery } from "../graphql/types";
 import { withAuth } from "../hocs/withAuth";
 
+
 const Home: React.FC<{}> = () => {
-  const [{ data }] = useRoleQuery();
+  const [{ data, fetching }] = useMeQuery();
+  const [activeKey, setActiveKey] = React.useState<React.Key>("0");
+
+  if (fetching) return <Loading />;
+  if (!data?.me) return <p>Something wrong. Please try again later</p>;
 
   return (
-    <HeadingLevel>
-      <Heading>TPD for ({data?.role!})</Heading>
-    </HeadingLevel>
+    <FlexGrid display="flex" flexGridColumnCount={[1, 1, 1, 2]}>
+      <FlexGridItem flex={1}>
+        <Profile data={data?.me as EmployeesProfiles}></Profile>
+      </FlexGridItem>
+      <FlexGridItem flex={2}>
+        <Tabs
+          fill={FILL.fixed}
+          activeKey={activeKey}
+          onChange={({ activeKey }) => {
+            setActiveKey(activeKey);
+          }}
+        >
+          <Tab title="Skills">
+            <Label4>No Skills yet</Label4>
+          </Tab>
+          <Tab title="Certificates">
+            <Label4>No Certificates yet</Label4>
+          </Tab>
+          <Tab title="Trainings">
+            <Label4>No Trainings yet</Label4>
+          </Tab>
+        </Tabs>
+      </FlexGridItem>
+    </FlexGrid>
   );
 };
 

client/styles/theme.ts

@@ -7,7 +7,7 @@ const primitives: Partial<ThemePrimitives> = {
   accent: "#171C8F", // ITWorx Blue
   accent700: "#101464",
   mono500: "#D0D3D4", // ITWorx Grey
-  mono1000: "#101820" // ITWorx Black
+  mono1000: "#101820", // ITWorx Black
 };
 
 const overrides = {
@@ -17,7 +17,8 @@ const overrides = {
     buttonSecondaryHover: primitives.accent700,
     buttonMinimalFill: "#FFF",
     buttonMinimalText: primitives.primary700,
-    buttonMinimalHover: "#EEE"
+    buttonMinimalHover: "#EEE",
+    borderSelected: primitives.primary,
   },
 };